d3 blocks on a-boxes

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

forked from micahstubbs's block: d3 blocks on a-boxes

<!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) {
          d3.select('a-scene')
            .append('a-entity')
              .attr('id', 'blocks')
            .selectAll('.block')
              .data(blocks)
              .enter()
              .append('a-box')
                .attr('class', 'block')
                .attr('scale', (d, i) => {
                   return {x: 0.25, y: i * 0.25, z: 0.25}
          			})
                .attr('position', (d, i) => ({
                  x: i/(0.5 * blocks.length) * 2.5, // * 5 - 2.5,
                  y: 0.5,
                  z: Math.random() * -8
                }))
          	    .attr('material', {'transparent':true, 'opacity':0.5})	
                // .attr('dynamic-body', '')
                // .attr('material', (d) => ({src: `url(https://bl.ocks.org/${d.owner.login}/raw/${d.id}/${d.sha}/thumbnail.png)`}));
                .attr('color', "black");
        });
      }

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