| license: mit |
Testing out aframe.io with d3.js.
Although a-frame has its animation method based on tween.js, we can use d3's transition method to animate the DOM.
Built with blockbuilder.org
forked from enjalot's block: aframe + d3 test
forked from YasufumiSaito's block: a-frame + 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; } | |
| </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="#FFF" position="-1 1 0" type="ambient"></a-light> | |
| <a-entity light="type: point; color: #FFF; intensity: 0.3" position="0 3 0"></a-entity> | |
| <!-- Sky --> | |
| <a-sky color="#00004d"></a-sky> | |
| </a-scene> | |
| <script> | |
| // random data | |
| var data = []; | |
| for (var i = 0; i < 50; i++) { | |
| data.push(Math.random()) | |
| } | |
| // Scale the height of bars | |
| var hScale = d3.scale.linear() | |
| .domain([d3.min(data), d3.max(data)]) | |
| .range([0, 10]) | |
| // Set color scale | |
| var colors = d3.scale.linear() | |
| .domain([0, data.length*.33, data.length*.66, data.length]) | |
| .range(['#B58929','#C61C6F', '#268BD2', '#85992C']) | |
| // Select the scene object just like an svg | |
| var scene = d3.select("a-scene") | |
| // Use d3's enter/update/exit pattern to draw and bind the dom elements | |
| var bars = scene.selectAll("a-cylinder.bar") | |
| .data(data) | |
| bars.enter() | |
| .append("a-cylinder") | |
| .classed("bar", true) | |
| // Set attributes on the cubes | |
| bars.attr({ | |
| position: function(d,i) { | |
| // cubes are positioned by their center so we | |
| // offset for their height | |
| var y = 1 + hScale(d)/2; | |
| // lets place the bars all around our camera | |
| var radius = 15; | |
| //var x = i - data.length/2; | |
| var x = radius * Math.cos(i/data.length * 2 * Math.PI); | |
| var z = radius * Math.sin(i/data.length * 2 * Math.PI); | |
| return x + " " + y + " " + z | |
| }, | |
| rotation: function(d,i) { | |
| var x = 0; | |
| var z = 0; | |
| var y = -(i/data.length)*360; | |
| return x + " " + y + " " + z | |
| }, | |
| width: function(d) { return 0.5}, | |
| depth: function(d) { return 0.9}, | |
| height: 0, | |
| color: function(d,i) { return colors(i);} | |
| }) | |
| .transition() | |
| .attr("height", function(d) { return hScale(d) }) | |
| .delay(function(d, i) { | |
| return i * 100; | |
| }) | |
| .duration(7000) | |
| .ease("elastic") | |
| </script> | |
| </body> |