Testing out aframe.io with d3.js.
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.
Built with blockbuilder.org
forked from enjalot's block: aframe + d3 test
| <!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> |
| { | |
| "nodes":[ | |
| {"name":"Myriel","group":1}, | |
| {"name":"Napoleon","group":1}, | |
| {"name":"Mlle.Baptistine","group":1}, | |
| {"name":"Mme.Magloire","group":1}, | |
| {"name":"CountessdeLo","group":1} | |
| ], | |
| "links":[ | |
| {"source":1,"target":0,"value":1}, | |
| {"source":2,"target":0,"value":8}, | |
| {"source":3,"target":0,"value":10}, | |
| {"source":3,"target":2,"value":6}, | |
| {"source":4,"target":0,"value":1} | |
| ] | |
| } |