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
Last active
December 19, 2015 06:46
-
-
Save YasufumiSaito/35b59c0b074cac700798 to your computer and use it in GitHub Desktop.
a-frame + d3 test
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment