D3 Examples - d3 blocks on a-boxes

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

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

xxxxxxxxxx
 
<!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', {x: 0.96, y: 0.5, z: 0.05})
                .attr('position', () => ({
                  x: Math.random() * 5 - 2.5,
                  y: Math.random() * 5,
                  z: Math.random() * -5
                }))
                .attr('dynamic-body', '')
                // .attr('material', (d) => ({src: `url(https://bl.ocks.org/${d.owner.login}/raw/${d.id}/${d.sha}/thumbnail.png)`}));
                .attr('material', (d) => ({src: `url(https://bl.ocks.org/${d.owner.login}/raw/${d.id}/thumbnail.png)`}));
        });
      }
​
      var sceneEl = document.querySelector('a-scene');
      if (sceneEl.hasLoaded) {
        render();
      } else {
        sceneEl.addEventListener('loaded', render);
      }
    </script>
  </body>
</html>
​
    