d3 blocks on a-boxes 4 by micahstubbs

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

index.html

<!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.rawgit.com/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]);

          const r = 3;
          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', (d, i) => ({
                  // x: Math.random() * 5 - 2.5,
                  x: (6 - (2 * Math.PI)) + (r * Math.cos(arcScale(i))),
                  // y: Math.random() * 5,
                  // y: 5,
                  y: blocks.length - i + 5,
                  // z: Math.random() * -5
                  z: (-1.5 * Math.PI) + (r * Math.sin(arcScale(i)))
                }))
                .attr('dynamic-body', '')
                // .attr('material', (d) => ({src: `url(//bl.ocks.org/${d.owner.login}/raw/${d.id}/${d.sha}/thumbnail.png)`}));
                .attr('material', (d) => ({src: `url(//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>

blocks.json

[
  {"id":"3757fe53ea94da4100db2e5071ea8289","owner":{"login":"micahstubbs"},"description":"d3 blocks on a-boxes"},
  {"id":"e70e14483fe01eb0a3ea7d1d46a30571","owner":{"login":"vasturiano"},"description":"Musical Hexagons"},
  {"id":"0ba5ee8bd3773d70462523679d4ef5a4","owner":{"login":"erlenstar"},"description":"Delaunay Force Mesh II"},
  {"id":"de2b023d968abb7276b894409efdac56","owner":{"login":"enjalot"},"description":"merging selections"},
  {"id":"7d3f8beb9faa183fc8d4fe3fd1610e00","owner":{"login":"enjalot"},"description":"d3 yoga"},
  {"id":"57fbb830ba7e62caa46a82891168bc29","owner":{"login":"veltman"},"description":"CMYK zoom"},
  {"id":"e8ccca52559796be775553b467593a9f","owner":{"login":"syntagmatic"},"description":"Continuous Legend"},
  {"id":"6c73711f8f24af9808a9031a69f75b18","owner":{"login":"erlenstar"},"description":"Stereographic"},
  {"id":"a1eb3bdecd2ab1be1de2425a260cc0f7","owner":{"login":"EfratVil"},"description":"Spirograph Geometric Flowers"},
  {"id":"8c5a0e697673fd676be6823589e1ce31","owner":{"login":"jermspeaks"},"description":"stroke-dash-array"},
  {"id":"b04d673fbfc665f2c98f382e2c79a9ad","owner":{"login":"git-ashish"},"description":"Voronoi Tessellation"},
  {"id":"1fd92b8c309a0fdc71b0a64c788a70e7","owner":{"login":"git-ashish"},"description":"Canvas Voronoi"},
  {"id":"6a6c2f11f9493adba658003a5a18a107","owner":{"login":"git-ashish"},"description":"Voronoi Labels"},
  {"id":"a5d147cd45c624e8811238f0a5480439","owner":{"login":"LuisSevillano"},"description":"Comunidad Valenciana population(d3v4)"},
  {"id":"cd0c38a20141e997e926592264067db3","owner":{"login":"ericsoco"},"description":"cluster force"},
  {"id":"50a350e86de82278ffb2df248499d3e2","owner":{"login":"veltman"},"description":"CMYK halftone printing"},
  {"id":"32f369bb437d7c23198b9b9ccc8d4751","owner":{"login":"micahstubbs"},"description":"d3.unconf 2016, v11"},
  {"id":"a7495ca3d5b322a6697530feb62fceef","owner":{"login":"Fil"},"description":"Painting Manhattan-distance Voronoi"},
  {"id":"99767e64051096388078913afca3ff4e","owner":{"login":"schnerd"},"description":"Choropleth with d3-cluster-scale"},
  {"id":"82144236b9a920f77e3af1776d265c57","owner":{"login":"sxywu"},"description":"d3.unconf 2016, v10"}
]