jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Updated examples a little

css_transitions
jos 10 years ago
parent
5977b5bf8a
commit
e6cd80ad6f
19 changed files with 1144 additions and 1143 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      HISTORY.md
  2. +1
    -1
      Jakefile.js
  3. +59
    -56
      docs/graph3d.html
  4. +43
    -43
      examples/graph3d/default.css
  5. +49
    -49
      examples/graph3d/example01_basis.html
  6. +84
    -85
      examples/graph3d/example02_camera.html
  7. +46
    -48
      examples/graph3d/example03_filter.html
  8. +53
    -53
      examples/graph3d/example04_animate.html
  9. +50
    -50
      examples/graph3d/example05_line.html
  10. +58
    -58
      examples/graph3d/example06_moving_dots.html
  11. +47
    -47
      examples/graph3d/example07_dot_cloud_colors.html
  12. +48
    -48
      examples/graph3d/example08_dot_cloud_size.html
  13. +60
    -60
      examples/graph3d/example09_mobile.html
  14. +96
    -96
      examples/graph3d/example10_styles.html
  15. +83
    -83
      examples/graph3d/example11_tooltips.html
  16. +13
    -13
      examples/graph3d/index.html
  17. +1
    -0
      examples/graph3d/playground/index.html
  18. +20
    -20
      examples/graph3d/playground/playground.css
  19. +331
    -331
      examples/graph3d/playground/playground.js

+ 2
- 2
HISTORY.md View File

@ -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

+ 1
- 1
Jakefile.js View File

@ -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'
],

+ 59
- 56
docs/graph3d.html View File

@ -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>

+ 43
- 43
examples/graph3d/default.css View File

@ -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;
}

+ 49
- 49
examples/graph3d/example01_basis.html View File

@ -1,56 +1,56 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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);
}
// 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});
}
}
// 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);
<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});
}
</script>
}
// 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);
}
</script>
</head>
<body onload="drawVisualization();">

+ 84
- 85
examples/graph3d/example02_camera.html View File

@ -1,107 +1,106 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D camera position</title>
<title>Graph 3D camera position</title>
<style>
body {font: 10pt arial;}
td {font: 10pt arial}
</style>
<style>
body {font: 10pt arial;}
td {font: 10pt arial}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
<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);
}
// callback function, called when the camera position has changed
function oncamerapositionchange() {
// adjust the values of startDate and endDate
var pos = graph.getCameraPosition();
document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
document.getElementById('vertical').value = parseFloat(pos.vertical.toFixed(3));
document.getElementById('distance').value = parseFloat(pos.distance.toFixed(3));
}
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// set the camera position
function setcameraposition() {
var horizontal = parseFloat(document.getElementById('horizontal').value);
var vertical = parseFloat(document.getElementById('vertical').value);
var distance = parseFloat(document.getElementById('distance').value);
var pos = {
"horizontal": horizontal,
"vertical":vertical,
"distance":distance};
graph.setCameraPosition(pos);
// callback function, called when the camera position has changed
function oncamerapositionchange() {
// adjust the values of startDate and endDate
var pos = graph.getCameraPosition();
document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
document.getElementById('vertical').value = parseFloat(pos.vertical.toFixed(3));
document.getElementById('distance').value = parseFloat(pos.distance.toFixed(3));
}
// retrieve the camera position again, to get the applied values
oncamerapositionchange();
}
// set the camera position
function setcameraposition() {
var horizontal = parseFloat(document.getElementById('horizontal').value);
var vertical = parseFloat(document.getElementById('vertical').value);
var distance = parseFloat(document.getElementById('distance').value);
var pos = {
"horizontal": horizontal,
"vertical":vertical,
"distance":distance};
graph.setCameraPosition(pos);
// 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,t:0,style:value}
]);
}
}
// retrieve the camera position again, to get the applied values
oncamerapositionchange();
}
// 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,t:0,style:value}
]);
}
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// 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'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
graph.on("camerapositionchange", oncamerapositionchange);
//graph.redraw();
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
graph.on("camerapositionchange", oncamerapositionchange);
//graph.redraw();
}
</script>
</head>
<body onload="drawVisualization()">
<h1>Graph 3d camera position</h1>
<table>
<tr>
<td>Horizontal angle (0 to 2*pi)</td>
<td><input type="text" id="horizontal" value="1.0"></td>
</tr>
<tr>
<td>Vertical angle (0 to 0.5*pi)</td>
<td><input type="text" id="vertical" value="0.5"></td>
</tr>
<tr>
<td>Distance (0.71 to 5.0)</td>
<td><input type="text" id="distance" value="1.7"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Set" onclick="setcameraposition();"></td>
</tr>
<tr>
<td>Horizontal angle (0 to 2*pi)</td>
<td><input type="text" id="horizontal" value="1.0"></td>
</tr>
<tr>
<td>Vertical angle (0 to 0.5*pi)</td>
<td><input type="text" id="vertical" value="0.5"></td>
</tr>
<tr>
<td>Distance (0.71 to 5.0)</td>
<td><input type="text" id="distance" value="1.7"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Set" onclick="setcameraposition();"></td>
</tr>
</table>
<div id="mygraph"></div>

