a video in an aframe scene, larger and with a ‘ground’ plane
now with many
🙏 @utopiah for being my A-Frame sherpa 😄
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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
<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-assets>
<video id="gooey-exploding-scatterplot" autoplay loop="true" src="05-gooey-exploding-scatterplot.mp4">
</a-assets>
<!-- Using the asset management system. -->
<a-video src="#gooey-exploding-scatterplot" width="16" height="9" position="0 5 -12"></a-video>
<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([Math.PI, 2 * Math.PI]);
const r = 2;
d3.select('a-scene').select('a-assets')
.selectAll('.video')
.data(blocks)
.enter()
.append('video')
.attr('id', d => d.video.slice(3, -4))
.attr('autoplay', '')
.attr('loop', 'true')
.attr('src', d => d.video);
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.5 - (2 * Math.PI)) + (r * Math.cos(arcScale(i))),
// y: Math.random() * 5,
// y: 5,
y: ((blocks.length - i) / 10) + 0,
// z: Math.random() * -5
z: (-0.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: `#${d.video.slice(3, -4)}`}));
});
}
var sceneEl = document.querySelector('a-scene');
if (sceneEl.hasLoaded) {
render();
} else {
sceneEl.addEventListener('loaded', render);
}
</script>
</body>
</html>
[
{
"link": "https://bl.ocks.org/skokenes/a85800be6d89c76c1ca98493ae777572",
"githubID": "skokenes",
"description":"d3.lasso example - scatterplot",
"video":"01-lasso.mp4"
},
{
"link":"https://bl.ocks.org/veltman/c582a31d347e04dd75d5331b0074558e",
"githubID":"veltman",
"description":"Jigsaw morphing",
"video":"02-jigsaw-morphing.mp4"
},
{
"link":"https://bl.ocks.org/armollica/90ff1d55f7a8fdbf42500558e1c6d1f5",
"githubID":"armollica",
"description":"Draw a Text Path",
"video":"03-text-on-path.mp4"
},
{
"link":"https://bl.ocks.org/Kcnarf/0258266bc25ed13da4909c975cd7b61d",
"githubID":"Kcnarf",
"description":"Voronoï playground : undulating radial wave",
"video":"04-voronoi-playground.mp4"
},
{
"link":"https://bl.ocks.org/cmgiven/e5dfe0888968ee8c507f5469a4d62b6f",
"githubID":"cmgiven",
"description":"Gooey Exploding Scatterplot",
"video":"05-gooey-exploding-scatterplot.mp4"
},
{
"link":"http://bl.ocks.org/tophtucker/f418c054e08107cfb7a2628b64beccbb",
"githubID":"tophtucker",
"description":"White on White",
"video":"06-white-on-white.mp4"
},
{
"link":"http://distill.pub/2016/misread-tsne",
"githubID":"enjalot",
"description":"How to Use t-SNE Effectively",
"video":"07-tsne.mp4"
},
{
"link":"http://bl.ocks.org/alexmacy/3986db72dc4b81db8e788dd837ee6e3b",
"githubID":"alexmacy",
"description":"K-Means Voronoi Relaxation",
"video":"08-voronoi-relaxation.mp4"
},
{
"link":"http://bl.ocks.org/sxywu/e068ceaeeee7de8c9fd9ef80ef380813",
"githubID":"sxywu",
"description":"d3unconf 2016, v5",
"video":"09-starry-night.mp4"
},
{
"link":"http://bl.ocks.org/emeeks/912e24404b85a2af7dc7cb17927e816d",
"githubID":"emeeks",
"description":"Wargames Aesthetic",
"video":"10-war-games.mp4"
},
{
"link":"http://www.datasketch.es/october/code/nadieh/",
"githubID":"nbremer",
"description":"Royal Constellations",
"video":"11-royals.mp4"
},
{
"link":"https://twitter.com/Elijah_Meeks/status/786763114213617664",
"githubID":"emeeks",
"description":"#d3brokeandmadeart",
"video":"12-d3brokeandmadeart.mp4"
}
]