| license: mit | |
| border: no |
block a-boxes in a circle
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
| [ | |
| {"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) { | |
| // 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, | |
| // z: Math.random() * -5 | |
| z: (-1.5 * Math.PI) + (r * Math.sin(arcScale(i))) | |
| })) | |
| .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> |