+ 46
- 48
examples/graph3d/example03_filter.html View File

@ -1,62 +1,60 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D demo</title>
<title>Graph 3D demo</title>
<style>
body {font: 10pt arial;}
</style>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
<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;
}
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 = 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);
var valueRange = (value > 67) ? "67-100" :
(value < 33) ? "0-33" :
"33-67";
data.add([
{x:x,y:y,z:value,filter:valueRange,style:value}
]);
}
}
// 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);
var valueRange = (value > 67) ? "67-100" :
(value < 33) ? "0-33" :
"33-67";
data.push({x:x,y:y,z:value,filter:valueRange,style:value});
}
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: false,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
filterLabel: "values"
};
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: false,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
filterLabel: "values"
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head>
<body onload="drawVisualization()">

+ 53
- 53
examples/graph3d/example04_animate.html View File

@ -1,68 +1,68 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D animation demo</title>
<title>Graph 3D animation demo</title>
<style type="text/css">
body {
font: 10pt arial;
}
</style>
<style type="text/css">
body {
font: 10pt arial;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y, t) {
return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
}
function custom(x, y, t) {
return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet({});
// create some nice looking data with sin/cos
var steps = 25;
var axisMax = 314;
var tMax = 31;
var axisStep = axisMax / steps;
for (var t = 0; t < tMax; t++) {
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x, y, t);
data.add([
{x:x,y:y,z:value,filter:t,style:value}
]);
}
}
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 25;
var axisMax = 314;
var tMax = 31;
var axisStep = axisMax / steps;
for (var t = 0; t < tMax; t++) {
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x, y, t);
data.add([
{x:x,y:y,z:value,filter:t,style:value}
]);
}
}
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
// showAnimationControls: false,
keepAspectRatio: true,
verticalRatio: 0.5,
animationInterval: 100, // milliseconds
animationPreload: true,
filterValue: "time"
};
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
// showAnimationControls: false,
keepAspectRatio: true,
verticalRatio: 0.5,
animationInterval: 100, // milliseconds
animationPreload: true,
filterValue: "time"
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head>
<body onload="drawVisualization();">

+ 50
- 50
examples/graph3d/example05_line.html View File

@ -1,56 +1,56 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D line 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;
// 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 = 500;
var axisMax = 314;
var tmax = 4 * 2 * Math.PI;
var axisStep = axisMax / steps;
for (var t = 0; t < tmax; t += tmax / steps) {
var r = 1;
var x = r * Math.sin(t);
var y = r * Math.cos(t);
var z = t / tmax;
data.add({x:x,y:y,z:z});
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "line",
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
graph.setCameraPosition(0.4, undefined, undefined);
}
</script>
<title>Graph 3D line 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;
// 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 = 500;
var axisMax = 314;
var tmax = 4 * 2 * Math.PI;
var axisStep = axisMax / steps;
for (var t = 0; t < tmax; t += tmax / steps) {
var r = 1;
var x = r * Math.sin(t);
var y = r * Math.cos(t);
var z = t / tmax;
data.add({x:x,y:y,z:z});
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "line",
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
graph.setCameraPosition(0.4, undefined, undefined);
}
</script>
</head>
<body onload="drawVisualization()">

