Skip to content

Instantly share code, notes, and snippets.

@donmccurdy

donmccurdy/.block

Last active October 16, 2016 23:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save donmccurdy/2d13aa01d854ef60eac24102846a8a5f to your computer and use it in GitHub Desktop.
Save donmccurdy/2d13aa01d854ef60eac24102846a8a5f to your computer and use it in GitHub Desktop.
Download ZIP
aframe + d3 + bl.ocks
Raw
.block
license: mit
Raw
blocks.json
[
{"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"}
]
Raw
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="#99d8c9" 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)`}));
});
}
var sceneEl = document.querySelector('a-scene');
if (sceneEl.hasLoaded) {
render();
} else {
sceneEl.addEventListener('loaded', render);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment