YasufumiSaito/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>