diff --git a/HISTORY.md b/HISTORY.md
index 2a7859ef..4cf60751 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -2,7 +2,7 @@
http://visjs.org
-## not yet released, version 1.0.3
+## not yet released, version 1.1.0
### Timeline
@@ -18,7 +18,7 @@ http://visjs.org
### Graph3D
-- Ported Graph3D from Chap Links.
+- Ported Graph3D from Chap Links Library.
## 2014-05-28, version 1.0.2
diff --git a/Jakefile.js b/Jakefile.js
index 66611f04..376f2a3d 100644
--- a/Jakefile.js
+++ b/Jakefile.js
@@ -98,7 +98,7 @@ task('build', {async: true}, function () {
'./src/graph/graphMixins/MixinLoader.js',
'./src/graph/Graph.js',
- './src/graph3d/graph3d.js',
+ './src/graph3d/Graph3d.js',
'./src/module/exports.js'
],
diff --git a/docs/graph3d.html b/docs/graph3d.html
index d5b3cacf..ddd3fc00 100644
--- a/docs/graph3d.html
+++ b/docs/graph3d.html
@@ -43,67 +43,70 @@
<!DOCTYPE HTML>
<html>
<head>
- <title>Graph 3D demo</title>
-
- <style>
- body {font: 10pt arial;}
- </style>
-
- <script type="text/javascript" src="../../dist/vis.js"></script>
-
- <script type="text/javascript">
- var data = null;
- var graph = null;
-
- function custom(x, y) {
- return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
+ <title>Graph 3D demo</title>
+
+ <style>
+ body {font: 10pt arial;}
+ </style>
+
+ <script type="text/javascript" src="../../dist/vis.js"></script>
+
+ <script type="text/javascript">
+ var data = null;
+ var graph = null;
+
+ function custom(x, y) {
+ return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
+ }
+
+ // Called when the Visualization API is loaded.
+ function drawVisualization() {
+ // Create and populate a data table.
+ var data = [];
+ // create some nice looking data with sin/cos
+ var steps = 50; // number of datapoints will be steps*steps
+ var axisMax = 314;
+ var axisStep = axisMax / steps;
+ for (var x = 0; x < axisMax; x+=axisStep) {
+ for (var y = 0; y < axisMax; y+=axisStep) {
+ var value = custom(x, y);
+ data.push({
+ x: x,
+ y: y,
+ z: value,
+ style: value
+ });
+ }
}
- // Called when the Visualization API is loaded.
- function drawVisualization() {
- // Create and populate a data table.
- var data = new vis.DataSet({});
- // create some nice looking data with sin/cos
- var steps = 50; // number of datapoints will be steps*steps
- var axisMax = 314;
- var axisStep = axisMax / steps;
- 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}
- ]);
- }
- }
-
- // specify options
- var options = {
- width: "600px",
- height: "600px",
- style: "surface",
- showPerspective: true,
- showGrid: true,
- showShadow: false,
- keepAspectRatio: true,
- verticalRatio: 0.5
- };
-
- // Instantiate our graph object.
- graph3d = new vis.Graph3d(document.getElementById('mygraph'));
-
- // Draw our graph with the created data and options
- graph3d.draw(data, options);
-
- // subscribe to event
- graph3d.on("camerapositionchange", function(event) {console.log(event);});
- }
- </script>
- </head>
+ // specify options
+ var options = {
+ width: "600px",
+ height: "600px",
+ style: "surface",
+ showPerspective: true,
+ showGrid: true,
+ showShadow: false,
+ keepAspectRatio: true,
+ verticalRatio: 0.5
+ };
+
+ // Instantiate our graph object.
+ graph3d = new vis.Graph3d(document.getElementById('mygraph'));
+
+ // Draw our graph with the created data and options
+ graph3d.draw(data, options);
+
+ // subscribe to event
+ graph3d.on("camerapositionchange", function(event) {console.log(event);});
+ }
+ </script>
+ </head>
<body onload="drawVisualization();">
-<div id="mygraph"></div>
+ <div id="mygraph"></div>
- <div id="info"></div>
+ <div id="info"></div>
</body>
</html>
diff --git a/examples/graph3d/default.css b/examples/graph3d/default.css
index f0c251df..f7afb828 100644
--- a/examples/graph3d/default.css
+++ b/examples/graph3d/default.css
@@ -1,87 +1,87 @@
html, body {
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
+ 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;
+ font-family: arial, sans-serif;
+ font-size: 11pt;
+ color: #4D4D4D;
+ line-height: 1.7em;
}
#container {
- margin: 0 auto;
- padding-bottom: 50px;
- width: 900px;
+ margin: 0 auto;
+ padding-bottom: 50px;
+ width: 900px;
}
h1 {
- font-size: 180%;
- font-weight: bold;
- padding: 0;
- margin: 1em 0 1em 0;
+ 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;
+ padding-top: 20px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #a0c0f0;
+ color: #2B7CE9;
}
h3 {
- font-size: 140%;
+ font-size: 140%;
}
a {
- color: #2B7CE9;
- text-decoration: none;
+ color: #2B7CE9;
+ text-decoration: none;
}
a:visited {
- color: #2E60A4;
+ color: #2E60A4;
}
a:hover {
- color: red;
- text-decoration: underline;
+ color: red;
+ text-decoration: underline;
}
hr {
- border: none 0;
- border-top: 1px solid #abc;
- height: 1px;
+ border: none 0;
+ border-top: 1px solid #abc;
+ height: 1px;
}
pre {
- display: block;
- font-size: 10pt;
- line-height: 1.5em;
- font-family: monospace;
+ display: block;
+ font-size: 10pt;
+ line-height: 1.5em;
+ font-family: monospace;
}
pre, code {
- background-color: #f5f5f5;
+ background-color: #f5f5f5;
}
table
{
- border-collapse: collapse;
+ border-collapse: collapse;
}
th {
- font-weight: bold;
- border: 1px solid lightgray;
- background-color: #E5E5E5;
- text-align: left;
- vertical-align: top;
- padding: 5px;
+ 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;
+ border: 1px solid lightgray;
+ padding: 5px;
+ vertical-align: top;
}
diff --git a/examples/graph3d/example01_basis.html b/examples/graph3d/example01_basis.html
index 7816718c..d3c18e57 100644
--- a/examples/graph3d/example01_basis.html
+++ b/examples/graph3d/example01_basis.html
@@ -1,56 +1,56 @@
- Graph 3D demo
-
-
-
-
-
-
+
+
+ }
+
+ // specify options
+ var options = {
+ width: "600px",
+ height: "600px",
+ style: "surface",
+ showPerspective: true,
+ showGrid: true,
+ showShadow: false,
+ keepAspectRatio: true,
+ verticalRatio: 0.5
+ };
+
+ // Instantiate our graph object.
+ graph = new vis.Graph3d(document.getElementById('mygraph'));
+
+ // Draw our graph with the created data and options
+ graph.draw(data, options);
+ }
+
diff --git a/examples/graph3d/example02_camera.html b/examples/graph3d/example02_camera.html
index 2cfe0fa0..771e4f49 100644
--- a/examples/graph3d/example02_camera.html
+++ b/examples/graph3d/example02_camera.html
@@ -1,107 +1,106 @@
- Graph 3D camera position
+ Graph 3D camera position
-
+
-
+
-
+ // Draw our graph with the created data and options
+ graph.draw(data, options);
+ graph.on("camerapositionchange", oncamerapositionchange);
+ //graph.redraw();
+ }
+
Graph 3d camera position
-
-
Horizontal angle (0 to 2*pi)
-
-
-
-
Vertical angle (0 to 0.5*pi)
-
-
-
-
Distance (0.71 to 5.0)
-
-
-
-
-
-
+
+
Horizontal angle (0 to 2*pi)
+
+
+
+
Vertical angle (0 to 0.5*pi)
+
+
+
+
Distance (0.71 to 5.0)
+
+
+
+
+
+
diff --git a/examples/graph3d/example03_filter.html b/examples/graph3d/example03_filter.html
index 2074a49e..cd7819cc 100644
--- a/examples/graph3d/example03_filter.html
+++ b/examples/graph3d/example03_filter.html
@@ -1,62 +1,60 @@
- Graph 3D demo
+ Graph 3D demo
-
+
-
+
-
+ // Draw our graph with the created data and options
+ graph.draw(data, options);
+ }
+
diff --git a/examples/graph3d/example04_animate.html b/examples/graph3d/example04_animate.html
index 5876a2f6..19cbef7a 100644
--- a/examples/graph3d/example04_animate.html
+++ b/examples/graph3d/example04_animate.html
@@ -1,68 +1,68 @@
- Graph 3D animation demo
+ Graph 3D animation demo
-
+
-
+
-
+ // Draw our graph with the created data and options
+ graph.draw(data, options);
+ }
+
diff --git a/examples/graph3d/example05_line.html b/examples/graph3d/example05_line.html
index 86432f76..74d0313f 100644
--- a/examples/graph3d/example05_line.html
+++ b/examples/graph3d/example05_line.html
@@ -1,56 +1,56 @@
- Graph 3D line demo
-
-
-
-
-
-
+ Graph 3D line demo
+
+
+
+
+
+
diff --git a/examples/graph3d/example06_moving_dots.html b/examples/graph3d/example06_moving_dots.html
index 29762157..c21e86f9 100644
--- a/examples/graph3d/example06_moving_dots.html
+++ b/examples/graph3d/example06_moving_dots.html
@@ -1,75 +1,75 @@
- Graph 3D animation moving dots
+ Graph 3D animation moving dots
-
+
-
+
-
+ // Draw our graph with the created data and options
+ graph.draw(data, options);
+ }
+
diff --git a/examples/graph3d/example07_dot_cloud_colors.html b/examples/graph3d/example07_dot_cloud_colors.html
index 23dfa042..c89949ec 100644
--- a/examples/graph3d/example07_dot_cloud_colors.html
+++ b/examples/graph3d/example07_dot_cloud_colors.html
@@ -1,63 +1,63 @@
- Graph 3D cloud with colored dots
+ Graph 3D cloud with colored dots
-
+
-
+
-
+ // Draw our graph with the created data and options
+ graph.draw(data, options);
+ }
+
diff --git a/examples/graph3d/example08_dot_cloud_size.html b/examples/graph3d/example08_dot_cloud_size.html
index 2be3830f..49615760 100644
--- a/examples/graph3d/example08_dot_cloud_size.html
+++ b/examples/graph3d/example08_dot_cloud_size.html
@@ -1,64 +1,64 @@
- Graph 3D cloud with sized dots
+ Graph 3D cloud with sized dots
-
-
+
+
-
+ // Draw our graph with the created data and options
+ graph.draw(data, options);
+ }
+
diff --git a/examples/graph3d/example09_mobile.html b/examples/graph3d/example09_mobile.html
index 0ca57902..0901584a 100644
--- a/examples/graph3d/example09_mobile.html
+++ b/examples/graph3d/example09_mobile.html
@@ -1,77 +1,77 @@
- Graph 3D demo
+ Graph 3D demo
-
+ #mygraph {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ }
+
-
-
+
+
-
+
-
+ // Draw our graph with the created data and options
+ graph.draw(data, options);
+ }
+
diff --git a/examples/graph3d/example10_styles.html b/examples/graph3d/example10_styles.html
index 27356a98..2d1886b3 100644
--- a/examples/graph3d/example10_styles.html
+++ b/examples/graph3d/example10_styles.html
@@ -1,118 +1,118 @@
- Graph 3D styles
-
-
-
-
-
-
+
+
+ }
+
+ // specify options
+ var options = {
+ width: "600px",
+ height: "600px",
+ style: style,
+ xBarWidth: xBarWidth,
+ yBarWidth: yBarWidth,
+ showPerspective: showPerspective,
+ showGrid: true,
+ showShadow: false,
+ keepAspectRatio: true,
+ verticalRatio: 0.5
+ };
+
+ var camera = graph ? graph.getCameraPosition() : null;
+
+ // Instantiate our graph object.
+ graph = new vis.Graph3d(document.getElementById('mygraph'));
+
+ // Draw our graph with the created data and options
+ graph.draw(data, options);
+
+ if (camera) graph.setCameraPosition(camera); // restore camera position
+
+ document.getElementById("style").onchange = drawVisualization;
+ document.getElementById("perspective").onchange = drawVisualization;
+ document.getElementById("xBarWidth").onchange = drawVisualization;
+ document.getElementById("yBarWidth").onchange = drawVisualization;
+ }
+
-
-
- Show perspective
-
+
+ Show perspective
+
- Bar width X:
- (only applicable for styles "bar" and "bar-color")
-
+ Bar width X:
+ (only applicable for styles "bar" and "bar-color")
+
- Bar width Y:
- (only applicable for styles "bar" and "bar-color")
-
+ Bar width Y:
+ (only applicable for styles "bar" and "bar-color")
+
diff --git a/examples/graph3d/example11_tooltips.html b/examples/graph3d/example11_tooltips.html
index d212c77c..05bbd0ec 100644
--- a/examples/graph3d/example11_tooltips.html
+++ b/examples/graph3d/example11_tooltips.html
@@ -1,101 +1,101 @@
- Graph 3D tooltips
+ Graph 3D tooltips
+
+
+
+
+
+
+ // Option tooltip can be true, false, or a function returning a string with HTML contents
+ //tooltip: true,
+ tooltip: function (point) {
+ // parameter point contains properties x, y, z
+ return 'value: ' + point.z + '';
+ },
-
+ // Instantiate our graph object.
+ graph = new vis.Graph3d(document.getElementById('mygraph'));
+
+ // Draw our graph with the created data and options
+ graph.draw(data, options);
+
+ if (camera) graph.setCameraPosition(camera); // restore camera position
+
+ document.getElementById("style").onchange = drawVisualization;
+ }
+