UNPKG

vis-graph3d/examples/index.html

Version:
1<html>
<head>
  <meta charset="utf-8" />
  <title>Vis Graph3D Examples</title>
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
8
  <style>
    body {
      margin: 50px auto 200px;
      min-width: calc(200px + 2em);
      width: calc(100vw - 200px);
    }
15
    a {
      color: #2b7ce9;
    }
    a:visited {
      color: #46417a;
    }
22
    .example-link {
      position: relative;
      margin: 1em;
      width: 200px;
27
      display: inline-block;
      text-align: center;
    }
31
    .example-link .example-image {
      position: relative;
      margin-top: 1ex;
      width: 200px;
      height: 200px;
    }
    .example-link .example-image > img {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 200px;
      height: 200px;
44
      border: 1px solid #2b7ce9;
46
      transition: transform 0.5s ease 0s, z-index 0.5s linear 0s;
      z-index: 1;
    }
    .example-link:hover .example-image > img {
      transform: translate(0px, 95px) scale(2, 2);
      z-index: 100;
    }
54
    .playgrounds {
      margin-left: 1em;
      white-space: nowrap;
    }
    .playgrounds form {
      display: inline-block;
      margin: 0px;
    }
    .icon {
      width: 2em;
      height: 2em;
66
      background: none;
      border: none;
      cursor: pointer;
    }
    .icon.jsfiddle {
      background-size: contain;
      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%232b7ce9' d='M16.45,17.5C17.45,17.5 18.3,17.15 19,16.5C19.67,15.8 20,15 20,14C20,13.05 19.66,12.22 18.96,11.53C18.26,10.84 17.41,10.5 16.41,10.5C15.47,10.5 14.64,10.83 13.92,11.5L9.14,15.56C8.7,16 8.17,16.22 7.55,16.22C6.92,16.22 6.39,16 5.95,15.56C5.5,15.13 5.3,14.61 5.3,14C5.3,13.42 5.5,12.91 5.95,12.47C6.39,12.03 6.92,11.81 7.55,11.81C8.14,11.81 8.69,12.03 9.19,12.47L9.94,13.13L10.92,12.23L10.08,11.53C9.39,10.84 8.55,10.5 7.55,10.5C6.58,10.5 5.74,10.84 5.04,11.53C4.34,12.22 4,13.05 4,14C4,15 4.34,15.8 5.04,16.5C5.74,17.15 6.59,17.5 7.59,17.5C8.53,17.5 9.36,17.16 10.08,16.5L14.86,12.42C15.27,12 15.8,11.81 16.45,11.81C17.08,11.81 17.61,12.03 18.05,12.47C18.5,12.91 18.7,13.42 18.7,14C18.7,14.61 18.5,15.13 18.05,15.56C17.61,16 17.08,16.22 16.45,16.22C15.89,16.22 15.34,16 14.81,15.5L14.06,14.86L13.08,15.75L13.92,16.45C14.61,17.14 15.45,17.5 16.45,17.5M19.36,10.03C20.64,10.13 21.73,10.65 22.64,11.6C23.55,12.55 24,13.69 24,15C24,16.38 23.5,17.55 22.5,18.54C21.54,19.5 20.36,20 19,20H6C4.34,20 2.93,19.43 1.76,18.26C0.59,17.09 0,15.67 0,14C0,12.55 0.5,11.23 1.57,10.05C2.62,8.88 3.88,8.22 5.34,8.06C6,6.84 6.92,5.86 8.11,5.11C9.3,4.36 10.59,4 12,4C13.69,4 15.26,4.58 16.71,5.77C18.16,6.95 19.05,8.38 19.36,10.03Z' /%3E%3C/svg%3E");
    }
    .icon.codepen {
      background-size: contain;
      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%232b7ce9' d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z' /%3E%3C/svg%3E");
    }
  </style>
</head>
<body>
  <div>
    <div>
      <h1>Graph 3D</h1>
      <div>
        <span class="example-link"
          ><div>
            <a href="graph3d/04_animation.html">Animation</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
101var graph = null;
102
103function custom(x, y, t) {
return Math.sin(x / 50 + t / 10) * Math.cos(y / 50 + t / 10) * 50 + 50;
105}
106
107// Called when the Visualization API is loaded.
108function 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 &lt; tMax; t++) {
  for (var x = 0; x &lt; axisMax; x += axisStep) {
    for (var y = 0; y &lt; axisMax; y += axisStep) {
      var value = custom(x, y, t);
      data.add([{ x: x, y: y, z: value, filter: t, style: value }]);
    }
  }
}
124
// 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
};
139
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
143}
144
145window.addEventListener("load", () =&gt; {
drawVisualization();
147});
148'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
154}
155"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
160
161&lt;div id="info"&gt;&lt;/div&gt;
162'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Animation"
                />
              </form>
173
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\nfunction custom(x, y, t) {\n  return Math.sin(x / 50 + t / 10) * Math.cos(y / 50 + t / 10) * 50 + 50;\n}\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  // Create and populate a data table.\n  data = new vis.DataSet();\n  // create some nice looking data with sin/cos\n  var steps = 25;\n  var axisMax = 314;\n  var tMax = 31;\n  var axisStep = axisMax / steps;\n  for (var t = 0; t &lt; tMax; t++) {\n    for (var x = 0; x &lt; axisMax; x += axisStep) {\n      for (var y = 0; y &lt; axisMax; y += axisStep) {\n        var value = custom(x, y, t);\n        data.add([{ x: x, y: y, z: value, filter: t, style: value }]);\n      }\n    }\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: \"surface\",\n    showPerspective: true,\n    showGrid: true,\n    showShadow: false,\n    // showAnimationControls: false,\n    keepAspectRatio: true,\n    verticalRatio: 0.5,\n    animationInterval: 100, // milliseconds\n    animationPreload: true\n  };\n\n  // create our graph\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Animation"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
189var graph = null;
190
191function custom(x, y, t) {
return Math.sin(x / 50 + t / 10) * Math.cos(y / 50 + t / 10) * 50 + 50;
193}
194
195// Called when the Visualization API is loaded.
196function 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 &lt; tMax; t++) {
  for (var x = 0; x &lt; axisMax; x += axisStep) {
    for (var y = 0; y &lt; axisMax; y += axisStep) {
      var value = custom(x, y, t);
      data.add([{ x: x, y: y, z: value, filter: t, style: value }]);
    }
  }
}
212
// 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
};
227
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
231}
232
233window.addEventListener("load", () =&gt; {
drawVisualization();
235});
236'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
242}
243"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
248
249&lt;div id="info"&gt;&lt;/div&gt;
250'
                /></form
            ></span>
          </div>
          <a href="graph3d/04_animation.html"
            ><div class="example-image">
              <img
                src="thumbnails/44b2da471c68f49cb41dc0690487d082929fbb022a888327d2b1a035e0c36c66.png"
                alt="Animation"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/06_moving_dots.html">Animation Moving Dots</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
275var graph = null;
276
277// Called when the Visualization API is loaded.
278function drawVisualization() {
// create the data table.
data = new vis.DataSet();
281
// create some shortcuts to math functions
var sin = Math.sin;
var cos = Math.cos;
var pi = Math.PI;
286
// 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 &lt; tmax; t += tstep) {
  var tgroup = parseFloat(t.toFixed(2));
  var value = t;
294
  // a dot in the center
  data.add({ x: 0, y: 0, z: 0, filter: tgroup, style: value });
297
  // one or multiple dots moving around the center
  for (var dot = 0; dot &lt; 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
    });
  }
}
317
// 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
  }
};
337
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
341}
342
343window.addEventListener("load", () =&gt; {
drawVisualization();
345});
346'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
352}
353"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
358
359&lt;div id="info"&gt;&lt;/div&gt;
360'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Animation Moving Dots"
                />
              </form>
371
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  // create the data table.\n  data = new vis.DataSet();\n\n  // create some shortcuts to math functions\n  var sin = Math.sin;\n  var cos = Math.cos;\n  var pi = Math.PI;\n\n  // create the animation data\n  var tmax = 2.0 * pi;\n  var tstep = tmax / 75;\n  var dotCount = 1; // set this to 1, 2, 3, 4, ...\n  for (var t = 0; t &lt; tmax; t += tstep) {\n    var tgroup = parseFloat(t.toFixed(2));\n    var value = t;\n\n    // a dot in the center\n    data.add({ x: 0, y: 0, z: 0, filter: tgroup, style: value });\n\n    // one or multiple dots moving around the center\n    for (var dot = 0; dot &lt; dotCount; dot++) {\n      var tdot = t + (2 * pi * dot) / dotCount;\n      data.add({\n        x: sin(tdot),\n        y: cos(tdot),\n        z: sin(tdot),\n        filter: tgroup,\n        style: value\n      });\n      data.add({\n        x: sin(tdot),\n        y: -cos(tdot),\n        z: sin(tdot + (tmax * 1) / 2),\n        filter: tgroup,\n        style: value\n      });\n    }\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: \"dot-color\",\n    showPerspective: true,\n    showGrid: true,\n    keepAspectRatio: true,\n    verticalRatio: 1.0,\n    animationInterval: 35, // milliseconds\n    animationPreload: false,\n    animationAutoStart: true,\n    legendLabel: \"color value\",\n    cameraPosition: {\n      horizontal: 2.7,\n      vertical: 0.0,\n      distance: 1.65\n    }\n  };\n\n  // create our graph\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Animation Moving Dots"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
387var graph = null;
388
389// Called when the Visualization API is loaded.
390function drawVisualization() {
// create the data table.
data = new vis.DataSet();
393
// create some shortcuts to math functions
var sin = Math.sin;
var cos = Math.cos;
var pi = Math.PI;
398
// 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 &lt; tmax; t += tstep) {
  var tgroup = parseFloat(t.toFixed(2));
  var value = t;
406
  // a dot in the center
  data.add({ x: 0, y: 0, z: 0, filter: tgroup, style: value });
409
  // one or multiple dots moving around the center
  for (var dot = 0; dot &lt; 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
    });
  }
}
429
// 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
  }
};
449
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
453}
454
455window.addEventListener("load", () =&gt; {
drawVisualization();
457});
458'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
464}
465"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
470
471&lt;div id="info"&gt;&lt;/div&gt;
472'
                /></form
            ></span>
          </div>
          <a href="graph3d/06_moving_dots.html"
            ><div class="example-image">
              <img
                src="thumbnails/7ce1dc306703919a19090e8f70fc8a7ef0d161412f936d705442ef38aca3ce3a.png"
                alt="Animation Moving Dots"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/01_basics.html">Basics</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
497var graph = null;
498
499function custom(x, y) {
return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
501}
502
503// Called when the Visualization API is loaded.
504function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var counter = 0;
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x &lt; axisMax; x += axisStep) {
  for (var y = 0; y &lt; axisMax; y += axisStep) {
    var value = custom(x, y);
    data.add({ id: counter++, x: x, y: y, z: value, style: value });
  }
}
518
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "surface",
  showPerspective: true,
  showGrid: true,
  showShadow: false,
  keepAspectRatio: true,
  verticalRatio: 0.5
};
530
// Instantiate our graph object.
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
534}
535
536window.addEventListener("load", () =&gt; {
drawVisualization();
538});
539'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
545}
546"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
551
552&lt;div id="info"&gt;&lt;/div&gt;
553'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Basics"
                />
              </form>
564
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\nfunction custom(x, y) {\n  return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;\n}\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  // Create and populate a data table.\n  data = new vis.DataSet();\n  // create some nice looking data with sin/cos\n  var counter = 0;\n  var steps = 50; // number of datapoints will be steps*steps\n  var axisMax = 314;\n  var axisStep = axisMax / steps;\n  for (var x = 0; x &lt; axisMax; x += axisStep) {\n    for (var y = 0; y &lt; axisMax; y += axisStep) {\n      var value = custom(x, y);\n      data.add({ id: counter++, x: x, y: y, z: value, style: value });\n    }\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: \"surface\",\n    showPerspective: true,\n    showGrid: true,\n    showShadow: false,\n    keepAspectRatio: true,\n    verticalRatio: 0.5\n  };\n\n  // Instantiate our graph object.\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Basics"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
580var graph = null;
581
582function custom(x, y) {
return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
584}
585
586// Called when the Visualization API is loaded.
587function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var counter = 0;
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x &lt; axisMax; x += axisStep) {
  for (var y = 0; y &lt; axisMax; y += axisStep) {
    var value = custom(x, y);
    data.add({ id: counter++, x: x, y: y, z: value, style: value });
  }
}
601
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "surface",
  showPerspective: true,
  showGrid: true,
  showShadow: false,
  keepAspectRatio: true,
  verticalRatio: 0.5
};
613
// Instantiate our graph object.
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
617}
618
619window.addEventListener("load", () =&gt; {
drawVisualization();
621});
622'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
628}
629"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
634
635&lt;div id="info"&gt;&lt;/div&gt;
636'
                /></form
            ></span>
          </div>
          <a href="graph3d/01_basics.html"
            ><div class="example-image">
              <img
                src="thumbnails/a2093f3aab17f34ce73003b929d4508870f32390487c6befe784394ef93e5479.png"
                alt="Basics"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/02_camera.html">Camera Position</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
661var graph = null;
662
663function custom(x, y) {
return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
665}
666
667// callback function, called when the camera position has changed
668function 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)
);
680}
681
682// set the camera position
683function 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);
693
// retrieve the camera position again, to get the applied values
onCameraPositionChange();
696}
697
698// Called when the Visualization API is loaded.
699function drawVisualization() {
// Create and populate a data table.
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 &lt; axisMax; x += axisStep) {
  for (var y = 0; y &lt; axisMax; y += axisStep) {
    var value = custom(x, y);
    data.add([{ x: x, y: y, z: value, t: 0, style: value }]);
  }
}
712
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "surface",
  showPerspective: true,
  showGrid: true,
  showShadow: false,
  keepAspectRatio: true,
  verticalRatio: 0.5
};
724
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
728
graph.on("cameraPositionChange", onCameraPositionChange);
730}
731
732window.addEventListener("load", () =&gt; {
drawVisualization();
734});
735'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
741}
742td {
font: 10pt arial;
744}
745"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;h1&gt;Graph 3d camera position&lt;/h1&gt;
750&lt;table&gt;
&lt;tbody&gt;
  &lt;tr&gt;
    &lt;td&gt;Horizontal angle (0 to 2*pi)&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" id="horizontal" value="1.0" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Vertical angle (0 to 0.5*pi)&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" id="vertical" value="0.5" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Distance (0.71 to 5.0)&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" id="distance" value="1.7" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;
      &lt;input type="button" value="Set" onclick="setCameraPosition();" /&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/tbody&gt;
771&lt;/table&gt;
772
773&lt;div id="mygraph"&gt;&lt;/div&gt;
774
775&lt;div id="info"&gt;&lt;/div&gt;
776'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Camera Position"
                />
              </form>
