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.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) {
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(//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>
[
{"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"}
]
[
{"id":"5d06dbff494794af05fa9a76450230de","sha":"85d21e9e8f6e6617a70282459b665a6653951a07","owner":{"login":"borgar"},"description":"Political Compass Heatmap"},
{"id":"4062045","sha":"5916d145c8c048a6e3086915a6be464467391c62","owner":{"login":"mbostock"},"description":"Force-Directed Graph"},
{"id":"4060606","sha":"25385f68a3be5c9dbe36af27fc2498fb2aab6bc0","owner":{"login":"mbostock"},"description":"Choropleth"},
{"id":"4063269","sha":"e87e5bbd6ba610d3f693dd42c00c7fc583fda5aa","owner":{"login":"mbostock"},"description":"Bubble Chart"},
{"id":"4063318","sha":"c0923c4d3d8a6b693bb5c384bce33fc0374486f2","owner":{"login":"mbostock"},"description":"Calendar View"},
{"id":"3885304","sha":"66d14e2d7a86cf393c133b303bbbc74d5e888628","owner":{"login":"mbostock"},"description":"Bar Chart"},
{"id":"3883245","sha":"2a32b8e15dae89d502cceb66a7ef3f86c637bc48","owner":{"login":"mbostock"},"description":"Line Chart"},
{"id":"1136236","sha":"5e4a89500e4afb616d923c6eeefa9b2c7ce94814","owner":{"login":"mbostock"},"description":"Spermatozoa"},
{"id":"4061502","sha":"88bf552c188c97c3357fe56b3fe3e43422881e0e","owner":{"login":"mbostock"},"description":"Box Plots"},
{"id":"4063550","sha":"9721874a160e5b8fef5ef18739916f75a41dcb6e","owner":{"login":"mbostock"},"description":"Radial Reingold–Tilford Tree"},
{"id":"7881887","sha":"c4cad93c5eaf159cccb8d6858d72894c45fbb6be","owner":{"login":"mbostock"},"description":"Clustered Force Layout III"},
{"id":"4062085","sha":"dbd4a66dcadd54fa189f84c106795c644401e753","owner":{"login":"mbostock"},"description":"Population Pyramid"},
{"id":"1353700","sha":"27a5e7be5770fcdfcacdac48103193ff72ffc3c4","owner":{"login":"mbostock"},"description":"Epicyclic Gearing"},
{"id":"835cf2925ba217821434","sha":"e839a07b69aa158804f66f21d8de71956d262e90","owner":{"login":"mbostock"},"description":"N-Body Problem"},
{"id":"3943967","sha":"0bc8c912e1a3176de4bf65e25782fd77c8f5e211","owner":{"login":"mbostock"},"description":"Stacked-to-Grouped Bars"},
{"id":"3007180","sha":"2f604adf60cc5d1c82426c52471df35bbc2d47a2","owner":{"login":"mbostock"},"description":"Exoplanets"},
{"id":"4061961","sha":"6eb742223b9795260ba62150196ed0ae4a461e39","owner":{"login":"mbostock"},"description":"Bullet Charts"},
{"id":"1096355","sha":"e1d22f1ab1a3ae84f13a701dae53158d1566e6c9","owner":{"login":"mbostock"},"description":"Polar Clock"},
{"id":"4330486","sha":"b42717fccd437cec566434aaf2a05afd0b40d292","owner":{"login":"mbostock"},"description":"Bivariate Hexbin Map"},
{"id":"5944371","sha":"cd32da51fff1ba792e74592d9b07fa6f7497275c","owner":{"login":"mbostock"},"description":"Bilevel Partition"},
{"id":"1044242","sha":"8f22cf2264e1f6ec6cb233c4b49333fb8f75bb99","owner":{"login":"mbostock"},"description":"Hierarchical Edge Bundling"},
{"id":"6476579","sha":"7d0158c142ca6bdbb085132c9daa59855f3552cb","owner":{"login":"Caged"},"description":"Using d3-tip to add tooltips to a d3 bar chart"},
{"id":"78bd3dade9593896a59d","sha":"da0635e023bf6b827f368aac6bdca9597b4903ec","owner":{"login":"aaizemberg"},"description":"categorical colors"},
{"id":"34f08d5e11952a80609169b7917d4172","sha":"8c077d84249752e4ed16354aa25040590243ce4b","owner":{"login":"mbostock"},"description":"Brush & Zoom"},
{"id":"4165404","sha":"c9d1f8d69fcdf17b352235419c190e1a36645ce8","owner":{"login":"mbostock"},"description":"Rainbow Worm"},
{"id":"5001347","sha":"8343076d5630a0d4759e47877f4735871651cd79","owner":{"login":"rkirsling"},"description":"Directed Graph Editor"},
{"id":"4339083","sha":"e66cf1b6e2a69d9129a9c015cf5e84847284f404","owner":{"login":"mbostock"},"description":"Collapsible Tree"},
{"id":"3048450","sha":"24871176007fd6732123aaebd02e7db2de9b2e10","owner":{"login":"mbostock"},"description":"Histogram"},
{"id":"5e5ce9beee483220e2f6","sha":"4c2e1e4b0ed515d9d9de26d0996519fc16c2ae43","owner":{"login":"brattonc"},"description":"D3 Liquid Fill Gauge"},
{"id":"4183330","sha":"08e28128b934d286b3e91f7e94487fbefc64676f","owner":{"login":"mbostock"},"description":"World Tour"},
{"id":"02d893e3486c70c4475f","sha":"26cf20290389430baed71bf36be44faf7dda6d8d","owner":{"login":"mbostock"},"description":"Line Chart 4.0"},
{"id":"3057239","sha":"519a7391128e6eeca7cbc54f47a5599b6540aed8","owner":{"login":"mbostock"},"description":"Geodesic Rainbow"},
{"id":"857b5b0bf170b236787b","sha":"53be6af74baa92e5bdd48c54744cba29602152cf","owner":{"login":"awoodruff"},"description":"Value-by-alpha map example"},
{"id":"7090426","sha":"8fce22c9e21711c757ee8a0df7dba5a42dea0d9c","owner":{"login":"kerryrodden"},"description":"Sequences sunburst"},
{"id":"497d327919606ba6024cb13b4bee38a4","sha":"ab21bf2c27f81fa2016dbe2fe804c5af6f7be4c9","owner":{"login":"Fil"},"description":"Raster Reprojection of panorama images (360°) with WebGL"},
{"id":"1256572","sha":"44c086a6019de56dce35a47197a19468b3e4ad57","owner":{"login":"mbostock"},"description":"D3 Show Reel"},
{"id":"7075823","sha":"415c00487a86fe6b85e667ece35160b8d8ad7efb","owner":{"login":"ndarville"},"description":"From CSV to HTML table (Simple)"},
{"id":"4060954","sha":"587baf9dbae7ac7af69297c652af36b6a868747a","owner":{"login":"mbostock"},"description":"Streamgraph"},
{"id":"3019563","sha":"0a647e163b8e86eb043621fe1208c81396dea407","owner":{"login":"mbostock"},"description":"Margin Convention"},
{"id":"3884955","sha":"95ccdeac9bbf2012300eb16f8109514e5ea234a2","owner":{"login":"mbostock"},"description":"Multi-Series Line Chart"}
]