d3 blocks on a-boxes 4

block a-boxes in a circle, dropped from great height (so they bounce!)

data-driven positions using the index value of the datum in the blocks data

all the blocks with thumbnail images created during the 2016 #d3unconf

here we use aframe's a-boxes, which are kind of like SVG rects

a fork of aframe + d3 + bl.ocks from @donrmccurdy

falling blocks brought to you by the aframe-physics-system, also from @donrmccurdy

inspired by the conversations at the 3d and VR 11am session in the Alcatraz Room at the 2016 d3 unconference

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame / Bl.ocks / D3</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.js"></script>
    <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-physics-system/v1.0.3/dist/aframe-physics-system.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-plane static-body color="#CCCCCC" height="100" width="100" rotation="-90 0 0"></a-plane>
    </a-scene>
    <script>
      function render () {
        d3.json('blocks.json', function(blocks) {
          // in radians
          const arcScale = d3.scaleLinear()
            .domain([0, blocks.length])
            .range([0, 2 * Math.PI]);

var sceneEl = document.querySelector('a-scene');
      if (sceneEl.hasLoaded) {
        render();
      } else {
        sceneEl.addEventListener('loaded', render);
      }
    </script>
  </body>
</html>

Updated missing url https://cdn.rawgit.com/donmccurdy/aframe-physics-system/v1.0.3/dist/aframe-physics-system.min.js to https://cdn.jsdelivr.net/gh/donmccurdy/aframe-physics-system/v1.0.3/dist/aframe-physics-system.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.js

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

https://cdn.rawgit.com/donmccurdy/aframe-physics-system/v1.0.3/dist/aframe-physics-system.min.js