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>