a-frame + d3 test

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>

// 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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://aframe.io/releases/latest/aframe.min.js