From 5977b5bf8a5b888fd71d5ea68b83c3839d828c10 Mon Sep 17 00:00:00 2001 From: jos Date: Fri, 6 Jun 2014 09:51:21 +0200 Subject: [PATCH] Updated styling of graph3d docs --- docs/css/graph3d.css | 87 --- docs/graph3d.html | 763 +++++++++++---------- docs/index.html | 8 +- examples/graph3d/example01_basis.html | 6 +- examples/graph3d/index.html | 3 + examples/graph3d/playground/playground.css | 6 +- examples/index.html | 1 + 7 files changed, 403 insertions(+), 471 deletions(-) delete mode 100644 docs/css/graph3d.css diff --git a/docs/css/graph3d.css b/docs/css/graph3d.css deleted file mode 100644 index f0c251df..00000000 --- a/docs/css/graph3d.css +++ /dev/null @@ -1,87 +0,0 @@ -html, body { - width: 100%; - height: 100%; - padding: 0; - margin: 0; -} - -body, td, th { - font-family: arial, sans-serif; - font-size: 11pt; - color: #4D4D4D; - line-height: 1.7em; -} - -#container { - margin: 0 auto; - padding-bottom: 50px; - width: 900px; -} - -h1 { - font-size: 180%; - font-weight: bold; - padding: 0; - margin: 1em 0 1em 0; -} - -h2 { - padding-top: 20px; - padding-bottom: 10px; - border-bottom: 1px solid #a0c0f0; - color: #2B7CE9; -} - -h3 { - font-size: 140%; -} - - -a { - color: #2B7CE9; - text-decoration: none; -} -a:visited { - color: #2E60A4; -} -a:hover { - color: red; - text-decoration: underline; -} - -hr { - border: none 0; - border-top: 1px solid #abc; - height: 1px; -} - -pre { - display: block; - font-size: 10pt; - line-height: 1.5em; - font-family: monospace; -} - -pre, code { - background-color: #f5f5f5; -} - -table -{ - border-collapse: collapse; -} - -th { - font-weight: bold; - border: 1px solid lightgray; - background-color: #E5E5E5; - text-align: left; - vertical-align: top; - padding: 5px; -} - -td { - border: 1px solid lightgray; - padding: 5px; - vertical-align: top; -} diff --git a/docs/graph3d.html b/docs/graph3d.html index 2f893c83..d5b3cacf 100644 --- a/docs/graph3d.html +++ b/docs/graph3d.html @@ -1,11 +1,12 @@ - Graph3d documentation - + vis.js | graph3d documentation - - + + + + @@ -13,27 +14,33 @@

Graph3d documentation

+

Overview

+

+ Graph3d is an interactive visualization chart to draw data in a three dimensional + graph. You can freely move and zoom in the graph by dragging and scrolling in the + window. + Graph3d also supports animation of a graph. +

+

Contents

-

Overview

+

Example

- Graph3d is an interactive visualization chart to draw data in a three dimensional - graph. You can freely move and zoom in the graph by dragging and scrolling in the - window. - Graph3d also supports animation of a graph. + The following code shows how to create a Graph3d and provide it with data. + More examples can be found in the examples directory. 

-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE HTML>
 <html>
 <head>
     <title>Graph 3D demo</title>
@@ -103,64 +110,72 @@
-The class name of the Graph3d is vis.Graph3d +

Loading

+ +

+ The class name of the Graph3d is vis.Graph3d +

var graph = new vis.Graph3d(container);
-After being loaded, the graph can be drawn via the function draw(), -provided with data and options. +

+ After being loaded, the graph can be drawn via the function draw(), + provided with data and options. +

graph.draw(data, options);
-where data is a vis DataSet, and options is a name-value map in the JSON format. +

+ where data is a vis DataSet, and options is a name-value map in the JSON format. +

Data Format

- Graph3d requires a vis DataSet. JSON objects are added to this DataSet by using the add() function. - These JSON objects have 5 fields, of which 2 are optional. These are described below. + Graph3d requires a vis DataSet. JSON objects are added to this DataSet by using the add() function. + These JSON objects have 5 fields, of which 2 are optional. These are described below.

Definition

- The DataSet JSON objects are defined as: + The DataSet JSON objects are defined as:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeRequiredDescription
xnumberyesLocation on the x-axis.
ynumberyesLocation on the y-axis.
znumberyesLocation on the z-axis.
stylenumbernoThe data value, required for graph styles dot-color and - dot-size. -
filteranytypenoFilter values used for the animation. - This column may have any type, such as a number, string, or Date.
NameTypeRequiredDescription
xnumberyesLocation on the x-axis.
ynumberyesLocation on the y-axis.
znumberyesLocation on the z-axis.
stylenumbernoThe data value, required for graph styles dot-color and + dot-size. +
filteranytypenoFilter values used for the animation. + This column may have any type, such as a number, string, or Date.
@@ -168,8 +183,8 @@ where data is a vis DataSet, and options is a name-value map in the

Configuration Options

- Options can be used to customize the graph. Options are defined as a JSON object. - All options are optional. + Options can be used to customize the graph. Options are defined as a JSON object. + All options are optional. 

@@ -181,394 +196,394 @@ options = {

- The following options are available. + The following options are available.

- - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - - - - - - - - + + + + - - - - + + + + + + + + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + + - - - - + + + +
NameTypeDefaultDescriptionNameTypeDefaultDescription
animationIntervalnumber1000The animation interval in milliseconds. This determines how fast - the animation runs.animationIntervalnumber1000The animation interval in milliseconds. This determines how fast + the animation runs.
animationPreloadbooleanfalseIf false, the animation frames are loaded as soon as they are requested. - if animationPreload is true, the graph will automatically load - all frames in the background, resulting in a smoother animation as soon as - all frames are loaded. The load progress is shown on screen.animationPreloadbooleanfalseIf false, the animation frames are loaded as soon as they are requested. + if animationPreload is true, the graph will automatically load + all frames in the background, resulting in a smoother animation as soon as + all frames are loaded. The load progress is shown on screen.
animationAutoStartbooleanfalseIf true, the animation starts playing automatically after the graph - is created.animationAutoStartbooleanfalseIf true, the animation starts playing automatically after the graph + is created.
backgroundColorstring or Object"white"The background color for the main area of the chart. - Can be either a simple HTML color string, for example: 'red' or '#00cc00', - or an object with the following properties.backgroundColorstring or Object"white"The background color for the main area of the chart. + Can be either a simple HTML color string, for example: 'red' or '#00cc00', + or an object with the following properties.
backgroundColor.strokestring"gray"The color of the chart border, as an HTML color string.backgroundColor.strokestring"gray"The color of the chart border, as an HTML color string.
backgroundColor.strokeWidthnumber1The border width, in pixels.backgroundColor.strokeWidthnumber1The border width, in pixels.
backgroundColor.fillstring"white"The chart fill color, as an HTML color string.backgroundColor.fillstring"white"The chart fill color, as an HTML color string.
cameraPositionObject{"horizontal": 1.0, "vertical": 0.5, "distance": 1.7}Set the initial rotation and position of the camera. - The object cameraPosition contains three parameters: - horizontal, vertical, and distance. - Parameter horizontal is a value in radians and can have any - value (but normally in the range of 0 and 2*Pi). - Parameter vertical is a value in radians between 0 and 0.5*Pi. - Parameter distance is the (normalized) distance from the - camera to the center of the graph, in the range of 0.71 to 5.0. A - larger distance puts the graph further away, making it smaller. - All parameters are optional. + cameraPositionObject{"horizontal": 1.0, "vertical": 0.5, "distance": 1.7}Set the initial rotation and position of the camera. + The object cameraPosition contains three parameters: + horizontal, vertical, and distance. + Parameter horizontal is a value in radians and can have any + value (but normally in the range of 0 and 2*Pi). + Parameter vertical is a value in radians between 0 and 0.5*Pi. + Parameter distance is the (normalized) distance from the + camera to the center of the graph, in the range of 0.71 to 5.0. A + larger distance puts the graph further away, making it smaller. + All parameters are optional.
heightstring"400px"The height of the graph in pixels or as a percentage.heightstring"400px"The height of the graph in pixels or as a percentage.
keepAspectRatiobooleantrueIf keepAspectRatio is true, the x-axis and the y-axis - keep their aspect ratio. If false, the axes are scaled such that they - both have the same, maximum with.keepAspectRatiobooleantrueIf keepAspectRatio is true, the x-axis and the y-axis + keep their aspect ratio. If false, the axes are scaled such that they + both have the same, maximum with.
showAnimationControlsbooleantrueIf true, animation controls are created at the bottom of the Graph. - The animation controls consists of buttons previous, start/stop, next, - and a slider showing the current frame. - Only applicable when the provided data contains an animation.showAnimationControlsbooleantrueIf true, animation controls are created at the bottom of the Graph. + The animation controls consists of buttons previous, start/stop, next, + and a slider showing the current frame. + Only applicable when the provided data contains an animation.
showGridbooleantrueIf true, grid lines are draw in the x-y surface (the bottom of the 3d - graph).showGridbooleantrueIf true, grid lines are draw in the x-y surface (the bottom of the 3d + graph).
showPerspectivebooleantrueIf true, the graph is drawn in perspective: points and lines which - are further away are drawn smaller. - Note that the graph currently does not support a gray colored bottom side - when drawn in perspective. - showPerspectivebooleantrueIf true, the graph is drawn in perspective: points and lines which + are further away are drawn smaller. + Note that the graph currently does not support a gray colored bottom side + when drawn in perspective. +
showShadowbooleanfalseShow shadow on the graph.showShadowbooleanfalseShow shadow on the graph.
stylestring"dot"The style of the 3d graph. Available styles: - bar, - bar-color, - bar-size, - dot, - dot-line, - dot-color, - dot-size, - line, - grid, - or surface
tooltipboolean | functionfalseShow a tooltip showing the values of the hovered data point. - The contents of the tooltip can be customized by providing a callback - function as tooltip. In this case the function is called - with an object containing parameters x, - y, and z argument, - and must return a string which may contain HTML. - stylestring"dot"The style of the 3d graph. Available styles: + bar, + bar-color, + bar-size, + dot, + dot-line, + dot-color, + dot-size, + line, + grid, + or surface
valueMaxnumbernoneThe maximum value for the value-axis. Only available in combination - with the styles dot-color and dot-size.tooltipboolean | functionfalseShow a tooltip showing the values of the hovered data point. + The contents of the tooltip can be customized by providing a callback + function as tooltip. In this case the function is called + with an object containing parameters x, + y, and z argument, + and must return a string which may contain HTML. +
valueMaxnumbernoneThe maximum value for the value-axis. Only available in combination + with the styles dot-color and dot-size.
valueMinnumbernoneThe minimum value for the value-axis. Only available in combination - with the styles dot-color and dot-size.valueMinnumbernoneThe minimum value for the value-axis. Only available in combination + with the styles dot-color and dot-size.
verticalRationumber0.5A value between 0.1 and 1.0. This scales the vertical size of the graph - When keepAspectRatio is set to false, and verticalRatio is set to 1.0, - the graph will be a cube.verticalRationumber0.5A value between 0.1 and 1.0. This scales the vertical size of the graph + When keepAspectRatio is set to false, and verticalRatio is set to 1.0, + the graph will be a cube.
widthstring"400px"The width of the graph in pixels or as a percentage.widthstring"400px"The width of the graph in pixels or as a percentage.
xBarWidthnumbernoneThe width of bars in x direction. By default, the width is equal to the distance - between the data points, such that bars adjoin each other. - Only applicable for styles "bar" and "bar-color".xBarWidthnumbernoneThe width of bars in x direction. By default, the width is equal to the distance + between the data points, such that bars adjoin each other. + Only applicable for styles "bar" and "bar-color".
xCenterstring"55%"The horizontal center position of the graph, as a percentage or in - pixels.xCenterstring"55%"The horizontal center position of the graph, as a percentage or in + pixels.
xMaxnumbernoneThe maximum value for the x-axis.xMaxnumbernoneThe maximum value for the x-axis.
xMinnumbernoneThe minimum value for the x-axis.xMinnumbernoneThe minimum value for the x-axis.
xStepnumbernoneStep size for the grid on the x-axis.xStepnumbernoneStep size for the grid on the x-axis.
yBarWidthnumbernoneThe width of bars in y direction. By default, the width is equal to the distance - between the data points, such that bars adjoin each other. - Only applicable for styles "bar" and "bar-color".yBarWidthnumbernoneThe width of bars in y direction. By default, the width is equal to the distance + between the data points, such that bars adjoin each other. + Only applicable for styles "bar" and "bar-color".
yCenterstring"45%"The vertical center position of the graph, as a percentage or in - pixels.yCenterstring"45%"The vertical center position of the graph, as a percentage or in + pixels.
yMaxnumbernoneThe maximum value for the y-axis.yMaxnumbernoneThe maximum value for the y-axis.
yMinnumbernoneThe minimum value for the y-axis.yMinnumbernoneThe minimum value for the y-axis.
yStepnumbernoneStep size for the grid on the y-axis.yStepnumbernoneStep size for the grid on the y-axis.
zMinnumbernoneThe minimum value for the z-axis.zMinnumbernoneThe minimum value for the z-axis.
zMaxnumbernoneThe maximum value for the z-axis.zMaxnumbernoneThe maximum value for the z-axis.
zStepnumbernoneStep size for the grid on the z-axis.zStepnumbernoneStep size for the grid on the z-axis.
xLabelStringxLabel on the X axis.xLabelStringxLabel on the X axis.
yLabelStringyLabel on the Y axis.yLabelStringyLabel on the Y axis.
zLabelStringzLabel on the Z axis.zLabelStringzLabel on the Z axis.
filterLabelStringtimeLabel for the filter column.filterLabelStringtimeLabel for the filter column.
legendLabelStringvalueLabel for the style description.legendLabelStringvalueLabel for the style description.

Methods

- Graph3d supports the following methods. + Graph3d supports the following methods.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodReturn TypeDescription
animationStart()noneStart playing the animation. - Only applicable when animation data is available.
animationStop()noneStop playing the animation. - Only applicable when animation data is available.
draw(data, options)noneLoads data, sets the provided options, and draws the 3d graph.
getCameraPosition()An object with parameters horizontal, - vertical and distanceReturns an object with parameters horizontal, - vertical and distance, - which each one of them is a number, representing the rotation and position - of the camera.
redraw()noneRedraw the graph. Useful after the camera position is changed externally, - when data is changed, or when the layout of the webpage changed.
setSize(width, height)noneParameters width and height are strings, - containing a new size for the graph. Size can be provided in pixels - or in percentages.
setCameraPosition (pos){"horizontal": 1.0, "vertical": 0.5, "distance": 1.7}Set the rotation and position of the camera. Parameter pos - is an object which contains three parameters: horizontal, - vertical, and distance. - Parameter horizontal is a value in radians and can have any - value (but normally in the range of 0 and 2*Pi). - Parameter vertical is a value in radians between 0 and 0.5*Pi. - Parameter distance is the (normalized) distance from the - camera to the center of the graph, in the range of 0.71 to 5.0. A - larger distance puts the graph further away, making it smaller. - All parameters are optional. -
MethodReturn TypeDescription
animationStart()noneStart playing the animation. + Only applicable when animation data is available.
animationStop()noneStop playing the animation. + Only applicable when animation data is available.
draw(data, options)noneLoads data, sets the provided options, and draws the 3d graph.
getCameraPosition()An object with parameters horizontal, + vertical and distanceReturns an object with parameters horizontal, + vertical and distance, + which each one of them is a number, representing the rotation and position + of the camera.
redraw()noneRedraw the graph. Useful after the camera position is changed externally, + when data is changed, or when the layout of the webpage changed.
setSize(width, height)noneParameters width and height are strings, + containing a new size for the graph. Size can be provided in pixels + or in percentages.
setCameraPosition (pos){"horizontal": 1.0, "vertical": 0.5, "distance": 1.7}Set the rotation and position of the camera. Parameter pos + is an object which contains three parameters: horizontal, + vertical, and distance. + Parameter horizontal is a value in radians and can have any + value (but normally in the range of 0 and 2*Pi). + Parameter vertical is a value in radians between 0 and 0.5*Pi. + Parameter distance is the (normalized) distance from the + camera to the center of the graph, in the range of 0.71 to 5.0. A + larger distance puts the graph further away, making it smaller. + All parameters are optional. +

Events

- Graph3d fires events after the camera position has been changed. - The event can be catched by creating a listener. - Here an example on how to catch a camerapositionchange event. + Graph3d fires events after the camera position has been changed. + The event can be catched by creating a listener. + Here an example on how to catch a camerapositionchange event. 

@@ -583,40 +598,40 @@ graph3d.on("camerapositionchange",oncamerapositionchange);

- The following events are available. + The following events are available.

- - - - - - - - - - - - - - - + + + + + + + + + + + + + + +
nameDescriptionProperties
camerapositionchangeThe camera position changed. Fired after the user modified the camera position - by moving (dragging) the graph, or by zooming (scrolling), - but not after a call to setCameraPosition method. - The new camera position can be retrieved by calling the method - getCameraPosition. -
    -
  • horizontal: Number. The horizontal angle of the camera.
    • -
  • vertical: Number. The vertical angle of the camera.
    • -
  • distance: Number. The distance of the camera to the center of the graph.
    • -
-
nameDescriptionProperties
camerapositionchangeThe camera position changed. Fired after the user modified the camera position + by moving (dragging) the graph, or by zooming (scrolling), + but not after a call to setCameraPosition method. + The new camera position can be retrieved by calling the method + getCameraPosition. +
    +
  • horizontal: Number. The horizontal angle of the camera.
    • +
  • vertical: Number. The vertical angle of the camera.
    • +
  • distance: Number. The distance of the camera to the center of the graph.
    • +
+

Data Policy

- All code and data are processed and rendered in the browser. No data is sent to any server. + All code and data are processed and rendered in the browser. No data is sent to any server.

diff --git a/docs/index.html b/docs/index.html index 75686de5..48eff665 100644 --- a/docs/index.html +++ b/docs/index.html @@ -49,11 +49,13 @@ Graph. Display a graph or network with nodes and edges. +
  • + Graph3d. + Display data in a three dimensional graph. +
  • Timeline. - Display different types of data on a timeline. The timeline and the - items on the timeline can be interactively moved, zoomed, and - manipulated. + Display different types of data on a timeline.
    • diff --git a/examples/graph3d/example01_basis.html b/examples/graph3d/example01_basis.html index 9b6c0815..7816718c 100644 --- a/examples/graph3d/example01_basis.html +++ b/examples/graph3d/example01_basis.html @@ -20,7 +20,7 @@ // Called when the Visualization API is loaded. function drawVisualization() { // Create and populate a data table. - var data = new vis.DataSet({}); + var data = []; // create some nice looking data with sin/cos var steps = 50; // number of datapoints will be steps*steps var axisMax = 314; @@ -28,9 +28,7 @@ for (var x = 0; x < axisMax; x+=axisStep) { for (var y = 0; y < axisMax; y+=axisStep) { var value = custom(x,y); - data.add([ - {x:x,y:y,z:value,style:value} - ]); + data.push({x:x,y:y,z:value,style:value}); } } diff --git a/examples/graph3d/index.html b/examples/graph3d/index.html index 0b89644a..b4edf86b 100644 --- a/examples/graph3d/index.html +++ b/examples/graph3d/index.html @@ -19,6 +19,9 @@

    example10_styles.html

    example11_tooltips.html

    +

    Playground

    +

    Open the playground

    + diff --git a/examples/graph3d/playground/playground.css b/examples/graph3d/playground/playground.css index c18ba24a..82c04093 100644 --- a/examples/graph3d/playground/playground.css +++ b/examples/graph3d/playground/playground.css @@ -14,9 +14,9 @@ h1 h2 { font-size: 140%; - color: white; - background-color: #7F8FB1; padding: 5px; + border-bottom: 1px solid #a0c0f0; + color: #2B7CE9; } h3 @@ -27,7 +27,7 @@ h3 hr { border: none 0; - border-top: 1px solid #7F8FB1; + border-top: 1px solid #a0c0f0; height: 1px; } diff --git a/examples/index.html b/examples/index.html index cbac149d..cd8638ad 100644 --- a/examples/index.html +++ b/examples/index.html @@ -13,6 +13,7 @@

    vis.js examples

    graph

    +

    graph3d

    timeline