+ 58
- 58
examples/graph3d/example06_moving_dots.html View File

@ -1,75 +1,75 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D animation moving dots</title>
<title>Graph 3D animation moving dots</title>
<style>
body {font: 10pt arial;}
</style>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
var data = new vis.DataSet({});
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
var data = new vis.DataSet();
// create some shortcuts to math functions
var sin = Math.sin;
var cos = Math.cos;
var pi = Math.PI;
// create some shortcuts to math functions
var sin = Math.sin;
var cos = Math.cos;
var pi = Math.PI;
// create the animation data
var tmax = 2.0 * pi;
var tstep = tmax / 75;
var dotCount = 1; // set this to 1, 2, 3, 4, ...
for (var t = 0; t < tmax; t += tstep) {
var tgroup = parseFloat(t.toFixed(2));
var value = t;
// create the animation data
var tmax = 2.0 * pi;
var tstep = tmax / 75;
var dotCount = 1; // set this to 1, 2, 3, 4, ...
for (var t = 0; t < tmax; t += tstep) {
var tgroup = parseFloat(t.toFixed(2));
var value = t;
// a dot in the center
data.add( {x:0,y:0,z:0,filter:tgroup,style:value});
// a dot in the center
data.add( {x:0,y:0,z:0,filter:tgroup,style:value});
// one or multiple dots moving around the center
for (var dot = 0; dot < dotCount; dot++) {
var tdot = t + 2*pi * dot / dotCount;
data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
}
}
// one or multiple dots moving around the center
for (var dot = 0; dot < dotCount; dot++) {
var tdot = t + 2*pi * dot / dotCount;
data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
}
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "dot-color",
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
animationInterval: 35, // milliseconds
animationPreload: false,
animationAutoStart: true,
legendLabel: "color value",
cameraPosition:
{
horizontal: 2.7,
vertical: 0.0,
distance: 1.65
}
};
// specify options
var options = {
width: "600px",
height: "600px",
style: "dot-color",
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
animationInterval: 35, // milliseconds
animationPreload: false,
animationAutoStart: true,
legendLabel: "color value",
cameraPosition:
{
horizontal: 2.7,
vertical: 0.0,
distance: 1.65
}
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head>
<body onload="drawVisualization();">

+ 47
- 47
examples/graph3d/example07_dot_cloud_colors.html View File

@ -1,63 +1,63 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D cloud with colored dots</title>
<title>Graph 3D cloud with colored dots</title>
<style>
body {font: 10pt arial;}
</style>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
var data = new vis.DataSet({});
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
var data = new vis.DataSet();
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 100;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
// create the animation data
var imax = 100;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
data.add({x:x,y:y,z:z,style:dist});
}
data.add({x:x,y:y,z:z,style:dist});
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "dot-color",
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
legendLabel: "distance",
cameraPosition: {
horizontal: -0.35,
vertical: 0.22,
distance: 1.8
}
};
// specify options
var options = {
width: "600px",
height: "600px",
style: "dot-color",
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
legendLabel: "distance",
cameraPosition: {
horizontal: -0.35,
vertical: 0.22,
distance: 1.8
}
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head>
<body onload="drawVisualization()">

+ 48
- 48
examples/graph3d/example08_dot_cloud_size.html View File

@ -1,64 +1,64 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D cloud with sized dots</title>
<title>Graph 3D cloud with sized dots</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<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;
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
var data = new vis.DataSet({});
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
var data = new vis.DataSet();
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 100;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
// create the animation data
var imax = 100;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
var range = sqrt(2) - dist;
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
var range = sqrt(2) - dist;
data.add({x:x,y:y,z:z,style:range});
}
data.add({x:x,y:y,z:z,style:range});
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "dot-size",
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
legendLabel:"value",
verticalRatio: 1.0,
cameraPosition: {
horizontal: -0.54,
vertical: 0.5,
distance: 1.6
}
};
// specify options
var options = {
width: "600px",
height: "600px",
style: "dot-size",
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
legendLabel:"value",
verticalRatio: 1.0,
cameraPosition: {
horizontal: -0.54,
vertical: 0.5,
distance: 1.6
}
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head>
<body onload="drawVisualization()">

+ 60
- 60
examples/graph3d/example09_mobile.html View File

@ -1,77 +1,77 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D demo</title>
<title>Graph 3D demo</title>
<style>
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
<style>
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#mygraph {
position: absolute;
width: 100%;
height: 100%;
}
</style>
#mygraph {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<!-- for mobile devices like android and iphone -->
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
<!-- for mobile devices like android and iphone -->
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
<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);
}
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 = new vis.DataSet({});
// 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 = 10; // 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}
]);
}
}
// create some nice looking data with sin/cos
var steps = 10; // 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}
]);
}
}
// specify options
var options = {
width: "100%",
height: "100%",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
backgroundColor: {
strokeWidth: 0
}
};
// specify options
var options = {
width: "100%",
height: "100%",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
backgroundColor: {
strokeWidth: 0
}
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head>
<body onresize="graph.redraw();" onload="drawVisualization()">

+ 96
- 96
examples/graph3d/example10_styles.html View File

@ -1,118 +1,118 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D styles</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/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById("style").value;
var showPerspective = document.getElementById("perspective").checked;
var xBarWidth = parseFloat(document.getElementById("xBarWidth").value) || undefined;
var yBarWidth = parseFloat(document.getElementById("yBarWidth").value) || undefined;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
var data = new vis.DataSet({});
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
}
else {
data.add({x:x, y:y, z: z});
}
}
}
// 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;
<title>Graph 3D styles</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/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById("style").value;
var showPerspective = document.getElementById("perspective").checked;
var xBarWidth = parseFloat(document.getElementById("xBarWidth").value) || undefined;
var yBarWidth = parseFloat(document.getElementById("yBarWidth").value) || undefined;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
var data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
}
else {
data.add({x:x, y:y, z: z});
}
}
</script>
}
// 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;
}
</script>
</head>
<body onload="drawVisualization()">
<p>
<label for="style"> Style:
<label for="style"> Style:
<select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
</select>
</label>
</label>
</p>
<p>
<label for="perspective">
<input type="checkbox" id="perspective" checked> Show perspective
</label>
<label for="perspective">
<input type="checkbox" id="perspective" checked> Show perspective
</label>
</p>
<p>
<label for="xBarWidth"> Bar width X:
<input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
<label for="xBarWidth"> Bar width X:
<input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
</p>
<p>
<label for="yBarWidth"> Bar width Y:
<input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
<label for="yBarWidth"> Bar width Y:
<input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
</p>
<div id="mygraph"></div>

