Graph 3D | Styling per Point

by denvut

HTML

<script src="https://visjs.github.io/vis-graph3d/dist/vis-graph3d.min.js"></script>
<p>
  <label for="style">
    Style:
    <select id="style">
      <option value="bar">bar</option>
      <option value="bar-color" selected>bar-color</option>
      <option value="bar-size">bar-size</option>

      <option value="dot">dot</option>
      <option value="dot-line">dot-line</option>
      <option value="dot-color">dot-color</option>
      <option value="dot-size">dot-size</option>

      <option value="grid">grid</option>
      <option value="line">line</option>
      <option value="surface">surface</option>
    </select>
  </label>
</p>

<p>
  <label for="perspective">
    <input type="checkbox" id="perspective" checked /> Show perspective
  </label>
</p>

<p>
  <label for="xBarWidth">
    Bar width X:
    <input type="text" id="xBarWidth" value style="width:50px;" /> (only
    applicable for styles &quot;bar&quot; and &quot;bar-color&quot;)
  </label>
</p>
<p>
  <label for="yBarWidth">
    Bar width Y:
    <input type="text" id="yBarWidth" value style="width:50px;" /> (only
    applicable for styles &quot;bar&quot; and &quot;bar-color&quot;)
  </label>
</p>

<div id="mygraph"></div>

<div id="info"></div>

CSS

body {
  font: 10pt arial;
}

JavaScript

var data = null;
var graph = null;

function custom(x, y) {
  return -Math.sin(x / Math.PI) * Math.cos(y / Math.PI) * 10 + 10;
}

// Called when the Visualization API is loaded.
function drawVisualization() {
  var style = document.getElementById("style").value;
  var showPerspective = document.getElementById("perspective").checked;
  var xBarWidth =
    parseFloat(document.getElementById("xBarWidth").value) || undefined;
  var yBarWidth =
    parseFloat(document.getElementById("yBarWidth").value) || undefined;
  var withValue =
    ["bar-color", "bar-size", "dot-size", "dot-color"].indexOf(style) != -1;

  // Create and populate a data table.
  data = [];
  colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];

  // 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 <= axisMax; x += axisStep) {
    for (var y = 0; y <= 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 });
      }
    }
  }

  // specify options
  var options = {
    width: "600px",
    height: "600px",
    style: style,
    xBarWidth: xBarWidth,
    yBarWidth: yBarWidth,
    showPerspective: showPerspective,
    showGrid: true,
    showShadow: false,
    keepAspectRatio: true,
    verticalRatio: 0.5
  };

  var camera = graph ? graph.getCameraPosition() : null;

  // create our graph
  var container = document.getElementById("mygraph");
  graph = new vis.Graph3d(container, data, options);

  if (camera) graph.setCameraPosition(camera); // restore camera position

  document.getElementById("style").onchange = drawVisualization;
  document.getElementById("perspective").onchange = drawVisualization;
 ...