D3 Examples - VR graph

VR graph
Since AFrame works with DOM elements, you can use d3's selection API to generate and modify 3D elements, as well as handle "mouse" events (including the VR friendly "fuse cursor") as if it was SVG.
xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; background-color: white;}
  </style>
</head>
​
<body>
  <a-scene>
      <!-- Camera with customized cursor -->
      <a-camera position="0 1.8 0" cursor-visible="true" cursor-scale="2" cursor-color="#4CC3D9" cursor-offset="2" cursor-maxdistance="100" cursor-opacity="0.5" cursor-fuse="true"></a-camera>
      <a-light color="#da47da" position="0 5 0" type="ambient"></a-light>
        <a-entity camera look-controls wasd-controls></a-entity>
        <a-entity light="type: point; color: #EEE; intensity: 0.5" position="0 3 0"></a-entity>
      <!-- Sky -->
      <a-sky color="#c8f8e0"></a-sky>
  </a-scene>
  <script>
    
var scene = d3.select("a-scene");
    
var color = d3.scale.category20();
​
    // see https://github.com/d3/d3/wiki/Force-Layout for params
var force = d3.layout.force()
    .charge(-120)
    .linkDistance(30);
​
d3.json("miserables.json", function(error, graph) {
  if (error) throw error;
​
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();
​
  var link = scene.selectAll(".link")
      .data(graph.links)
    .enter().append("a-entity")
      .attr("class", "link")
      .attr("geometry", "primitive: cylinder")
      .attr("material", "side: double")
      .attr("openEnded", "true")
      .attr("radius", function(d) { return Math.sqrt(d.value); });
​
  var node = scene.selectAll(".node")
      .data(graph.nodes)
    .enter().append("a-sphere")
      .attr("class", "node")
      .attr("r", 5)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);
  // https://aframe.io/docs/components/geometry.html#Tube
​
  node.append("circle")
      .text(function(d) { return d.name; });
​
  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; })
        .attr("position", function(d) { return d.source.x+" " +d.target.y+" -5"; });;
​
    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("position", function(d) { return d.x+" " +d.y+" -5"; });
  });
});
​
  </script>
</body>
​
    