787
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\ntd {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;h1&gt;Graph 3d camera position&lt;/h1&gt;\n&lt;table&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Horizontal angle (0 to 2*pi)&lt;/td&gt;\n      &lt;td&gt;&lt;input type=\"text\" id=\"horizontal\" value=\"1.0\" /&gt;&lt;/td&gt;\n    &lt;/tr&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Vertical angle (0 to 0.5*pi)&lt;/td&gt;\n      &lt;td&gt;&lt;input type=\"text\" id=\"vertical\" value=\"0.5\" /&gt;&lt;/td&gt;\n    &lt;/tr&gt;\n    &lt;tr&gt;\n      &lt;td&gt;Distance (0.71 to 5.0)&lt;/td&gt;\n      &lt;td&gt;&lt;input type=\"text\" id=\"distance\" value=\"1.7\" /&gt;&lt;/td&gt;\n    &lt;/tr&gt;\n    &lt;tr&gt;\n      &lt;td&gt;&lt;/td&gt;\n      &lt;td&gt;\n        &lt;input type=\"button\" value=\"Set\" onclick=\"setCameraPosition();\" /&gt;\n      &lt;/td&gt;\n    &lt;/tr&gt;\n  &lt;/tbody&gt;\n&lt;/table&gt;\n\n&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\nfunction custom(x, y) {\n  return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;\n}\n\n// callback function, called when the camera position has changed\nfunction onCameraPositionChange() {\n  // adjust the values of startDate and endDate\n  var pos = graph.getCameraPosition();\n  document.getElementById(\"horizontal\").value = parseFloat(\n    pos.horizontal.toFixed(3)\n  );\n  document.getElementById(\"vertical\").value = parseFloat(\n    pos.vertical.toFixed(3)\n  );\n  document.getElementById(\"distance\").value = parseFloat(\n    pos.distance.toFixed(3)\n  );\n}\n\n// set the camera position\nfunction setCameraPosition() {\n  var horizontal = parseFloat(document.getElementById(\"horizontal\").value);\n  var vertical = parseFloat(document.getElementById(\"vertical\").value);\n  var distance = parseFloat(document.getElementById(\"distance\").value);\n  var pos = {\n    horizontal: horizontal,\n    vertical: vertical,\n    distance: distance\n  };\n  graph.setCameraPosition(pos);\n\n  // retrieve the camera position again, to get the applied values\n  onCameraPositionChange();\n}\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  // Create and populate a data table.\n  data = new vis.DataSet();\n  // create some nice looking data with sin/cos\n  var steps = 50; // number of datapoints will be steps*steps\n  var axisMax = 314;\n  var axisStep = axisMax / steps;\n  for (var x = 0; x &lt; axisMax; x += axisStep) {\n    for (var y = 0; y &lt; axisMax; y += axisStep) {\n      var value = custom(x, y);\n      data.add([{ x: x, y: y, z: value, t: 0, style: value }]);\n    }\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: \"surface\",\n    showPerspective: true,\n    showGrid: true,\n    showShadow: false,\n    keepAspectRatio: true,\n    verticalRatio: 0.5\n  };\n\n  // create our graph\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n\n  graph.on(\"cameraPositionChange\", onCameraPositionChange);\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Camera Position"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
803var graph = null;
804
805function custom(x, y) {
return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
807}
808
809// callback function, called when the camera position has changed
810function 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)
);
822}
823
824// set the camera position
825function 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);
835
// retrieve the camera position again, to get the applied values
onCameraPositionChange();
838}
839
840// Called when the Visualization API is loaded.
841function drawVisualization() {
// Create and populate a data table.
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 &lt; axisMax; x += axisStep) {
  for (var y = 0; y &lt; axisMax; y += axisStep) {
    var value = custom(x, y);
    data.add([{ x: x, y: y, z: value, t: 0, style: value }]);
  }
}
854
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "surface",
  showPerspective: true,
  showGrid: true,
  showShadow: false,
  keepAspectRatio: true,
  verticalRatio: 0.5
};
866
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
870
graph.on("cameraPositionChange", onCameraPositionChange);
872}
873
874window.addEventListener("load", () =&gt; {
drawVisualization();
876});
877'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
883}
884td {
font: 10pt arial;
886}
887"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;h1&gt;Graph 3d camera position&lt;/h1&gt;
892&lt;table&gt;
&lt;tbody&gt;
  &lt;tr&gt;
    &lt;td&gt;Horizontal angle (0 to 2*pi)&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" id="horizontal" value="1.0" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Vertical angle (0 to 0.5*pi)&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" id="vertical" value="0.5" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Distance (0.71 to 5.0)&lt;/td&gt;
    &lt;td&gt;&lt;input type="text" id="distance" value="1.7" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td&gt;
      &lt;input type="button" value="Set" onclick="setCameraPosition();" /&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/tbody&gt;
913&lt;/table&gt;
914
915&lt;div id="mygraph"&gt;&lt;/div&gt;
916
917&lt;div id="info"&gt;&lt;/div&gt;
918'
                /></form
            ></span>
          </div>
          <a href="graph3d/02_camera.html"
            ><div class="example-image">
              <img
                src="thumbnails/e67f2e28c3dc1af39bc23e96b7ea0bbc5b632ede8d58793884ce4f3f242dd733.png"
                alt="Camera Position"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/07_dot_cloud_colors.html"
              >Cloud with Colored Dots</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
944var graph = null;
945
946function onclick(point) {
console.log(point);
948}
949
950// Called when the Visualization API is loaded.
951function drawVisualization() {
// create the data table.
data = new vis.DataSet();
954
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
959
// create the animation data
var imax = 100;
for (var i = 0; i &lt; imax; i++) {
  var x = pow(random(), 2);
  var y = pow(random(), 2);
  var z = pow(random(), 2);
  var style =
    i % 2 == 0 ? sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2)) : "#00ffff";
968
  data.add({ x: x, y: y, z: z, style: style });
}
971
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "dot-color",
  showPerspective: true,
  showGrid: true,
  keepAspectRatio: true,
  verticalRatio: 1.0,
  legendLabel: "distance",
  onclick: onclick,
  cameraPosition: {
    horizontal: -0.35,
    vertical: 0.22,
    distance: 1.8
  }
};
989
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
993}
994
995window.addEventListener("load", () =&gt; {
drawVisualization();
997});
998'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
1004}
1005"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
1010
1011&lt;div id="info"&gt;&lt;/div&gt;
1012'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Cloud with Colored Dots"
                />
              </form>
1023
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\nfunction onclick(point) {\n  console.log(point);\n}\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  // create the data table.\n  data = new vis.DataSet();\n\n  // create some shortcuts to math functions\n  var sqrt = Math.sqrt;\n  var pow = Math.pow;\n  var random = Math.random;\n\n  // create the animation data\n  var imax = 100;\n  for (var i = 0; i &lt; imax; i++) {\n    var x = pow(random(), 2);\n    var y = pow(random(), 2);\n    var z = pow(random(), 2);\n    var style =\n      i % 2 == 0 ? sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2)) : \"#00ffff\";\n\n    data.add({ x: x, y: y, z: z, style: style });\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: \"dot-color\",\n    showPerspective: true,\n    showGrid: true,\n    keepAspectRatio: true,\n    verticalRatio: 1.0,\n    legendLabel: \"distance\",\n    onclick: onclick,\n    cameraPosition: {\n      horizontal: -0.35,\n      vertical: 0.22,\n      distance: 1.8\n    }\n  };\n\n  // create our graph\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Cloud with Colored Dots"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
1039var graph = null;
1040
1041function onclick(point) {
console.log(point);
1043}
1044
1045// Called when the Visualization API is loaded.
1046function drawVisualization() {
// create the data table.
data = new vis.DataSet();
1049
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
1054
// create the animation data
var imax = 100;
for (var i = 0; i &lt; imax; i++) {
  var x = pow(random(), 2);
  var y = pow(random(), 2);
  var z = pow(random(), 2);
  var style =
    i % 2 == 0 ? sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2)) : "#00ffff";
1063
  data.add({ x: x, y: y, z: z, style: style });
}
1066
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "dot-color",
  showPerspective: true,
  showGrid: true,
  keepAspectRatio: true,
  verticalRatio: 1.0,
  legendLabel: "distance",
  onclick: onclick,
  cameraPosition: {
    horizontal: -0.35,
    vertical: 0.22,
    distance: 1.8
  }
};
1084
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
1088}
1089
1090window.addEventListener("load", () =&gt; {
drawVisualization();
1092});
1093'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
1099}
1100"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
1105
1106&lt;div id="info"&gt;&lt;/div&gt;
1107'
                /></form
            ></span>
          </div>
          <a href="graph3d/07_dot_cloud_colors.html"
            ><div class="example-image">
              <img
                src="thumbnails/25be5ead5cd783a8a644a4af642714aab8e429a7a0bb08222f637c37f52336d5.png"
                alt="Cloud with Colored Dots"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/08_dot_cloud_size.html">Cloud with Sized Dots</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
1132var graph = null;
1133
1134// Called when the Visualization API is loaded.
1135function drawVisualization() {
// create the data table.
data = new vis.DataSet();
1138
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
1143
// create the animation data
var imax = 100;
for (var i = 0; i &lt; imax; i++) {
  var x = pow(random(), 2);
  var y = pow(random(), 2);
  var z = pow(random(), 2);
1150
  var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
  var range = sqrt(2) - dist;
1153
  data.add({ x: x, y: y, z: z, style: range });
}
1156
// 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
  },
  dotSizeMinFraction: 0.5,
  dotSizeMaxFraction: 2.5
};
1175
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
1179}
1180
1181window.addEventListener("load", () =&gt; {
drawVisualization();
1183});
1184'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
1190}
1191"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
1196
1197&lt;div id="info"&gt;&lt;/div&gt;
1198'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Cloud with Sized Dots"
                />
              </form>
1209
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  // create the data table.\n  data = new vis.DataSet();\n\n  // create some shortcuts to math functions\n  var sqrt = Math.sqrt;\n  var pow = Math.pow;\n  var random = Math.random;\n\n  // create the animation data\n  var imax = 100;\n  for (var i = 0; i &lt; imax; i++) {\n    var x = pow(random(), 2);\n    var y = pow(random(), 2);\n    var z = pow(random(), 2);\n\n    var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));\n    var range = sqrt(2) - dist;\n\n    data.add({ x: x, y: y, z: z, style: range });\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: \"dot-size\",\n    showPerspective: false,\n    showGrid: true,\n    keepAspectRatio: true,\n    legendLabel: \"value\",\n    verticalRatio: 1.0,\n    cameraPosition: {\n      horizontal: -0.54,\n      vertical: 0.5,\n      distance: 1.6\n    },\n    dotSizeMinFraction: 0.5,\n    dotSizeMaxFraction: 2.5\n  };\n\n  // create our graph\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Cloud with Sized Dots"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
1225var graph = null;
1226
1227// Called when the Visualization API is loaded.
1228function drawVisualization() {
// create the data table.
data = new vis.DataSet();
1231
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
1236
// create the animation data
var imax = 100;
for (var i = 0; i &lt; imax; i++) {
  var x = pow(random(), 2);
  var y = pow(random(), 2);
  var z = pow(random(), 2);
1243
  var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
  var range = sqrt(2) - dist;
1246
  data.add({ x: x, y: y, z: z, style: range });
}
1249
// 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
  },
  dotSizeMinFraction: 0.5,
  dotSizeMaxFraction: 2.5
};
1268
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
1272}
1273
1274window.addEventListener("load", () =&gt; {
drawVisualization();
1276});
1277'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
1283}
1284"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
1289
1290&lt;div id="info"&gt;&lt;/div&gt;
1291'
                /></form
            ></span>
          </div>
          <a href="graph3d/08_dot_cloud_size.html"
            ><div class="example-image">
              <img
                src="thumbnails/5a02efacddb0331827ddcf2ae12052f3720c21a7506374c724150cecef901e84.png"
                alt="Cloud with Sized Dots"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/12_custom_labels.html">Custom Labels</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
1316var graph = null;
1317
1318function custom(x, y) {
return (-Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10) * 1000;
1320}
1321
1322// Called when the Visualization API is loaded.
1323function drawVisualization() {
var style = document.getElementById("style").value;
var withValue =
  ["bar-color", "bar-size", "dot-size", "dot-color"].indexOf(style) != -1;
1327
// Create and populate a data table.
data = new vis.DataSet();
1330
// 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 &lt;= axisMax; x += axisStep) {
  for (var y = 0; y &lt;= 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 });
    }
  }
}
1346
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: style,
  showPerspective: true,
  showGrid: true,
  showShadow: false,
1355
  // 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: &lt;b&gt;" + point.z + "&lt;/b&gt;";
  },
1362
  xValueLabel: function(value) {
    return vis
      .moment()
      .add(value, "days")
      .format("DD MMM");
  },
1369
  yValueLabel: function(value) {
    return value * 10 + "%";
  },
1373
  zValueLabel: function(value) {
    return value / 1000 + "K";
  },
1377
  keepAspectRatio: true,
  verticalRatio: 0.5
};
1381
var camera = graph ? graph.getCameraPosition() : null;
1383
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
1387
if (camera) graph.setCameraPosition(camera); // restore camera position
1389
document.getElementById("style").onchange = drawVisualization;
1391}
1392
1393window.addEventListener("load", () =&gt; {
drawVisualization();
1395});
1396'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
1402}
1403"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;p&gt;
&lt;label for="style"&gt;
  Style:
  &lt;select id="style"&gt;
    &lt;option value="bar"&gt;bar&lt;/option&gt;
    &lt;option value="bar-color"&gt;bar-color&lt;/option&gt;
    &lt;option value="bar-size"&gt;bar-size&lt;/option&gt;
1414
    &lt;option value="dot"&gt;dot&lt;/option&gt;
    &lt;option value="dot-line"&gt;dot-line&lt;/option&gt;
    &lt;option value="dot-color"&gt;dot-color&lt;/option&gt;
    &lt;option value="dot-size"&gt;dot-size&lt;/option&gt;
1419
    &lt;option value="grid"&gt;grid&lt;/option&gt;
    &lt;option value="line"&gt;line&lt;/option&gt;
    &lt;option value="surface"&gt;surface&lt;/option&gt;
  &lt;/select&gt;
&lt;/label&gt;
1425&lt;/p&gt;
1426
1427&lt;div id="mygraph"&gt;&lt;/div&gt;
1428
1429&lt;div id="info"&gt;&lt;/div&gt;
1430'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Custom Labels"
                />
              </form>
1441
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;p&gt;\n  &lt;label for=\"style\"&gt;\n    Style:\n    &lt;select id=\"style\"&gt;\n      &lt;option value=\"bar\"&gt;bar&lt;/option&gt;\n      &lt;option value=\"bar-color\"&gt;bar-color&lt;/option&gt;\n      &lt;option value=\"bar-size\"&gt;bar-size&lt;/option&gt;\n\n      &lt;option value=\"dot\"&gt;dot&lt;/option&gt;\n      &lt;option value=\"dot-line\"&gt;dot-line&lt;/option&gt;\n      &lt;option value=\"dot-color\"&gt;dot-color&lt;/option&gt;\n      &lt;option value=\"dot-size\"&gt;dot-size&lt;/option&gt;\n\n      &lt;option value=\"grid\"&gt;grid&lt;/option&gt;\n      &lt;option value=\"line\"&gt;line&lt;/option&gt;\n      &lt;option value=\"surface\"&gt;surface&lt;/option&gt;\n    &lt;/select&gt;\n  &lt;/label&gt;\n&lt;/p&gt;\n\n&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\nfunction custom(x, y) {\n  return (-Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10) * 1000;\n}\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  var style = document.getElementById(\"style\").value;\n  var withValue =\n    [\"bar-color\", \"bar-size\", \"dot-size\", \"dot-color\"].indexOf(style) != -1;\n\n  // Create and populate a data table.\n  data = new vis.DataSet();\n\n  // create some nice looking data with sin/cos\n  var steps = 5; // number of datapoints will be steps*steps\n  var axisMax = 10;\n  var axisStep = axisMax / steps;\n  for (var x = 0; x &lt;= axisMax; x += axisStep) {\n    for (var y = 0; y &lt;= axisMax; y += axisStep) {\n      var z = custom(x, y);\n      if (withValue) {\n        var value = y - x;\n        data.add({ x: x, y: y, z: z, style: value });\n      } else {\n        data.add({ x: x, y: y, z: z });\n      }\n    }\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: style,\n    showPerspective: true,\n    showGrid: true,\n    showShadow: false,\n\n    // Option tooltip can be true, false, or a function returning a string with HTML contents\n    //tooltip: true,\n    tooltip: function(point) {\n      // parameter point contains properties x, y, z\n      return \"value: &lt;b&gt;\" + point.z + \"&lt;/b&gt;\";\n    },\n\n    xValueLabel: function(value) {\n      return vis\n        .moment()\n        .add(value, \"days\")\n        .format(\"DD MMM\");\n    },\n\n    yValueLabel: function(value) {\n      return value * 10 + \"%\";\n    },\n\n    zValueLabel: function(value) {\n      return value / 1000 + \"K\";\n    },\n\n    keepAspectRatio: true,\n    verticalRatio: 0.5\n  };\n\n  var camera = graph ? graph.getCameraPosition() : null;\n\n  // create our graph\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n\n  if (camera) graph.setCameraPosition(camera); // restore camera position\n\n  document.getElementById(\"style\").onchange = drawVisualization;\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Custom Labels"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
1457var graph = null;
1458
1459function custom(x, y) {
return (-Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10) * 1000;
1461}
1462
1463// Called when the Visualization API is loaded.
1464function drawVisualization() {
var style = document.getElementById("style").value;
var withValue =
  ["bar-color", "bar-size", "dot-size", "dot-color"].indexOf(style) != -1;
1468
// Create and populate a data table.
data = new vis.DataSet();
1471
// 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 &lt;= axisMax; x += axisStep) {
  for (var y = 0; y &lt;= 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 });
    }
  }
}
1487
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: style,
  showPerspective: true,
  showGrid: true,
  showShadow: false,
1496
  // 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: &lt;b&gt;" + point.z + "&lt;/b&gt;";
  },
1503
  xValueLabel: function(value) {
    return vis
      .moment()
      .add(value, "days")
      .format("DD MMM");
  },
1510
  yValueLabel: function(value) {
    return value * 10 + "%";
  },
1514
  zValueLabel: function(value) {
    return value / 1000 + "K";
  },
1518
  keepAspectRatio: true,
  verticalRatio: 0.5
};
1522
var camera = graph ? graph.getCameraPosition() : null;
1524
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
1528
if (camera) graph.setCameraPosition(camera); // restore camera position
1530
document.getElementById("style").onchange = drawVisualization;
1532}
1533
1534window.addEventListener("load", () =&gt; {
drawVisualization();
1536});
1537'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
1543}
1544"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;p&gt;
&lt;label for="style"&gt;
  Style:
  &lt;select id="style"&gt;
    &lt;option value="bar"&gt;bar&lt;/option&gt;
    &lt;option value="bar-color"&gt;bar-color&lt;/option&gt;
    &lt;option value="bar-size"&gt;bar-size&lt;/option&gt;
1555
    &lt;option value="dot"&gt;dot&lt;/option&gt;
    &lt;option value="dot-line"&gt;dot-line&lt;/option&gt;
    &lt;option value="dot-color"&gt;dot-color&lt;/option&gt;
    &lt;option value="dot-size"&gt;dot-size&lt;/option&gt;
1560
    &lt;option value="grid"&gt;grid&lt;/option&gt;
    &lt;option value="line"&gt;line&lt;/option&gt;
    &lt;option value="surface"&gt;surface&lt;/option&gt;
  &lt;/select&gt;
&lt;/label&gt;
1566&lt;/p&gt;
1567
1568&lt;div id="mygraph"&gt;&lt;/div&gt;
1569
1570&lt;div id="info"&gt;&lt;/div&gt;
1571'
                /></form
            ></span>
          </div>
          <a href="graph3d/12_custom_labels.html"
            ><div class="example-image">
              <img
                src="thumbnails/f7c986763a1b0d76c35e782613d4c2255682de3477eac7ade789091dc243bc17.png"
                alt="Custom Labels"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/13_disable_zoom.html">Disable Zoom</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
1596var graph = null;
1597
1598function custom(x, y) {
return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
1600}
1601
1602// Called when the Visualization API is loaded.
1603function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var counter = 0;
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x &lt; axisMax; x += axisStep) {
  for (var y = 0; y &lt; axisMax; y += axisStep) {
    var value = custom(x, y);
    data.add({ id: counter++, x: x, y: y, z: value, style: value });
  }
}
1617
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "surface",
  showPerspective: true,
  showGrid: true,
  showShadow: false,
  keepAspectRatio: true,
  verticalRatio: 0.5,
  zoomable: false
};
1630
// Instantiate our graph object.
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
1634}
1635
1636window.addEventListener("load", () =&gt; {
drawVisualization();
1638});
1639'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
1645}
1646"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
1651
1652&lt;div id="info"&gt;&lt;/div&gt;
1653'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Disable Zoom"
                />
              </form>
1664
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\nfunction custom(x, y) {\n  return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;\n}\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  // Create and populate a data table.\n  data = new vis.DataSet();\n  // create some nice looking data with sin/cos\n  var counter = 0;\n  var steps = 50; // number of datapoints will be steps*steps\n  var axisMax = 314;\n  var axisStep = axisMax / steps;\n  for (var x = 0; x &lt; axisMax; x += axisStep) {\n    for (var y = 0; y &lt; axisMax; y += axisStep) {\n      var value = custom(x, y);\n      data.add({ id: counter++, x: x, y: y, z: value, style: value });\n    }\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: \"surface\",\n    showPerspective: true,\n    showGrid: true,\n    showShadow: false,\n    keepAspectRatio: true,\n    verticalRatio: 0.5,\n    zoomable: false\n  };\n\n  // Instantiate our graph object.\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Disable Zoom"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
1680var graph = null;
1681
1682function custom(x, y) {
return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
1684}
1685
1686// Called when the Visualization API is loaded.
1687function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var counter = 0;
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x &lt; axisMax; x += axisStep) {
  for (var y = 0; y &lt; axisMax; y += axisStep) {
    var value = custom(x, y);
    data.add({ id: counter++, x: x, y: y, z: value, style: value });
  }
}
1701
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "surface",
  showPerspective: true,
  showGrid: true,
  showShadow: false,
  keepAspectRatio: true,
  verticalRatio: 0.5,
  zoomable: false
};
1714
// Instantiate our graph object.
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
1718}
1719
1720window.addEventListener("load", () =&gt; {
drawVisualization();
1722});
1723'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
1729}
1730"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
1735
1736&lt;div id="info"&gt;&lt;/div&gt;
1737'
                /></form
            ></span>
          </div>
          <a href="graph3d/13_disable_zoom.html"
            ><div class="example-image">
              <img
                src="thumbnails/ca22cb74e9f0c43b4a07bac1b0389e3e16082cfd3c6589d87bd7492c2107bcb6.png"
                alt="Disable Zoom"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/03_filter_data.html">Filter Data</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
1762var graph = null;
1763
1764function custom(x, y) {
return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
1766}
1767
1768// Called when the Visualization API is loaded.
1769function drawVisualization() {
// Create and populate a data table.
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 &lt; axisMax; x += axisStep) {
  for (var y = 0; y &lt; axisMax; y += axisStep) {
    var value = custom(x, y);
    var valueRange = value &gt; 67 ? "67-100" : value &lt; 33 ? "0-33" : "33-67";
    data.push({ x: x, y: y, z: value, filter: valueRange, style: value });
  }
}
1783
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "surface",
  showPerspective: false,
  showGrid: true,
  showShadow: false,
  keepAspectRatio: true,
  verticalRatio: 0.5,
  filterLabel: "values"
};
1796
// Create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
1800}
1801
1802window.addEventListener("load", () =&gt; {
drawVisualization();
1804});
1805'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
1811}
1812"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
1817
1818&lt;div id="info"&gt;&lt;/div&gt;
1819'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Filter Data"
                />
              </form>
1830
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\nfunction custom(x, y) {\n  return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;\n}\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  // Create and populate a data table.\n  data = [];\n  // create some nice looking data with sin/cos\n  var steps = 50; // number of datapoints will be steps*steps\n  var axisMax = 314;\n  var axisStep = axisMax / steps;\n  for (var x = 0; x &lt; axisMax; x += axisStep) {\n    for (var y = 0; y &lt; axisMax; y += axisStep) {\n      var value = custom(x, y);\n      var valueRange = value &gt; 67 ? \"67-100\" : value &lt; 33 ? \"0-33\" : \"33-67\";\n      data.push({ x: x, y: y, z: value, filter: valueRange, style: value });\n    }\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: \"surface\",\n    showPerspective: false,\n    showGrid: true,\n    showShadow: false,\n    keepAspectRatio: true,\n    verticalRatio: 0.5,\n    filterLabel: \"values\"\n  };\n\n  // Create our graph\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Filter Data"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
1846var graph = null;
1847
1848function custom(x, y) {
return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
1850}
1851
1852// Called when the Visualization API is loaded.
1853function drawVisualization() {
// Create and populate a data table.
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 &lt; axisMax; x += axisStep) {
  for (var y = 0; y &lt; axisMax; y += axisStep) {
    var value = custom(x, y);
    var valueRange = value &gt; 67 ? "67-100" : value &lt; 33 ? "0-33" : "33-67";
    data.push({ x: x, y: y, z: value, filter: valueRange, style: value });
  }
}
1867
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "surface",
  showPerspective: false,
  showGrid: true,
  showShadow: false,
  keepAspectRatio: true,
  verticalRatio: 0.5,
  filterLabel: "values"
};
1880
// Create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
1884}
1885
1886window.addEventListener("load", () =&gt; {
drawVisualization();
1888});
1889'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
1895}
1896"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
1901
1902&lt;div id="info"&gt;&lt;/div&gt;
1903'
                /></form
            ></span>
          </div>
          <a href="graph3d/03_filter_data.html"
            ><div class="example-image">
              <img
                src="thumbnails/2fa5fd611006cb869a8a54e40a30bb3258eb46541b3530aaf0757dcc15513a18.png"
                alt="Filter Data"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/05_line.html">Line</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
1928var graph = null;
1929
1930// Called when the Visualization API is loaded.
1931function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
1934
// 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 &lt; 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 });
}
1947
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "line",
  showPerspective: false,
  showGrid: true,
  keepAspectRatio: true,
  verticalRatio: 1.0
};
1958
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
1962
graph.setCameraPosition(0.4, undefined, undefined);
1964}
1965
1966window.addEventListener("load", () =&gt; {
drawVisualization();
1968});
1969'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
1975}
1976"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
1981
1982&lt;div id="info"&gt;&lt;/div&gt;
1983'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Line"
                />
              </form>
1994
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  // Create and populate a data table.\n  data = new vis.DataSet();\n\n  // create some nice looking data with sin/cos\n  var steps = 500;\n  var axisMax = 314;\n  var tmax = 4 * 2 * Math.PI;\n  var axisStep = axisMax / steps;\n  for (var t = 0; t &lt; tmax; t += tmax / steps) {\n    var r = 1;\n    var x = r * Math.sin(t);\n    var y = r * Math.cos(t);\n    var z = t / tmax;\n    data.add({ x: x, y: y, z: z });\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: \"line\",\n    showPerspective: false,\n    showGrid: true,\n    keepAspectRatio: true,\n    verticalRatio: 1.0\n  };\n\n  // create our graph\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n\n  graph.setCameraPosition(0.4, undefined, undefined);\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Line"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
2010var graph = null;
2011
2012// Called when the Visualization API is loaded.
2013function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
2016
// 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 &lt; 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 });
}
2029
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "line",
  showPerspective: false,
  showGrid: true,
  keepAspectRatio: true,
  verticalRatio: 1.0
};
2040
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
2044
graph.setCameraPosition(0.4, undefined, undefined);
2046}
2047
2048window.addEventListener("load", () =&gt; {
drawVisualization();
2050});
2051'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
2057}
2058"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
2063
2064&lt;div id="info"&gt;&lt;/div&gt;
2065'
                /></form
            ></span>
          </div>
          <a href="graph3d/05_line.html"
            ><div class="example-image">
              <img
                src="thumbnails/f5e35d3448f335732af70475c293466677d5806da60c96df9173da7312dcfcff.png"
                alt="Line"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/09_mobile.html">Mobile</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
2090var graph = null;
2091
2092function custom(x, y) {
return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
2094}
2095
2096// Called when the Visualization API is loaded.
2097function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
2100
// 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 &lt; axisMax; x += axisStep) {
  for (var y = 0; y &lt; axisMax; y += axisStep) {
    var value = custom(x, y);
    data.add([{ x: x, y: y, z: value }]);
  }
}
2111
// specify options
var options = {
  width: "100%",
  height: "100%",
  style: "surface",
  showPerspective: true,
  showGrid: true,
  showShadow: false,
  keepAspectRatio: true,
  verticalRatio: 0.5,
  backgroundColor: {
    strokeWidth: 0
  }
};
2126
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
2130}
2131
2132window.addEventListener("resize", () =&gt; {
graph.redraw();
2134});
2135window.addEventListener("load", () =&gt; {
drawVisualization();
2137});
2138'
                /><input
                  type="hidden"
                  name="css"
                  value="html,
2143body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
2149}
2150
2151#mygraph {
position: absolute;
width: 100%;
height: 100%;
2155}
2156"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
2161'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Mobile"
                />
              </form>
2172
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"html,\nbody {\n  font: 10pt arial;\n  padding: 0;\n  margin: 0;\n  width: 100%;\n  height: 100%;\n}\n\n#mygraph {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n","css_external":"","html":"&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\nfunction custom(x, y) {\n  return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;\n}\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  // Create and populate a data table.\n  data = new vis.DataSet();\n\n  // create some nice looking data with sin/cos\n  var steps = 10; // number of datapoints will be steps*steps\n  var axisMax = 314;\n  var axisStep = axisMax / steps;\n  for (var x = 0; x &lt; axisMax; x += axisStep) {\n    for (var y = 0; y &lt; axisMax; y += axisStep) {\n      var value = custom(x, y);\n      data.add([{ x: x, y: y, z: value }]);\n    }\n  }\n\n  // specify options\n  var options = {\n    width: \"100%\",\n    height: \"100%\",\n    style: \"surface\",\n    showPerspective: true,\n    showGrid: true,\n    showShadow: false,\n    keepAspectRatio: true,\n    verticalRatio: 0.5,\n    backgroundColor: {\n      strokeWidth: 0\n    }\n  };\n\n  // create our graph\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n}\n\nwindow.addEventListener(\"resize\", () =&gt; {\n  graph.redraw();\n});\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Mobile"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
2188var graph = null;
2189
2190function custom(x, y) {
return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
2192}
2193
2194// Called when the Visualization API is loaded.
2195function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
2198
// 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 &lt; axisMax; x += axisStep) {
  for (var y = 0; y &lt; axisMax; y += axisStep) {
    var value = custom(x, y);
    data.add([{ x: x, y: y, z: value }]);
  }
}
2209
// specify options
var options = {
  width: "100%",
  height: "100%",
  style: "surface",
  showPerspective: true,
  showGrid: true,
  showShadow: false,
  keepAspectRatio: true,
  verticalRatio: 0.5,
  backgroundColor: {
    strokeWidth: 0
  }
};
2224
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
2228}
2229
2230window.addEventListener("resize", () =&gt; {
graph.redraw();
2232});
2233window.addEventListener("load", () =&gt; {
drawVisualization();
2235});
2236'
                /><input
                  type="hidden"
                  name="css"
                  value="html,
2241body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
2247}
2248
2249#mygraph {
position: absolute;
width: 100%;
height: 100%;
2253}
2254"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
2259'
                /></form
            ></span>
          </div>
          <a href="graph3d/09_mobile.html"
            ><div class="example-image">
              <img
                src="thumbnails/4fb6e1185e7f4ae7392babb7ce8c11b5b6baaeb839ef9f9a655f309dde4b234a.png"
                alt="Mobile"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/playground/index.html">Playground</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='// Called when the Visualization API is loaded.
2284function drawVisualization() {
// TODO
2286}
2287
2288window.addEventListener("load", () =&gt; {
load();
2290});
2291'
                /><input type="hidden" name="css" value /><input
                  type="hidden"
                  name="html"
                  value='&lt;h1&gt;Graph 3D - Playground&lt;/h1&gt;
2296
2297&lt;table style="width:100%;"&gt;
&lt;colgroup&gt;
  &lt;col width="50%" /&gt;
  &lt;col width="50%" /&gt;
&lt;/colgroup&gt;
&lt;tbody&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;h2&gt;Data&lt;/h2&gt;
      &lt;p&gt;
        Graph 3D expects a data table with first three to five columns: colums
        &lt;code&gt;x&lt;/code&gt;, &lt;code&gt;y&lt;/code&gt;, &lt;code&gt;z&lt;/code&gt; (optional),
        &lt;code&gt;style&lt;/code&gt;, &lt;code&gt;filter&lt;/code&gt; (optional).
      &lt;/p&gt;
2311
      &lt;table&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td style="white-space: nowrap"&gt;
              &lt;input
                type="radio"
                name="datatype"
                id="datatypeCsv"
                onclick="selectDataType();"
                checked
                value="csv"
              /&gt;Csv
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div id="csv"&gt;
                &lt;textarea id="csvTextarea"&gt;&lt;/textarea&gt;
                &lt;p&gt;
                  &lt;a
                    href="javascript: loadCsvExample();"
                    title="Load an example"
                    &gt;Simple example&lt;/a
                  &gt;
                  &lt;a
                    href="javascript: loadCsvLineExample();"
                    title="Load an example"
                    &gt;Line example&lt;/a
                  &gt;
                  &lt;a
                    href="javascript: loadCsvAnimationExample();"
                    title="Load an example"
                    &gt;Animation example&lt;/a
                  &gt;
                  &lt;a
                    href="javascript: loadCsvMovingDotsExample();"
                    title="Load an example"
                    &gt;Moving dots example&lt;/a
                  &gt;
                  &lt;a
                    href="javascript: loadCsvColoredDotsExample();"
                    title="Load an example"
                    &gt;Colored dots example&lt;/a
                  &gt;
                  &lt;a
                    href="javascript: loadCsvSizedDotsExample();"
                    title="Load an example"
                    &gt;Sized dots example&lt;/a
                  &gt;
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;!-- TODO: add JSON examples --&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
2366
      &lt;br /&gt;
    &lt;/td&gt;
    &lt;td rowspan="2"&gt;
      &lt;h2&gt;Graph&lt;/h2&gt;
      &lt;p&gt;
        &lt;input type="button" value="Draw graph" onclick="draw();" id="draw" /&gt;
      &lt;/p&gt;
2374
      &lt;div id="mygraph"&gt;&lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;h2&gt;Options&lt;/h2&gt;
2381
      &lt;table&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th&gt;Option&lt;/th&gt;
            &lt;th&gt;Value&lt;/th&gt;
          &lt;/tr&gt;
2388
          &lt;tr&gt;
            &lt;td&gt;width&lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="width" value="100%" /&gt;
              &lt;span class="info"
                &gt;for example &amp;quot;500px&amp;quot; or &amp;quot;100%&amp;quot;&lt;/span
              &gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;height&lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="height" value="100%" /&gt;
              &lt;span class="info"
                &gt;for example &amp;quot;500px&amp;quot; or &amp;quot;100%&amp;quot;&lt;/span
              &gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;style&lt;/td&gt;
            &lt;td&gt;
              &lt;select id="style"&gt;
                &lt;option value="bar"&gt;bar &lt;/option
                &gt;&lt;option value="bar-color"&gt;bar-color &lt;/option
                &gt;&lt;option value="bar-size"&gt;bar-size &lt;/option
                &gt;&lt;option value="dot"&gt;dot &lt;/option
                &gt;&lt;option value="dot-color"&gt;dot-color &lt;/option
                &gt;&lt;option value="dot-size"&gt;dot-size &lt;/option
                &gt;&lt;option value="dot-line"&gt;dot-line &lt;/option
                &gt;&lt;option value="line"&gt;line &lt;/option
                &gt;&lt;option value="grid"&gt;grid &lt;/option
                &gt;&lt;option value="surface" selected&gt;surface &lt;/option&gt;&lt;/select
              &gt;
            &lt;/td&gt;
          &lt;/tr&gt;
2424
          &lt;tr&gt;
            &lt;td&gt;showAnimationControls&lt;/td&gt;
            &lt;td&gt;
              &lt;input type="checkbox" id="showAnimationControls" checked /&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;showGrid&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showGrid" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;showXAxis&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showXAxis" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;showYAxis&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showYAxis" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;showZAxis&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showZAxis" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2447
          &lt;tr&gt;
            &lt;td&gt;showPerspective&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showPerspective" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;showLegend&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showLegend" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;showShadow&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showShadow" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2460
          &lt;tr&gt;
            &lt;td&gt;keepAspectRatio&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="keepAspectRatio" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;verticalRatio&lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="verticalRatio" value="0.5" /&gt;
              &lt;span class="info"&gt;a value between 0.1 and 1.0&lt;/span&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
2472
          &lt;tr&gt;
            &lt;td&gt;animationInterval&lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="animationInterval" value="1000" /&gt;
              &lt;span class="info"&gt;in milliseconds&lt;/span&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;animationPreload&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="animationPreload" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;animationAutoStart&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="animationAutoStart" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2488
          &lt;tr&gt;
            &lt;td&gt;xCenter&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="xCenter" value="55%" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;yCenter&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="yCenter" value="45%" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2497
          &lt;tr&gt;
            &lt;td&gt;xMin&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="xMin" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;xMax&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="xMax" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;xStep&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="xStep" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2510
          &lt;tr&gt;
            &lt;td&gt;yMin&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="yMin" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;yMax&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="yMax" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;yStep&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="yStep" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2523
          &lt;tr&gt;
            &lt;td&gt;zMin&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="zMin" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;zMax&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="zMax" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;zStep&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="zStep" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2536
          &lt;tr&gt;
            &lt;td&gt;valueMin&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="valueMin" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;valueMax&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="valueMax" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2545
          &lt;tr&gt;
            &lt;td&gt;xBarWidth&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="xBarWidth" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;yBarWidth&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="yBarWidth" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2554
          &lt;tr&gt;
            &lt;td&gt;xLabel&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="xLabel" value="x" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;yLabel&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="yLabel" value="y" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;zLabel&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="zLabel" value="z" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;filterLabel&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="filterLabel" value="time" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;legendLabel&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="legendLabel" value="value" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/tbody&gt;
2580&lt;/table&gt;
2581'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/examples/graph3d/playground/playground.css,https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js,https://visjs.github.io/vis-graph3d/examples/graph3d/playground/playground.js,https://visjs.github.io/vis-graph3d/examples/graph3d/playground/csv2array.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Playground"
                />
              </form>
2592
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"","css_external":"https://visjs.github.io/vis-graph3d/examples/graph3d/playground/playground.css","html":"&lt;h1&gt;Graph 3D - Playground&lt;/h1&gt;\n\n&lt;table style=\"width:100%;\"&gt;\n  &lt;colgroup&gt;\n    &lt;col width=\"50%\" /&gt;\n    &lt;col width=\"50%\" /&gt;\n  &lt;/colgroup&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;h2&gt;Data&lt;/h2&gt;\n        &lt;p&gt;\n          Graph 3D expects a data table with first three to five columns: colums\n          &lt;code&gt;x&lt;/code&gt;, &lt;code&gt;y&lt;/code&gt;, &lt;code&gt;z&lt;/code&gt; (optional),\n          &lt;code&gt;style&lt;/code&gt;, &lt;code&gt;filter&lt;/code&gt; (optional).\n        &lt;/p&gt;\n\n        &lt;table&gt;\n          &lt;tbody&gt;\n            &lt;tr&gt;\n              &lt;td style=\"white-space: nowrap\"&gt;\n                &lt;input\n                  type=\"radio\"\n                  name=\"datatype\"\n                  id=\"datatypeCsv\"\n                  onclick=\"selectDataType();\"\n                  checked\n                  value=\"csv\"\n                /&gt;Csv\n              &lt;/td&gt;\n              &lt;td&gt;\n                &lt;div id=\"csv\"&gt;\n                  &lt;textarea id=\"csvTextarea\"&gt;&lt;/textarea&gt;\n                  &lt;p&gt;\n                    &lt;a\n                      href=\"javascript: loadCsvExample();\"\n                      title=\"Load an example\"\n                      &gt;Simple example&lt;/a\n                    &gt;\n                    &lt;a\n                      href=\"javascript: loadCsvLineExample();\"\n                      title=\"Load an example\"\n                      &gt;Line example&lt;/a\n                    &gt;\n                    &lt;a\n                      href=\"javascript: loadCsvAnimationExample();\"\n                      title=\"Load an example\"\n                      &gt;Animation example&lt;/a\n                    &gt;\n                    &lt;a\n                      href=\"javascript: loadCsvMovingDotsExample();\"\n                      title=\"Load an example\"\n                      &gt;Moving dots example&lt;/a\n                    &gt;\n                    &lt;a\n                      href=\"javascript: loadCsvColoredDotsExample();\"\n                      title=\"Load an example\"\n                      &gt;Colored dots example&lt;/a\n                    &gt;\n                    &lt;a\n                      href=\"javascript: loadCsvSizedDotsExample();\"\n                      title=\"Load an example\"\n                      &gt;Sized dots example&lt;/a\n                    &gt;\n                  &lt;/p&gt;\n                &lt;/div&gt;\n              &lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;!-- TODO: add JSON examples --&gt;\n          &lt;/tbody&gt;\n        &lt;/table&gt;\n\n        &lt;br /&gt;\n      &lt;/td&gt;\n      &lt;td rowspan=\"2\"&gt;\n        &lt;h2&gt;Graph&lt;/h2&gt;\n        &lt;p&gt;\n          &lt;input type=\"button\" value=\"Draw graph\" onclick=\"draw();\" id=\"draw\" /&gt;\n        &lt;/p&gt;\n\n        &lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n      &lt;/td&gt;\n    &lt;/tr&gt;\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;h2&gt;Options&lt;/h2&gt;\n\n        &lt;table&gt;\n          &lt;tbody&gt;\n            &lt;tr&gt;\n              &lt;th&gt;Option&lt;/th&gt;\n              &lt;th&gt;Value&lt;/th&gt;\n            &lt;/tr&gt;\n\n            &lt;tr&gt;\n              &lt;td&gt;width&lt;/td&gt;\n              &lt;td&gt;\n                &lt;input type=\"text\" id=\"width\" value=\"100%\" /&gt;\n                &lt;span class=\"info\"\n                  &gt;for example &amp;quot;500px&amp;quot; or &amp;quot;100%&amp;quot;&lt;/span\n                &gt;\n              &lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;height&lt;/td&gt;\n              &lt;td&gt;\n                &lt;input type=\"text\" id=\"height\" value=\"100%\" /&gt;\n                &lt;span class=\"info\"\n                  &gt;for example &amp;quot;500px&amp;quot; or &amp;quot;100%&amp;quot;&lt;/span\n                &gt;\n              &lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;style&lt;/td&gt;\n              &lt;td&gt;\n                &lt;select id=\"style\"&gt;\n                  &lt;option value=\"bar\"&gt;bar &lt;/option\n                  &gt;&lt;option value=\"bar-color\"&gt;bar-color &lt;/option\n                  &gt;&lt;option value=\"bar-size\"&gt;bar-size &lt;/option\n                  &gt;&lt;option value=\"dot\"&gt;dot &lt;/option\n                  &gt;&lt;option value=\"dot-color\"&gt;dot-color &lt;/option\n                  &gt;&lt;option value=\"dot-size\"&gt;dot-size &lt;/option\n                  &gt;&lt;option value=\"dot-line\"&gt;dot-line &lt;/option\n                  &gt;&lt;option value=\"line\"&gt;line &lt;/option\n                  &gt;&lt;option value=\"grid\"&gt;grid &lt;/option\n                  &gt;&lt;option value=\"surface\" selected&gt;surface &lt;/option&gt;&lt;/select\n                &gt;\n              &lt;/td&gt;\n            &lt;/tr&gt;\n\n            &lt;tr&gt;\n              &lt;td&gt;showAnimationControls&lt;/td&gt;\n              &lt;td&gt;\n                &lt;input type=\"checkbox\" id=\"showAnimationControls\" checked /&gt;\n              &lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;showGrid&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"checkbox\" id=\"showGrid\" checked /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;showXAxis&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"checkbox\" id=\"showXAxis\" checked /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;showYAxis&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"checkbox\" id=\"showYAxis\" checked /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;showZAxis&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"checkbox\" id=\"showZAxis\" checked /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n\n            &lt;tr&gt;\n              &lt;td&gt;showPerspective&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"checkbox\" id=\"showPerspective\" checked /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;showLegend&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"checkbox\" id=\"showLegend\" checked /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;showShadow&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"checkbox\" id=\"showShadow\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n\n            &lt;tr&gt;\n              &lt;td&gt;keepAspectRatio&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"checkbox\" id=\"keepAspectRatio\" checked /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;verticalRatio&lt;/td&gt;\n              &lt;td&gt;\n                &lt;input type=\"text\" id=\"verticalRatio\" value=\"0.5\" /&gt;\n                &lt;span class=\"info\"&gt;a value between 0.1 and 1.0&lt;/span&gt;\n              &lt;/td&gt;\n            &lt;/tr&gt;\n\n            &lt;tr&gt;\n              &lt;td&gt;animationInterval&lt;/td&gt;\n              &lt;td&gt;\n                &lt;input type=\"text\" id=\"animationInterval\" value=\"1000\" /&gt;\n                &lt;span class=\"info\"&gt;in milliseconds&lt;/span&gt;\n              &lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;animationPreload&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"checkbox\" id=\"animationPreload\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;animationAutoStart&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"checkbox\" id=\"animationAutoStart\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n\n            &lt;tr&gt;\n              &lt;td&gt;xCenter&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"xCenter\" value=\"55%\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;yCenter&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"yCenter\" value=\"45%\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n\n            &lt;tr&gt;\n              &lt;td&gt;xMin&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"xMin\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;xMax&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"xMax\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;xStep&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"xStep\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n\n            &lt;tr&gt;\n              &lt;td&gt;yMin&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"yMin\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;yMax&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"yMax\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;yStep&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"yStep\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n\n            &lt;tr&gt;\n              &lt;td&gt;zMin&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"zMin\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;zMax&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"zMax\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;zStep&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"zStep\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n\n            &lt;tr&gt;\n              &lt;td&gt;valueMin&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"valueMin\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;valueMax&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"valueMax\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n\n            &lt;tr&gt;\n              &lt;td&gt;xBarWidth&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"xBarWidth\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;yBarWidth&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"yBarWidth\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n\n            &lt;tr&gt;\n              &lt;td&gt;xLabel&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"xLabel\" value=\"x\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;yLabel&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"yLabel\" value=\"y\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;zLabel&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"zLabel\" value=\"z\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;filterLabel&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"filterLabel\" value=\"time\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n            &lt;tr&gt;\n              &lt;td&gt;legendLabel&lt;/td&gt;\n              &lt;td&gt;&lt;input type=\"text\" id=\"legendLabel\" value=\"value\" /&gt;&lt;/td&gt;\n            &lt;/tr&gt;\n          &lt;/tbody&gt;\n        &lt;/table&gt;\n      &lt;/td&gt;\n    &lt;/tr&gt;\n  &lt;/tbody&gt;\n&lt;/table&gt;\n","js":"// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  // TODO\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  load();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js;https://visjs.github.io/vis-graph3d/examples/graph3d/playground/playground.js;https://visjs.github.io/vis-graph3d/examples/graph3d/playground/csv2array.js","title":"Graph 3D | Playground"}'
                /><input
                  type="hidden"
                  name="js"
                  value='// Called when the Visualization API is loaded.
2608function drawVisualization() {
// TODO
2610}
2611
2612window.addEventListener("load", () =&gt; {
load();
2614});
2615'
                /><input type="hidden" name="css" value /><input
                  type="hidden"
                  name="html"
                  value='&lt;h1&gt;Graph 3D - Playground&lt;/h1&gt;
2620
2621&lt;table style="width:100%;"&gt;
&lt;colgroup&gt;
  &lt;col width="50%" /&gt;
  &lt;col width="50%" /&gt;
&lt;/colgroup&gt;
&lt;tbody&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;h2&gt;Data&lt;/h2&gt;
      &lt;p&gt;
        Graph 3D expects a data table with first three to five columns: colums
        &lt;code&gt;x&lt;/code&gt;, &lt;code&gt;y&lt;/code&gt;, &lt;code&gt;z&lt;/code&gt; (optional),
        &lt;code&gt;style&lt;/code&gt;, &lt;code&gt;filter&lt;/code&gt; (optional).
      &lt;/p&gt;
2635
      &lt;table&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td style="white-space: nowrap"&gt;
              &lt;input
                type="radio"
                name="datatype"
                id="datatypeCsv"
                onclick="selectDataType();"
                checked
                value="csv"
              /&gt;Csv
            &lt;/td&gt;
            &lt;td&gt;
              &lt;div id="csv"&gt;
                &lt;textarea id="csvTextarea"&gt;&lt;/textarea&gt;
                &lt;p&gt;
                  &lt;a
                    href="javascript: loadCsvExample();"
                    title="Load an example"
                    &gt;Simple example&lt;/a
                  &gt;
                  &lt;a
                    href="javascript: loadCsvLineExample();"
                    title="Load an example"
                    &gt;Line example&lt;/a
                  &gt;
                  &lt;a
                    href="javascript: loadCsvAnimationExample();"
                    title="Load an example"
                    &gt;Animation example&lt;/a
                  &gt;
                  &lt;a
                    href="javascript: loadCsvMovingDotsExample();"
                    title="Load an example"
                    &gt;Moving dots example&lt;/a
                  &gt;
                  &lt;a
                    href="javascript: loadCsvColoredDotsExample();"
                    title="Load an example"
                    &gt;Colored dots example&lt;/a
                  &gt;
                  &lt;a
                    href="javascript: loadCsvSizedDotsExample();"
                    title="Load an example"
                    &gt;Sized dots example&lt;/a
                  &gt;
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;!-- TODO: add JSON examples --&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
2690
      &lt;br /&gt;
    &lt;/td&gt;
    &lt;td rowspan="2"&gt;
      &lt;h2&gt;Graph&lt;/h2&gt;
      &lt;p&gt;
        &lt;input type="button" value="Draw graph" onclick="draw();" id="draw" /&gt;
      &lt;/p&gt;
2698
      &lt;div id="mygraph"&gt;&lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;h2&gt;Options&lt;/h2&gt;
2705
      &lt;table&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;th&gt;Option&lt;/th&gt;
            &lt;th&gt;Value&lt;/th&gt;
          &lt;/tr&gt;
2712
          &lt;tr&gt;
            &lt;td&gt;width&lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="width" value="100%" /&gt;
              &lt;span class="info"
                &gt;for example &amp;quot;500px&amp;quot; or &amp;quot;100%&amp;quot;&lt;/span
              &gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;height&lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="height" value="100%" /&gt;
              &lt;span class="info"
                &gt;for example &amp;quot;500px&amp;quot; or &amp;quot;100%&amp;quot;&lt;/span
              &gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;style&lt;/td&gt;
            &lt;td&gt;
              &lt;select id="style"&gt;
                &lt;option value="bar"&gt;bar &lt;/option
                &gt;&lt;option value="bar-color"&gt;bar-color &lt;/option
                &gt;&lt;option value="bar-size"&gt;bar-size &lt;/option
                &gt;&lt;option value="dot"&gt;dot &lt;/option
                &gt;&lt;option value="dot-color"&gt;dot-color &lt;/option
                &gt;&lt;option value="dot-size"&gt;dot-size &lt;/option
                &gt;&lt;option value="dot-line"&gt;dot-line &lt;/option
                &gt;&lt;option value="line"&gt;line &lt;/option
                &gt;&lt;option value="grid"&gt;grid &lt;/option
                &gt;&lt;option value="surface" selected&gt;surface &lt;/option&gt;&lt;/select
              &gt;
            &lt;/td&gt;
          &lt;/tr&gt;
2748
          &lt;tr&gt;
            &lt;td&gt;showAnimationControls&lt;/td&gt;
            &lt;td&gt;
              &lt;input type="checkbox" id="showAnimationControls" checked /&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;showGrid&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showGrid" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;showXAxis&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showXAxis" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;showYAxis&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showYAxis" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;showZAxis&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showZAxis" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2771
          &lt;tr&gt;
            &lt;td&gt;showPerspective&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showPerspective" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;showLegend&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showLegend" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;showShadow&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="showShadow" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2784
          &lt;tr&gt;
            &lt;td&gt;keepAspectRatio&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="keepAspectRatio" checked /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;verticalRatio&lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="verticalRatio" value="0.5" /&gt;
              &lt;span class="info"&gt;a value between 0.1 and 1.0&lt;/span&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
2796
          &lt;tr&gt;
            &lt;td&gt;animationInterval&lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="animationInterval" value="1000" /&gt;
              &lt;span class="info"&gt;in milliseconds&lt;/span&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;animationPreload&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="animationPreload" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;animationAutoStart&lt;/td&gt;
            &lt;td&gt;&lt;input type="checkbox" id="animationAutoStart" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2812
          &lt;tr&gt;
            &lt;td&gt;xCenter&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="xCenter" value="55%" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;yCenter&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="yCenter" value="45%" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2821
          &lt;tr&gt;
            &lt;td&gt;xMin&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="xMin" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;xMax&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="xMax" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;xStep&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="xStep" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2834
          &lt;tr&gt;
            &lt;td&gt;yMin&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="yMin" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;yMax&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="yMax" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;yStep&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="yStep" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2847
          &lt;tr&gt;
            &lt;td&gt;zMin&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="zMin" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;zMax&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="zMax" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;zStep&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="zStep" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2860
          &lt;tr&gt;
            &lt;td&gt;valueMin&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="valueMin" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;valueMax&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="valueMax" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2869
          &lt;tr&gt;
            &lt;td&gt;xBarWidth&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="xBarWidth" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;yBarWidth&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="yBarWidth" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
2878
          &lt;tr&gt;
            &lt;td&gt;xLabel&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="xLabel" value="x" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;yLabel&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="yLabel" value="y" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;zLabel&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="zLabel" value="z" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;filterLabel&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="filterLabel" value="time" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;legendLabel&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="legendLabel" value="value" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/tbody&gt;
2904&lt;/table&gt;
2905'
                /></form
            ></span>
          </div>
          <a href="graph3d/playground/index.html"
            ><div class="example-image">
              <img
                src="thumbnails/abd84ceb6894a84b569ea940d4831358492f11253c022f11e43b1014a7992ddf.png"
                alt="Playground"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/10_styling.html">Styling</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
2930var graph = null;
2931
2932function custom(x, y) {
return -Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10;
2934}
2935
2936// Called when the Visualization API is loaded.
2937function 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;
2946
// Create and populate a data table.
data = [];
2949
// 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 &lt;= axisMax; x += axisStep) {
  for (var y = 0; y &lt;= axisMax; y += axisStep) {
    var z = custom(x, y);
    if (withValue) {
      var value = y - x;
      data.push({ x: x, y: y, z: z, style: value });
    } else {
      data.push({ x: x, y: y, z: z });
    }
  }
}
2965
// 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
};
2979
var camera = graph ? graph.getCameraPosition() : null;
2981
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
2985
if (camera) graph.setCameraPosition(camera); // restore camera position
2987
document.getElementById("style").onchange = drawVisualization;
document.getElementById("perspective").onchange = drawVisualization;
document.getElementById("xBarWidth").onchange = drawVisualization;
document.getElementById("yBarWidth").onchange = drawVisualization;
2992}
2993
2994window.addEventListener("load", () =&gt; {
drawVisualization();
2996});
2997'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
3003}
3004"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;p&gt;
&lt;label for="style"&gt;
  Style:
  &lt;select id="style"&gt;
    &lt;option value="bar"&gt;bar&lt;/option&gt;
    &lt;option value="bar-color"&gt;bar-color&lt;/option&gt;
    &lt;option value="bar-size"&gt;bar-size&lt;/option&gt;
3015
    &lt;option value="dot"&gt;dot&lt;/option&gt;
    &lt;option value="dot-line"&gt;dot-line&lt;/option&gt;
    &lt;option value="dot-color"&gt;dot-color&lt;/option&gt;
    &lt;option value="dot-size"&gt;dot-size&lt;/option&gt;
3020
    &lt;option value="grid"&gt;grid&lt;/option&gt;
    &lt;option value="line"&gt;line&lt;/option&gt;
    &lt;option value="surface"&gt;surface&lt;/option&gt;
  &lt;/select&gt;
&lt;/label&gt;
3026&lt;/p&gt;
3027
3028&lt;p&gt;
&lt;label for="perspective"&gt;
  &lt;input type="checkbox" id="perspective" checked /&gt; Show perspective
&lt;/label&gt;
3032&lt;/p&gt;
3033
3034&lt;p&gt;
&lt;label for="xBarWidth"&gt;
  Bar width X:
  &lt;input type="text" id="xBarWidth" value style="width:50px;" /&gt; (only
  applicable for styles &amp;quot;bar&amp;quot; and &amp;quot;bar-color&amp;quot;)
&lt;/label&gt;
3040&lt;/p&gt;
3041&lt;p&gt;
&lt;label for="yBarWidth"&gt;
  Bar width Y:
  &lt;input type="text" id="yBarWidth" value style="width:50px;" /&gt; (only
  applicable for styles &amp;quot;bar&amp;quot; and &amp;quot;bar-color&amp;quot;)
&lt;/label&gt;
3047&lt;/p&gt;
3048
3049&lt;div id="mygraph"&gt;&lt;/div&gt;
3050
3051&lt;div id="info"&gt;&lt;/div&gt;
3052'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Styling"
                />
              </form>
3063
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;p&gt;\n  &lt;label for=\"style\"&gt;\n    Style:\n    &lt;select id=\"style\"&gt;\n      &lt;option value=\"bar\"&gt;bar&lt;/option&gt;\n      &lt;option value=\"bar-color\"&gt;bar-color&lt;/option&gt;\n      &lt;option value=\"bar-size\"&gt;bar-size&lt;/option&gt;\n\n      &lt;option value=\"dot\"&gt;dot&lt;/option&gt;\n      &lt;option value=\"dot-line\"&gt;dot-line&lt;/option&gt;\n      &lt;option value=\"dot-color\"&gt;dot-color&lt;/option&gt;\n      &lt;option value=\"dot-size\"&gt;dot-size&lt;/option&gt;\n\n      &lt;option value=\"grid\"&gt;grid&lt;/option&gt;\n      &lt;option value=\"line\"&gt;line&lt;/option&gt;\n      &lt;option value=\"surface\"&gt;surface&lt;/option&gt;\n    &lt;/select&gt;\n  &lt;/label&gt;\n&lt;/p&gt;\n\n&lt;p&gt;\n  &lt;label for=\"perspective\"&gt;\n    &lt;input type=\"checkbox\" id=\"perspective\" checked /&gt; Show perspective\n  &lt;/label&gt;\n&lt;/p&gt;\n\n&lt;p&gt;\n  &lt;label for=\"xBarWidth\"&gt;\n    Bar width X:\n    &lt;input type=\"text\" id=\"xBarWidth\" value style=\"width:50px;\" /&gt; (only\n    applicable for styles &amp;quot;bar&amp;quot; and &amp;quot;bar-color&amp;quot;)\n  &lt;/label&gt;\n&lt;/p&gt;\n&lt;p&gt;\n  &lt;label for=\"yBarWidth\"&gt;\n    Bar width Y:\n    &lt;input type=\"text\" id=\"yBarWidth\" value style=\"width:50px;\" /&gt; (only\n    applicable for styles &amp;quot;bar&amp;quot; and &amp;quot;bar-color&amp;quot;)\n  &lt;/label&gt;\n&lt;/p&gt;\n\n&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\nfunction custom(x, y) {\n  return -Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10;\n}\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  var style = document.getElementById(\"style\").value;\n  var showPerspective = document.getElementById(\"perspective\").checked;\n  var xBarWidth =\n    parseFloat(document.getElementById(\"xBarWidth\").value) || undefined;\n  var yBarWidth =\n    parseFloat(document.getElementById(\"yBarWidth\").value) || undefined;\n  var withValue =\n    [\"bar-color\", \"bar-size\", \"dot-size\", \"dot-color\"].indexOf(style) != -1;\n\n  // Create and populate a data table.\n  data = [];\n\n  // create some nice looking data with sin/cos\n  var steps = 5; // number of datapoints will be steps*steps\n  var axisMax = 10;\n  var axisStep = axisMax / steps;\n  for (var x = 0; x &lt;= axisMax; x += axisStep) {\n    for (var y = 0; y &lt;= axisMax; y += axisStep) {\n      var z = custom(x, y);\n      if (withValue) {\n        var value = y - x;\n        data.push({ x: x, y: y, z: z, style: value });\n      } else {\n        data.push({ x: x, y: y, z: z });\n      }\n    }\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: style,\n    xBarWidth: xBarWidth,\n    yBarWidth: yBarWidth,\n    showPerspective: showPerspective,\n    showGrid: true,\n    showShadow: false,\n    keepAspectRatio: true,\n    verticalRatio: 0.5\n  };\n\n  var camera = graph ? graph.getCameraPosition() : null;\n\n  // create our graph\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n\n  if (camera) graph.setCameraPosition(camera); // restore camera position\n\n  document.getElementById(\"style\").onchange = drawVisualization;\n  document.getElementById(\"perspective\").onchange = drawVisualization;\n  document.getElementById(\"xBarWidth\").onchange = drawVisualization;\n  document.getElementById(\"yBarWidth\").onchange = drawVisualization;\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Styling"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
3079var graph = null;
3080
3081function custom(x, y) {
return -Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10;
3083}
3084
3085// Called when the Visualization API is loaded.
3086function 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;
3095
// Create and populate a data table.
data = [];
3098
// 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 &lt;= axisMax; x += axisStep) {
  for (var y = 0; y &lt;= axisMax; y += axisStep) {
    var z = custom(x, y);
    if (withValue) {
      var value = y - x;
      data.push({ x: x, y: y, z: z, style: value });
    } else {
      data.push({ x: x, y: y, z: z });
    }
  }
}
3114
// 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
};
3128
var camera = graph ? graph.getCameraPosition() : null;
3130
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
3134
if (camera) graph.setCameraPosition(camera); // restore camera position
3136
document.getElementById("style").onchange = drawVisualization;
document.getElementById("perspective").onchange = drawVisualization;
document.getElementById("xBarWidth").onchange = drawVisualization;
document.getElementById("yBarWidth").onchange = drawVisualization;
3141}
3142
3143window.addEventListener("load", () =&gt; {
drawVisualization();
3145});
3146'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
3152}
3153"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;p&gt;
&lt;label for="style"&gt;
  Style:
  &lt;select id="style"&gt;
    &lt;option value="bar"&gt;bar&lt;/option&gt;
    &lt;option value="bar-color"&gt;bar-color&lt;/option&gt;
    &lt;option value="bar-size"&gt;bar-size&lt;/option&gt;
3164
    &lt;option value="dot"&gt;dot&lt;/option&gt;
    &lt;option value="dot-line"&gt;dot-line&lt;/option&gt;
    &lt;option value="dot-color"&gt;dot-color&lt;/option&gt;
    &lt;option value="dot-size"&gt;dot-size&lt;/option&gt;
3169
    &lt;option value="grid"&gt;grid&lt;/option&gt;
    &lt;option value="line"&gt;line&lt;/option&gt;
    &lt;option value="surface"&gt;surface&lt;/option&gt;
  &lt;/select&gt;
&lt;/label&gt;
3175&lt;/p&gt;
3176
3177&lt;p&gt;
&lt;label for="perspective"&gt;
  &lt;input type="checkbox" id="perspective" checked /&gt; Show perspective
&lt;/label&gt;
3181&lt;/p&gt;
3182
3183&lt;p&gt;
&lt;label for="xBarWidth"&gt;
  Bar width X:
  &lt;input type="text" id="xBarWidth" value style="width:50px;" /&gt; (only
  applicable for styles &amp;quot;bar&amp;quot; and &amp;quot;bar-color&amp;quot;)
&lt;/label&gt;
3189&lt;/p&gt;
3190&lt;p&gt;
&lt;label for="yBarWidth"&gt;
  Bar width Y:
  &lt;input type="text" id="yBarWidth" value style="width:50px;" /&gt; (only
  applicable for styles &amp;quot;bar&amp;quot; and &amp;quot;bar-color&amp;quot;)
&lt;/label&gt;
3196&lt;/p&gt;
3197
3198&lt;div id="mygraph"&gt;&lt;/div&gt;
3199
3200&lt;div id="info"&gt;&lt;/div&gt;
3201'
                /></form
            ></span>
          </div>
          <a href="graph3d/10_styling.html"
            ><div class="example-image">
              <img
                src="thumbnails/5692720dbea5649cf26f16fdee0735e311e3f2eaa6af7c9404b3a1fdb906fbe3.png"
                alt="Styling"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/15_styling_per_point.html">Styling per Point</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
3226var graph = null;
3227
3228function custom(x, y) {
return -Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10;
3230}
3231
3232// Called when the Visualization API is loaded.
3233function 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;
3242
// Create and populate a data table.
data = [];
colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
3246
// create some nice looking data with sin/cos
var steps = 7; // number of datapoints will be steps*steps
var axisMax = 12;
var axisStep = axisMax / steps;
for (var x = 0; x &lt;= axisMax; x += axisStep) {
  for (var y = 0; y &lt;= axisMax; y += axisStep) {
    var z = custom(x, y);
    if (withValue) {
      data.push({
        x: x,
        y: y,
        z: z,
        style: {
          fill: colors[x / axisStep],
          stroke: "#999"
        }
      });
    } else {
      data.push({ x: x, y: y, z: z });
    }
  }
}
3269
// 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
};
3283
var camera = graph ? graph.getCameraPosition() : null;
3285
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
3289
if (camera) graph.setCameraPosition(camera); // restore camera position
3291
document.getElementById("style").onchange = drawVisualization;
document.getElementById("perspective").onchange = drawVisualization;
document.getElementById("xBarWidth").onchange = drawVisualization;
document.getElementById("yBarWidth").onchange = drawVisualization;
3296}
3297
3298window.addEventListener("load", () =&gt; {
drawVisualization();
3300});
3301'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
3307}
3308"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;p&gt;
&lt;label for="style"&gt;
  Style:
  &lt;select id="style"&gt;
    &lt;option value="bar"&gt;bar&lt;/option&gt;
    &lt;option value="bar-color" selected&gt;bar-color&lt;/option&gt;
    &lt;option value="bar-size"&gt;bar-size&lt;/option&gt;
3319
    &lt;option value="dot"&gt;dot&lt;/option&gt;
    &lt;option value="dot-line"&gt;dot-line&lt;/option&gt;
    &lt;option value="dot-color"&gt;dot-color&lt;/option&gt;
    &lt;option value="dot-size"&gt;dot-size&lt;/option&gt;
3324
    &lt;option value="grid"&gt;grid&lt;/option&gt;
    &lt;option value="line"&gt;line&lt;/option&gt;
    &lt;option value="surface"&gt;surface&lt;/option&gt;
  &lt;/select&gt;
&lt;/label&gt;
3330&lt;/p&gt;
3331
3332&lt;p&gt;
&lt;label for="perspective"&gt;
  &lt;input type="checkbox" id="perspective" checked /&gt; Show perspective
&lt;/label&gt;
3336&lt;/p&gt;
3337
3338&lt;p&gt;
&lt;label for="xBarWidth"&gt;
  Bar width X:
  &lt;input type="text" id="xBarWidth" value style="width:50px;" /&gt; (only
  applicable for styles &amp;quot;bar&amp;quot; and &amp;quot;bar-color&amp;quot;)
&lt;/label&gt;
3344&lt;/p&gt;
3345&lt;p&gt;
&lt;label for="yBarWidth"&gt;
  Bar width Y:
  &lt;input type="text" id="yBarWidth" value style="width:50px;" /&gt; (only
  applicable for styles &amp;quot;bar&amp;quot; and &amp;quot;bar-color&amp;quot;)
&lt;/label&gt;
3351&lt;/p&gt;
3352
3353&lt;div id="mygraph"&gt;&lt;/div&gt;
3354
3355&lt;div id="info"&gt;&lt;/div&gt;
3356'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Styling per Point"
                />
              </form>
3367
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;p&gt;\n  &lt;label for=\"style\"&gt;\n    Style:\n    &lt;select id=\"style\"&gt;\n      &lt;option value=\"bar\"&gt;bar&lt;/option&gt;\n      &lt;option value=\"bar-color\" selected&gt;bar-color&lt;/option&gt;\n      &lt;option value=\"bar-size\"&gt;bar-size&lt;/option&gt;\n\n      &lt;option value=\"dot\"&gt;dot&lt;/option&gt;\n      &lt;option value=\"dot-line\"&gt;dot-line&lt;/option&gt;\n      &lt;option value=\"dot-color\"&gt;dot-color&lt;/option&gt;\n      &lt;option value=\"dot-size\"&gt;dot-size&lt;/option&gt;\n\n      &lt;option value=\"grid\"&gt;grid&lt;/option&gt;\n      &lt;option value=\"line\"&gt;line&lt;/option&gt;\n      &lt;option value=\"surface\"&gt;surface&lt;/option&gt;\n    &lt;/select&gt;\n  &lt;/label&gt;\n&lt;/p&gt;\n\n&lt;p&gt;\n  &lt;label for=\"perspective\"&gt;\n    &lt;input type=\"checkbox\" id=\"perspective\" checked /&gt; Show perspective\n  &lt;/label&gt;\n&lt;/p&gt;\n\n&lt;p&gt;\n  &lt;label for=\"xBarWidth\"&gt;\n    Bar width X:\n    &lt;input type=\"text\" id=\"xBarWidth\" value style=\"width:50px;\" /&gt; (only\n    applicable for styles &amp;quot;bar&amp;quot; and &amp;quot;bar-color&amp;quot;)\n  &lt;/label&gt;\n&lt;/p&gt;\n&lt;p&gt;\n  &lt;label for=\"yBarWidth\"&gt;\n    Bar width Y:\n    &lt;input type=\"text\" id=\"yBarWidth\" value style=\"width:50px;\" /&gt; (only\n    applicable for styles &amp;quot;bar&amp;quot; and &amp;quot;bar-color&amp;quot;)\n  &lt;/label&gt;\n&lt;/p&gt;\n\n&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\nfunction custom(x, y) {\n  return -Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10;\n}\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  var style = document.getElementById(\"style\").value;\n  var showPerspective = document.getElementById(\"perspective\").checked;\n  var xBarWidth =\n    parseFloat(document.getElementById(\"xBarWidth\").value) || undefined;\n  var yBarWidth =\n    parseFloat(document.getElementById(\"yBarWidth\").value) || undefined;\n  var withValue =\n    [\"bar-color\", \"bar-size\", \"dot-size\", \"dot-color\"].indexOf(style) != -1;\n\n  // Create and populate a data table.\n  data = [];\n  colors = [\"red\", \"orange\", \"yellow\", \"green\", \"blue\", \"indigo\", \"violet\"];\n\n  // create some nice looking data with sin/cos\n  var steps = 7; // number of datapoints will be steps*steps\n  var axisMax = 12;\n  var axisStep = axisMax / steps;\n  for (var x = 0; x &lt;= axisMax; x += axisStep) {\n    for (var y = 0; y &lt;= axisMax; y += axisStep) {\n      var z = custom(x, y);\n      if (withValue) {\n        data.push({\n          x: x,\n          y: y,\n          z: z,\n          style: {\n            fill: colors[x / axisStep],\n            stroke: \"#999\"\n          }\n        });\n      } else {\n        data.push({ x: x, y: y, z: z });\n      }\n    }\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: style,\n    xBarWidth: xBarWidth,\n    yBarWidth: yBarWidth,\n    showPerspective: showPerspective,\n    showGrid: true,\n    showShadow: false,\n    keepAspectRatio: true,\n    verticalRatio: 0.5\n  };\n\n  var camera = graph ? graph.getCameraPosition() : null;\n\n  // create our graph\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n\n  if (camera) graph.setCameraPosition(camera); // restore camera position\n\n  document.getElementById(\"style\").onchange = drawVisualization;\n  document.getElementById(\"perspective\").onchange = drawVisualization;\n  document.getElementById(\"xBarWidth\").onchange = drawVisualization;\n  document.getElementById(\"yBarWidth\").onchange = drawVisualization;\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Styling per Point"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
3383var graph = null;
3384
3385function custom(x, y) {
return -Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10;
3387}
3388
3389// Called when the Visualization API is loaded.
3390function 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;
3399
// Create and populate a data table.
data = [];
colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
3403
// create some nice looking data with sin/cos
var steps = 7; // number of datapoints will be steps*steps
var axisMax = 12;
var axisStep = axisMax / steps;
for (var x = 0; x &lt;= axisMax; x += axisStep) {
  for (var y = 0; y &lt;= axisMax; y += axisStep) {
    var z = custom(x, y);
    if (withValue) {
      data.push({
        x: x,
        y: y,
        z: z,
        style: {
          fill: colors[x / axisStep],
          stroke: "#999"
        }
      });
    } else {
      data.push({ x: x, y: y, z: z });
    }
  }
}
3426
// 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
};
3440
var camera = graph ? graph.getCameraPosition() : null;
3442
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
3446
if (camera) graph.setCameraPosition(camera); // restore camera position
3448
document.getElementById("style").onchange = drawVisualization;
document.getElementById("perspective").onchange = drawVisualization;
document.getElementById("xBarWidth").onchange = drawVisualization;
document.getElementById("yBarWidth").onchange = drawVisualization;
3453}
3454
3455window.addEventListener("load", () =&gt; {
drawVisualization();
3457});
3458'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
3464}
3465"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;p&gt;
&lt;label for="style"&gt;
  Style:
  &lt;select id="style"&gt;
    &lt;option value="bar"&gt;bar&lt;/option&gt;
    &lt;option value="bar-color" selected&gt;bar-color&lt;/option&gt;
    &lt;option value="bar-size"&gt;bar-size&lt;/option&gt;
3476
    &lt;option value="dot"&gt;dot&lt;/option&gt;
    &lt;option value="dot-line"&gt;dot-line&lt;/option&gt;
    &lt;option value="dot-color"&gt;dot-color&lt;/option&gt;
    &lt;option value="dot-size"&gt;dot-size&lt;/option&gt;
3481
    &lt;option value="grid"&gt;grid&lt;/option&gt;
    &lt;option value="line"&gt;line&lt;/option&gt;
    &lt;option value="surface"&gt;surface&lt;/option&gt;
  &lt;/select&gt;
&lt;/label&gt;
3487&lt;/p&gt;
3488
3489&lt;p&gt;
&lt;label for="perspective"&gt;
  &lt;input type="checkbox" id="perspective" checked /&gt; Show perspective
&lt;/label&gt;
3493&lt;/p&gt;
3494
3495&lt;p&gt;
&lt;label for="xBarWidth"&gt;
  Bar width X:
  &lt;input type="text" id="xBarWidth" value style="width:50px;" /&gt; (only
  applicable for styles &amp;quot;bar&amp;quot; and &amp;quot;bar-color&amp;quot;)
&lt;/label&gt;
3501&lt;/p&gt;
3502&lt;p&gt;
&lt;label for="yBarWidth"&gt;
  Bar width Y:
  &lt;input type="text" id="yBarWidth" value style="width:50px;" /&gt; (only
  applicable for styles &amp;quot;bar&amp;quot; and &amp;quot;bar-color&amp;quot;)
&lt;/label&gt;
3508&lt;/p&gt;
3509
3510&lt;div id="mygraph"&gt;&lt;/div&gt;
3511
3512&lt;div id="info"&gt;&lt;/div&gt;
3513'
                /></form
            ></span>
          </div>
          <a href="graph3d/15_styling_per_point.html"
            ><div class="example-image">
              <img
                src="thumbnails/c83e4c80b92f79205c976318a5d1f7be8b08dd8f68c242177458bbacc2f3465c.png"
                alt="Styling per Point"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/11_tooltips.html">Tooltips</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
3538var graph = null;
3539
3540function custom(x, y) {
return -Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10;
3542}
3543
3544// Called when the Visualization API is loaded.
3545function drawVisualization() {
var style = document.getElementById("style").value;
var withValue =
  ["bar-color", "bar-size", "dot-size", "dot-color"].indexOf(style) != -1;
3549
// Create and populate a data table.
data = new vis.DataSet();
var extra_content = [
  "Arbitrary information",
  "You can access data from the point source object",
  "Tooltip example content"
];
3557
// 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 &lt;= axisMax; x += axisStep) {
  for (var y = 0; y &lt;= axisMax; y += axisStep) {
    var z = custom(x, y);
    if (withValue) {
      var value = y - x;
      data.add({
        x: x,
        y: y,
        z: z,
        style: value,
        extra: extra_content[(x * y) % extra_content.length]
      });
    } else {
      data.add({
        x: x,
        y: y,
        z: z,
        extra: extra_content[(x * y) % extra_content.length]
      });
    }
  }
}
3584
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: style,
  showPerspective: true,
  showLegend: true,
  showGrid: true,
  showShadow: false,
3594
  // Option tooltip can be true, false, or a function returning a string with HTML contents
  tooltip: function(point) {
    // parameter point contains properties x, y, z, and data
    // data is the original object passed to the point constructor
    return "value: &lt;b&gt;" + point.z + "&lt;/b&gt;&lt;br&gt;" + point.data.extra;
  },
3601
  // Tooltip default styling can be overridden
  tooltipStyle: {
    content: {
      background: "rgba(255, 255, 255, 0.7)",
      padding: "10px",
      borderRadius: "10px"
    },
    line: {
      borderLeft: "1px dotted rgba(0, 0, 0, 0.5)"
    },
    dot: {
      border: "5px solid rgba(0, 0, 0, 0.5)"
    }
  },