+ 83
- 83
examples/graph3d/example11_tooltips.html View File

@ -1,101 +1,101 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Graph 3D tooltips</title>
<title>Graph 3D tooltips</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/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById("style").value;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
var data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
}
else {
data.add({x:x, y:y, z: z});
}
}
}
<style>
body {font: 10pt arial;}
</style>
// specify options
var options = {
width: "600px",
height: "600px",
style: style,
showPerspective: true,
showGrid: true,
showShadow: false,
<script type="text/javascript" src="../../dist/vis.js"></script>
// 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: <b>' + point.z + '</b>';
},
<script type="text/javascript">
var data = null;
var graph = null;
keepAspectRatio: true,
verticalRatio: 0.5
};
function custom(x, y) {
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
var camera = graph ? graph.getCameraPosition() : null;
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById("style").value;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
var data = new vis.DataSet({});
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
}
else {
data.add({x:x, y:y, z: z});
}
}
}
// specify options
var options = {
width: "600px",
height: "600px",
style: style,
showPerspective: true,
showGrid: true,
showShadow: false,
// 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: <b>' + point.z + '</b>';
},
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;
}
</script>
// 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;
}
</script>
</head>
<body onload="drawVisualization()">
<p>
<label for="style"> Style:
<label for="style"> Style:
<select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot"