| license: mit | |
| border: no |
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
| [ | |
| {"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"} | |
| ] |
| <!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(http://bl.ocks.org/${d.owner.login}/raw/${d.id}/${d.sha}/thumbnail.png)`})); | |
| .attr('material', (d) => ({src: `url(http://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":"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"} | |
| ] |