3616
  keepAspectRatio: true,
  verticalRatio: 0.5
};
3620
var camera = graph ? graph.getCameraPosition() : null;
3622
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
3626
if (camera) graph.setCameraPosition(camera); // restore camera position
3628
document.getElementById("style").onchange = drawVisualization;
3630}
3631
3632window.addEventListener("load", () =&gt; {
drawVisualization();
3634});
3635'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
3641}
3642div#info {
width: 600px;
text-align: center;
margin-top: 2em;
font-size: 1.2em;
3647}
3648"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;p&gt;
&lt;label for="style"&gt;
  Style:
  &lt;select id="style"&gt;
    &lt;option value="bar"&gt;bar&lt;/option&gt;
    &lt;option value="bar-color"&gt;bar-color&lt;/option&gt;
    &lt;option value="bar-size"&gt;bar-size&lt;/option&gt;
3659
    &lt;option value="dot"&gt;dot&lt;/option&gt;
    &lt;option value="dot-line"&gt;dot-line&lt;/option&gt;
    &lt;option value="dot-color"&gt;dot-color&lt;/option&gt;
    &lt;option value="dot-size"&gt;dot-size&lt;/option&gt;
3664
    &lt;option value="grid"&gt;grid&lt;/option&gt;
    &lt;option value="line"&gt;line&lt;/option&gt;
    &lt;option value="surface"&gt;surface&lt;/option&gt;
  &lt;/select&gt;
&lt;/label&gt;
3670&lt;/p&gt;
3671
3672&lt;div id="mygraph"&gt;&lt;/div&gt;
3673
3674&lt;div id="info"&gt;Hover the mouse cursor over the graph to see tooltips.&lt;/div&gt;
3675'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Tooltips"
                />
              </form>
3686
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\ndiv#info {\n  width: 600px;\n  text-align: center;\n  margin-top: 2em;\n  font-size: 1.2em;\n}\n","css_external":"","html":"&lt;p&gt;\n  &lt;label for=\"style\"&gt;\n    Style:\n    &lt;select id=\"style\"&gt;\n      &lt;option value=\"bar\"&gt;bar&lt;/option&gt;\n      &lt;option value=\"bar-color\"&gt;bar-color&lt;/option&gt;\n      &lt;option value=\"bar-size\"&gt;bar-size&lt;/option&gt;\n\n      &lt;option value=\"dot\"&gt;dot&lt;/option&gt;\n      &lt;option value=\"dot-line\"&gt;dot-line&lt;/option&gt;\n      &lt;option value=\"dot-color\"&gt;dot-color&lt;/option&gt;\n      &lt;option value=\"dot-size\"&gt;dot-size&lt;/option&gt;\n\n      &lt;option value=\"grid\"&gt;grid&lt;/option&gt;\n      &lt;option value=\"line\"&gt;line&lt;/option&gt;\n      &lt;option value=\"surface\"&gt;surface&lt;/option&gt;\n    &lt;/select&gt;\n  &lt;/label&gt;\n&lt;/p&gt;\n\n&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;Hover the mouse cursor over the graph to see tooltips.&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\nfunction custom(x, y) {\n  return -Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10;\n}\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  var style = document.getElementById(\"style\").value;\n  var withValue =\n    [\"bar-color\", \"bar-size\", \"dot-size\", \"dot-color\"].indexOf(style) != -1;\n\n  // Create and populate a data table.\n  data = new vis.DataSet();\n  var extra_content = [\n    \"Arbitrary information\",\n    \"You can access data from the point source object\",\n    \"Tooltip example content\"\n  ];\n\n  // create some nice looking data with sin/cos\n  var steps = 5; // number of datapoints will be steps*steps\n  var axisMax = 10;\n  var axisStep = axisMax / steps;\n  for (var x = 0; x &lt;= axisMax; x += axisStep) {\n    for (var y = 0; y &lt;= axisMax; y += axisStep) {\n      var z = custom(x, y);\n      if (withValue) {\n        var value = y - x;\n        data.add({\n          x: x,\n          y: y,\n          z: z,\n          style: value,\n          extra: extra_content[(x * y) % extra_content.length]\n        });\n      } else {\n        data.add({\n          x: x,\n          y: y,\n          z: z,\n          extra: extra_content[(x * y) % extra_content.length]\n        });\n      }\n    }\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: style,\n    showPerspective: true,\n    showLegend: true,\n    showGrid: true,\n    showShadow: false,\n\n    // Option tooltip can be true, false, or a function returning a string with HTML contents\n    tooltip: function(point) {\n      // parameter point contains properties x, y, z, and data\n      // data is the original object passed to the point constructor\n      return \"value: &lt;b&gt;\" + point.z + \"&lt;/b&gt;&lt;br&gt;\" + point.data.extra;\n    },\n\n    // Tooltip default styling can be overridden\n    tooltipStyle: {\n      content: {\n        background: \"rgba(255, 255, 255, 0.7)\",\n        padding: \"10px\",\n        borderRadius: \"10px\"\n      },\n      line: {\n        borderLeft: \"1px dotted rgba(0, 0, 0, 0.5)\"\n      },\n      dot: {\n        border: \"5px solid rgba(0, 0, 0, 0.5)\"\n      }\n    },\n\n    keepAspectRatio: true,\n    verticalRatio: 0.5\n  };\n\n  var camera = graph ? graph.getCameraPosition() : null;\n\n  // create our graph\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n\n  if (camera) graph.setCameraPosition(camera); // restore camera position\n\n  document.getElementById(\"style\").onchange = drawVisualization;\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Tooltips"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
3702var graph = null;
3703
3704function custom(x, y) {
return -Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10;
3706}
3707
3708// Called when the Visualization API is loaded.
3709function drawVisualization() {
var style = document.getElementById("style").value;
var withValue =
  ["bar-color", "bar-size", "dot-size", "dot-color"].indexOf(style) != -1;
3713
// Create and populate a data table.
data = new vis.DataSet();
var extra_content = [
  "Arbitrary information",
  "You can access data from the point source object",
  "Tooltip example content"
];
3721
// 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 &lt;= axisMax; x += axisStep) {
  for (var y = 0; y &lt;= axisMax; y += axisStep) {
    var z = custom(x, y);
    if (withValue) {
      var value = y - x;
      data.add({
        x: x,
        y: y,
        z: z,
        style: value,
        extra: extra_content[(x * y) % extra_content.length]
      });
    } else {
      data.add({
        x: x,
        y: y,
        z: z,
        extra: extra_content[(x * y) % extra_content.length]
      });
    }
  }
}
3748
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: style,
  showPerspective: true,
  showLegend: true,
  showGrid: true,
  showShadow: false,
3758
  // Option tooltip can be true, false, or a function returning a string with HTML contents
  tooltip: function(point) {
    // parameter point contains properties x, y, z, and data
    // data is the original object passed to the point constructor
    return "value: &lt;b&gt;" + point.z + "&lt;/b&gt;&lt;br&gt;" + point.data.extra;
  },
3765
  // Tooltip default styling can be overridden
  tooltipStyle: {
    content: {
      background: "rgba(255, 255, 255, 0.7)",
      padding: "10px",
      borderRadius: "10px"
    },
    line: {
      borderLeft: "1px dotted rgba(0, 0, 0, 0.5)"
    },
    dot: {
      border: "5px solid rgba(0, 0, 0, 0.5)"
    }
  },
3780
  keepAspectRatio: true,
  verticalRatio: 0.5
};
3784
var camera = graph ? graph.getCameraPosition() : null;
3786
// create our graph
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
3790
if (camera) graph.setCameraPosition(camera); // restore camera position
3792
document.getElementById("style").onchange = drawVisualization;
3794}
3795
3796window.addEventListener("load", () =&gt; {
drawVisualization();
3798});
3799'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
3805}
3806div#info {
width: 600px;
text-align: center;
margin-top: 2em;
font-size: 1.2em;
3811}
3812"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;p&gt;
&lt;label for="style"&gt;
  Style:
  &lt;select id="style"&gt;
    &lt;option value="bar"&gt;bar&lt;/option&gt;
    &lt;option value="bar-color"&gt;bar-color&lt;/option&gt;
    &lt;option value="bar-size"&gt;bar-size&lt;/option&gt;
3823
    &lt;option value="dot"&gt;dot&lt;/option&gt;
    &lt;option value="dot-line"&gt;dot-line&lt;/option&gt;
    &lt;option value="dot-color"&gt;dot-color&lt;/option&gt;
    &lt;option value="dot-size"&gt;dot-size&lt;/option&gt;
3828
    &lt;option value="grid"&gt;grid&lt;/option&gt;
    &lt;option value="line"&gt;line&lt;/option&gt;
    &lt;option value="surface"&gt;surface&lt;/option&gt;
  &lt;/select&gt;
&lt;/label&gt;
3834&lt;/p&gt;
3835
3836&lt;div id="mygraph"&gt;&lt;/div&gt;
3837
3838&lt;div id="info"&gt;Hover the mouse cursor over the graph to see tooltips.&lt;/div&gt;
3839'
                /></form
            ></span>
          </div>
          <a href="graph3d/11_tooltips.html"
            ><div class="example-image">
              <img
                src="thumbnails/c053a6307bb0b5efafd118ab07192cd5d3bf6c6b6bbc742d10d8eda2d7bb04e7.png"
                alt="Tooltips"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/rotateAxisLabels/rotateAxisLabels.html"
              >WORLD INDEXES BY COUNTRY 2018 MID-YEAR</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var graph = null;
3865
3866function drawVisualization() {
var style = document.getElementById("style").value;
var withValue =
  ["bar-color", "bar-size", "dot-size", "dot-color"].indexOf(style) != -1;
3870
// Create and populate a data table.
var data = new vis.DataSet();
var extra_content = [];
data.add({
  id: "c57621e7d6cfb81",
  x: 0,
  y: -1,
  z: 0,
  extra: extra_content[0]
});
var axis_x = {};
var axis_y = {};
var file1 = "world_index_data_small.json?nocache=" + Math.random();
var _width = "1000px";
var _height = "1000px";
3886
var request = new XMLHttpRequest();
request.open("GET", file1, true);
3889
function axisLoad(axis_obj, callback) {
  Object.keys(axis_obj).forEach(function(field, i) {
    callback(axis_obj[field], i);
  });
}
3895
request.onload = function() {
  if (request.status &gt;= 200 &amp;&amp; request.status &lt; 400) {
    var result = JSON.parse(request.responseText);
    axisLoad(result.graph3d, function(object, i) {
      data.add(object);
    });
    axisLoad(result.axis_x, function(object, i) {
      axis_x[i] = object;
    });
    axisLoad(result.axis_y, function(object, i) {
      axis_y[i] = object;
    });
    data.remove("c57621e7d6cfb81");
  } else {
    console.log("ERR: request.onload");
  }
};
request.onerror = function() {
  console.log("ERR: Connection request");
};
request.send();
3917
var options = {
  width: _width,
  height: _height,
  style: style,
  showPerspective: false,
  showLegend: true,
  showGrid: true,
  showShadow: true,
  xLabel: "COUNTRY",
  yLabel: "INDEX",
  zLabel: "PERCENT",
  legendLabel: "value",
  rotateAxisLabels: true,
  axisColor: "#41413C",
  axisFontType: "courier",
  axisFontSize: 30,
  gridColor: "#5590CC",
  backgroundColor: "white",
  dataColor: {
    fill: "green",
    stroke: "green",
    strokeWidth: 2
  },
  cameraPosition: {
    horizontal: 0,
    vertical: 2,
    distance: 2.3
  },
  tooltip: function(point) {
    return (
      "value: &lt;b&gt;" +
      point.z +
      "%&lt;/b&gt;&lt;br&gt;" +
      axis_x[point.x] +
      "&lt;/b&gt;&lt;br&gt;" +
      axis_y[point.y]
    );
  },
  tooltipDelay: 0,
  tooltipStyle: {
    content: {
      background: "rgba(255, 255, 255, 0.7)",
      padding: "10px",
      borderRadius: "10px"
    },
    line: {
      borderLeft: "1px dotted rgba(0, 0, 0, 0.5)"
    },
    dot: {
      border: "5px solid rgba(0, 0, 0, 0.5)"
    }
  },
  keepAspectRatio: false,
  verticalRatio: 0.5,
  xBarWidth: 1,
  yBarWidth: 1,
  xStep: 1,
  yStep: 1,
  xCenter: "50%",
  yCenter: "25%",
  xValueLabel: function(value) {
    return "" + axis_x[value.toString()];
  },
  yValueLabel: function(value) {
    return "" + axis_y[value.toString()];
  },
  zValueLabel: function(value) {
    return value + "%";
  }
};
var camera = graph ? graph.getCameraPosition() : null;
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera);
document.getElementById("style").onchange = drawVisualization;
3993}
3994
3995window.addEventListener("load", () =&gt; {
drawVisualization();
3997});
3998'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
4004}
4005div#info {
width: 500px;
text-align: center;
margin-top: 2em;
font-size: 1.2em;
4010}
4011span#graphHead,
4012span#updateTime,
4013span#startTime,
4014span#endTime {
font: 10pt arial;
font-weight: bold;
text-align: center;
4018}
4019"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;p&gt;
&lt;label for="style"&gt;
  Style:
  &lt;select id="style"&gt;
    &lt;option value="bar"&gt;bar&lt;/option&gt;
    &lt;option value="dot"&gt;dot&lt;/option&gt;
    &lt;option value="dot-line"&gt;dot-line&lt;/option&gt;
  &lt;/select&gt;
&lt;/label&gt;
4032&lt;/p&gt;
4033&lt;div style="text-align: center; width: 1024px;"&gt;
&lt;span id="graphHead"&gt;WORLD INDEXES BY COUNTRY 2018 MID-YEAR&lt;/span&gt;&lt;br /&gt;
&lt;span id="updateTime"&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span id="startTime"&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span id="endTime"&gt;&lt;/span&gt;&lt;br /&gt;
&lt;div id="mygraph" height="470px"&gt;&lt;/div&gt;
&lt;div id="info"&gt;Hover the mouse cursor over the graph to see tooltips.&lt;/div&gt;
4040&lt;/div&gt;
4041'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | WORLD INDEXES BY COUNTRY 2018 MID-YEAR"
                />
              </form>
4052
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\ndiv#info {\n  width: 500px;\n  text-align: center;\n  margin-top: 2em;\n  font-size: 1.2em;\n}\nspan#graphHead,\nspan#updateTime,\nspan#startTime,\nspan#endTime {\n  font: 10pt arial;\n  font-weight: bold;\n  text-align: center;\n}\n","css_external":"","html":"&lt;p&gt;\n  &lt;label for=\"style\"&gt;\n    Style:\n    &lt;select id=\"style\"&gt;\n      &lt;option value=\"bar\"&gt;bar&lt;/option&gt;\n      &lt;option value=\"dot\"&gt;dot&lt;/option&gt;\n      &lt;option value=\"dot-line\"&gt;dot-line&lt;/option&gt;\n    &lt;/select&gt;\n  &lt;/label&gt;\n&lt;/p&gt;\n&lt;div style=\"text-align: center; width: 1024px;\"&gt;\n  &lt;span id=\"graphHead\"&gt;WORLD INDEXES BY COUNTRY 2018 MID-YEAR&lt;/span&gt;&lt;br /&gt;\n  &lt;span id=\"updateTime\"&gt;&lt;/span&gt;&lt;br /&gt;\n  &lt;span id=\"startTime\"&gt;&lt;/span&gt;&lt;br /&gt;\n  &lt;span id=\"endTime\"&gt;&lt;/span&gt;&lt;br /&gt;\n  &lt;div id=\"mygraph\" height=\"470px\"&gt;&lt;/div&gt;\n  &lt;div id=\"info\"&gt;Hover the mouse cursor over the graph to see tooltips.&lt;/div&gt;\n&lt;/div&gt;\n","js":"var graph = null;\n\nfunction drawVisualization() {\n  var style = document.getElementById(\"style\").value;\n  var withValue =\n    [\"bar-color\", \"bar-size\", \"dot-size\", \"dot-color\"].indexOf(style) != -1;\n\n  // Create and populate a data table.\n  var data = new vis.DataSet();\n  var extra_content = [];\n  data.add({\n    id: \"c57621e7d6cfb81\",\n    x: 0,\n    y: -1,\n    z: 0,\n    extra: extra_content[0]\n  });\n  var axis_x = {};\n  var axis_y = {};\n  var file1 = \"world_index_data_small.json?nocache=\" + Math.random();\n  var _width = \"1000px\";\n  var _height = \"1000px\";\n\n  var request = new XMLHttpRequest();\n  request.open(\"GET\", file1, true);\n\n  function axisLoad(axis_obj, callback) {\n    Object.keys(axis_obj).forEach(function(field, i) {\n      callback(axis_obj[field], i);\n    });\n  }\n\n  request.onload = function() {\n    if (request.status &gt;= 200 &amp;&amp; request.status &lt; 400) {\n      var result = JSON.parse(request.responseText);\n      axisLoad(result.graph3d, function(object, i) {\n        data.add(object);\n      });\n      axisLoad(result.axis_x, function(object, i) {\n        axis_x[i] = object;\n      });\n      axisLoad(result.axis_y, function(object, i) {\n        axis_y[i] = object;\n      });\n      data.remove(\"c57621e7d6cfb81\");\n    } else {\n      console.log(\"ERR: request.onload\");\n    }\n  };\n  request.onerror = function() {\n    console.log(\"ERR: Connection request\");\n  };\n  request.send();\n\n  var options = {\n    width: _width,\n    height: _height,\n    style: style,\n    showPerspective: false,\n    showLegend: true,\n    showGrid: true,\n    showShadow: true,\n    xLabel: \"COUNTRY\",\n    yLabel: \"INDEX\",\n    zLabel: \"PERCENT\",\n    legendLabel: \"value\",\n    rotateAxisLabels: true,\n    axisColor: \"#41413C\",\n    axisFontType: \"courier\",\n    axisFontSize: 30,\n    gridColor: \"#5590CC\",\n    backgroundColor: \"white\",\n    dataColor: {\n      fill: \"green\",\n      stroke: \"green\",\n      strokeWidth: 2\n    },\n    cameraPosition: {\n      horizontal: 0,\n      vertical: 2,\n      distance: 2.3\n    },\n    tooltip: function(point) {\n      return (\n        \"value: &lt;b&gt;\" +\n        point.z +\n        \"%&lt;/b&gt;&lt;br&gt;\" +\n        axis_x[point.x] +\n        \"&lt;/b&gt;&lt;br&gt;\" +\n        axis_y[point.y]\n      );\n    },\n    tooltipDelay: 0,\n    tooltipStyle: {\n      content: {\n        background: \"rgba(255, 255, 255, 0.7)\",\n        padding: \"10px\",\n        borderRadius: \"10px\"\n      },\n      line: {\n        borderLeft: \"1px dotted rgba(0, 0, 0, 0.5)\"\n      },\n      dot: {\n        border: \"5px solid rgba(0, 0, 0, 0.5)\"\n      }\n    },\n    keepAspectRatio: false,\n    verticalRatio: 0.5,\n    xBarWidth: 1,\n    yBarWidth: 1,\n    xStep: 1,\n    yStep: 1,\n    xCenter: \"50%\",\n    yCenter: \"25%\",\n    xValueLabel: function(value) {\n      return \"\" + axis_x[value.toString()];\n    },\n    yValueLabel: function(value) {\n      return \"\" + axis_y[value.toString()];\n    },\n    zValueLabel: function(value) {\n      return value + \"%\";\n    }\n  };\n  var camera = graph ? graph.getCameraPosition() : null;\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n  if (camera) graph.setCameraPosition(camera);\n  document.getElementById(\"style\").onchange = drawVisualization;\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | WORLD INDEXES BY COUNTRY 2018 MID-YEAR"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var graph = null;
4068
4069function drawVisualization() {
var style = document.getElementById("style").value;
var withValue =
  ["bar-color", "bar-size", "dot-size", "dot-color"].indexOf(style) != -1;
4073
// Create and populate a data table.
var data = new vis.DataSet();
var extra_content = [];
data.add({
  id: "c57621e7d6cfb81",
  x: 0,
  y: -1,
  z: 0,
  extra: extra_content[0]
});
var axis_x = {};
var axis_y = {};
var file1 = "world_index_data_small.json?nocache=" + Math.random();
var _width = "1000px";
var _height = "1000px";
4089
var request = new XMLHttpRequest();
request.open("GET", file1, true);
4092
function axisLoad(axis_obj, callback) {
  Object.keys(axis_obj).forEach(function(field, i) {
    callback(axis_obj[field], i);
  });
}
4098
request.onload = function() {
  if (request.status &gt;= 200 &amp;&amp; request.status &lt; 400) {
    var result = JSON.parse(request.responseText);
    axisLoad(result.graph3d, function(object, i) {
      data.add(object);
    });
    axisLoad(result.axis_x, function(object, i) {
      axis_x[i] = object;
    });
    axisLoad(result.axis_y, function(object, i) {
      axis_y[i] = object;
    });
    data.remove("c57621e7d6cfb81");
  } else {
    console.log("ERR: request.onload");
  }
};
request.onerror = function() {
  console.log("ERR: Connection request");
};
request.send();
4120
var options = {
  width: _width,
  height: _height,
  style: style,
  showPerspective: false,
  showLegend: true,
  showGrid: true,
  showShadow: true,
  xLabel: "COUNTRY",
  yLabel: "INDEX",
  zLabel: "PERCENT",
  legendLabel: "value",
  rotateAxisLabels: true,
  axisColor: "#41413C",
  axisFontType: "courier",
  axisFontSize: 30,
  gridColor: "#5590CC",
  backgroundColor: "white",
  dataColor: {
    fill: "green",
    stroke: "green",
    strokeWidth: 2
  },
  cameraPosition: {
    horizontal: 0,
    vertical: 2,
    distance: 2.3
  },
  tooltip: function(point) {
    return (
      "value: &lt;b&gt;" +
      point.z +
      "%&lt;/b&gt;&lt;br&gt;" +
      axis_x[point.x] +
      "&lt;/b&gt;&lt;br&gt;" +
      axis_y[point.y]
    );
  },
  tooltipDelay: 0,
  tooltipStyle: {
    content: {
      background: "rgba(255, 255, 255, 0.7)",
      padding: "10px",
      borderRadius: "10px"
    },
    line: {
      borderLeft: "1px dotted rgba(0, 0, 0, 0.5)"
    },
    dot: {
      border: "5px solid rgba(0, 0, 0, 0.5)"
    }
  },
  keepAspectRatio: false,
  verticalRatio: 0.5,
  xBarWidth: 1,
  yBarWidth: 1,
  xStep: 1,
  yStep: 1,
  xCenter: "50%",
  yCenter: "25%",
  xValueLabel: function(value) {
    return "" + axis_x[value.toString()];
  },
  yValueLabel: function(value) {
    return "" + axis_y[value.toString()];
  },
  zValueLabel: function(value) {
    return value + "%";
  }
};
var camera = graph ? graph.getCameraPosition() : null;
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera);
document.getElementById("style").onchange = drawVisualization;
4196}
4197
4198window.addEventListener("load", () =&gt; {
drawVisualization();
4200});
4201'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
4207}
4208div#info {
width: 500px;
text-align: center;
margin-top: 2em;
font-size: 1.2em;
4213}
4214span#graphHead,
4215span#updateTime,
4216span#startTime,
4217span#endTime {
font: 10pt arial;
font-weight: bold;
text-align: center;
4221}
4222"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;p&gt;
&lt;label for="style"&gt;
  Style:
  &lt;select id="style"&gt;
    &lt;option value="bar"&gt;bar&lt;/option&gt;
    &lt;option value="dot"&gt;dot&lt;/option&gt;
    &lt;option value="dot-line"&gt;dot-line&lt;/option&gt;
  &lt;/select&gt;
&lt;/label&gt;
4235&lt;/p&gt;
4236&lt;div style="text-align: center; width: 1024px;"&gt;
&lt;span id="graphHead"&gt;WORLD INDEXES BY COUNTRY 2018 MID-YEAR&lt;/span&gt;&lt;br /&gt;
&lt;span id="updateTime"&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span id="startTime"&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span id="endTime"&gt;&lt;/span&gt;&lt;br /&gt;
&lt;div id="mygraph" height="470px"&gt;&lt;/div&gt;
&lt;div id="info"&gt;Hover the mouse cursor over the graph to see tooltips.&lt;/div&gt;
4243&lt;/div&gt;
4244'
                /></form
            ></span>
          </div>
          <a href="graph3d/rotateAxisLabels/rotateAxisLabels.html"
            ><div class="example-image">
              <img
                src="thumbnails/0b719c793c5a7360ba565c3d9448a308fe2f150e90aee742099ab867df5c2e23.png"
                alt="WORLD INDEXES BY COUNTRY 2018 MID-YEAR"
              /></div></a></span
        ><span class="example-link"
          ><div>
            <a href="graph3d/14_zoom_ctrl_scroll.html">Zoom CTRL Scroll</a
            ><span class="playgrounds"
              ><form
                action="http://jsfiddle.net/api/post/library/pure/"
                method="post"
                target="_blank"
              >
                <button class="icon jsfiddle" alt="JSFiddle" title="JSFiddle">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="js"
                  value='var data = null;
4269var graph = null;
4270
4271function custom(x, y) {
return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
4273}
4274
4275// Called when the Visualization API is loaded.
4276function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var counter = 0;
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x &lt; axisMax; x += axisStep) {
  for (var y = 0; y &lt; axisMax; y += axisStep) {
    var value = custom(x, y);
    data.add({ id: counter++, x: x, y: y, z: value, style: value });
  }
}
4290
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "surface",
  showPerspective: true,
  showGrid: true,
  showShadow: false,
  keepAspectRatio: true,
  verticalRatio: 0.5,
  ctrlToZoom: true
};
4303
// Instantiate our graph object.
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
4307}
4308
4309window.addEventListener("load", () =&gt; {
drawVisualization();
4311});
4312'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
4318}
4319"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
4324
4325&lt;div id="info"&gt;&lt;/div&gt;
4326'
                /><input
                  type="hidden"
                  name="resources"
                  value="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"
                /><input type="hidden" name="wrap" value="b" /><input
                  type="hidden"
                  name="title"
                  value="Graph 3D | Zoom CTRL Scroll"
                />
              </form>
4337
              <form
                action="https://codepen.io/pen/define"
                method="post"
                target="_blank"
              >
                <button class="icon codepen" alt="CodePen" title="CodePen">
                  &#xA0;</button
                ><input
                  type="hidden"
                  name="data"
                  value='{"css":"body {\n  font: 10pt arial;\n}\n","css_external":"","html":"&lt;div id=\"mygraph\"&gt;&lt;/div&gt;\n\n&lt;div id=\"info\"&gt;&lt;/div&gt;\n","js":"var data = null;\nvar graph = null;\n\nfunction custom(x, y) {\n  return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;\n}\n\n// Called when the Visualization API is loaded.\nfunction drawVisualization() {\n  // Create and populate a data table.\n  data = new vis.DataSet();\n  // create some nice looking data with sin/cos\n  var counter = 0;\n  var steps = 50; // number of datapoints will be steps*steps\n  var axisMax = 314;\n  var axisStep = axisMax / steps;\n  for (var x = 0; x &lt; axisMax; x += axisStep) {\n    for (var y = 0; y &lt; axisMax; y += axisStep) {\n      var value = custom(x, y);\n      data.add({ id: counter++, x: x, y: y, z: value, style: value });\n    }\n  }\n\n  // specify options\n  var options = {\n    width: \"600px\",\n    height: \"600px\",\n    style: \"surface\",\n    showPerspective: true,\n    showGrid: true,\n    showShadow: false,\n    keepAspectRatio: true,\n    verticalRatio: 0.5,\n    ctrlToZoom: true\n  };\n\n  // Instantiate our graph object.\n  var container = document.getElementById(\"mygraph\");\n  graph = new vis.Graph3d(container, data, options);\n}\n\nwindow.addEventListener(\"load\", () =&gt; {\n  drawVisualization();\n});\n","js_external":"https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js","title":"Graph 3D | Zoom CTRL Scroll"}'
                /><input
                  type="hidden"
                  name="js"
                  value='var data = null;
4353var graph = null;
4354
4355function custom(x, y) {
return Math.sin(x / 50) * Math.cos(y / 50) * 50 + 50;
4357}
4358
4359// Called when the Visualization API is loaded.
4360function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var counter = 0;
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x &lt; axisMax; x += axisStep) {
  for (var y = 0; y &lt; axisMax; y += axisStep) {
    var value = custom(x, y);
    data.add({ id: counter++, x: x, y: y, z: value, style: value });
  }
}
4374
// specify options
var options = {
  width: "600px",
  height: "600px",
  style: "surface",
  showPerspective: true,
  showGrid: true,
  showShadow: false,
  keepAspectRatio: true,
  verticalRatio: 0.5,
  ctrlToZoom: true
};
4387
// Instantiate our graph object.
var container = document.getElementById("mygraph");
graph = new vis.Graph3d(container, data, options);
4391}
4392
4393window.addEventListener("load", () =&gt; {
drawVisualization();
4395});
4396'
                /><input
                  type="hidden"
                  name="css"
                  value="body {
font: 10pt arial;
4402}
4403"
                /><input
                  type="hidden"
                  name="html"
                  value='&lt;div id="mygraph"&gt;&lt;/div&gt;
4408
4409&lt;div id="info"&gt;&lt;/div&gt;
4410'
                /></form
            ></span>
          </div>
          <a href="graph3d/14_zoom_ctrl_scroll.html"
            ><div class="example-image">
              <img
                src="thumbnails/9d3da0f15b9ed2d99a43702eab6e272430988bf6f5b634baeed4a4232208502a.png"
                alt="Zoom CTRL Scroll"
              /></div></a
        ></span>
      </div>
    </div>
  </div>
</body>
4425</html>
1	`<html>`
2	`<head>`
3	`<meta charset="utf-8" />`
4	`<title>Vis Graph3D Examples</title>`
5
6	`<meta http-equiv="X-UA-Compatible" content="IE=edge" />`
7	`<meta name="viewport" content="width=device-width, initial-scale=1" />`
8
9	`<style>`
10	`body {`
11	`margin: 50px auto 200px;`
12	`min-width: calc(200px + 2em);`
13	`width: calc(100vw - 200px);`
14	`}`
15
16	`a {`
17	`color: #2b7ce9;`
18	`}`
19	`a:visited {`
20	`color: #46417a;`
21	`}`
22
23	`.example-link {`
24	`position: relative;`
25	`margin: 1em;`
26	`width: 200px;`
27
28	`display: inline-block;`
29	`text-align: center;`
30	`}`
31
32	`.example-link .example-image {`
33	`position: relative;`
34	`margin-top: 1ex;`
35	`width: 200px;`
36	`height: 200px;`
37	`}`
38	`.example-link .example-image > img {`
39	`position: absolute;`
40	`top: 0px;`