Total Perspective Vortex in D3.js

I’ve always been intrigued by the Total Perspective Vortex in the Hitchhiker’s Guide To The Galaxy, that shows a person themselves in relation to the awesome size of the entire universe. I had an idea for an interactive thing sort of like this, and thought I’d try making it with D3.js.

You can have a go with it here.

You get the full effect if you use Facebook, Twitter and/or Instagram and have some idea of how many followers/followees etc. you have (or can be bothered to look the numbers up). Please do. Here’s a screenshot, although you need to see the movement for the full experience:

The code is on GitHub.

I’m not sure how well it gives you an impression of scale… the scales are so vastly different that “you” get lost compared to the size of the larger entities. But still, it was a fun experiment.

It was nice to make something that’s not a chart using D3.js, and it worked well. Initially my code was a bit more clunky. When creating (and animating) all the shapes, I’d loop through the data with for loops, adding (or animating) each one with D3. Which worked fine, but I realised it wasn’t very D3-like. D3 requires a less conventional way of thinking which my brain isn’t native to yet. I re-jigged the code and now I don’t need the loops – I pass the data for the shapes to D3 once, telling it what kind of elements to create or animate, and it handles the creation (or movement) based on the state of the data at the time.

The animation was a bit smoother before I added background images (which are added as patterns on the SVG elements) but it’s alright (on my laptop anyway…). I wasn’t sure how the browser would cope with animating circles that might have a diameter of 100,000,000 pixels but it seems to cope.

It could be improved — automatically get follower counts using APIs, have some prettier graphics, include populations of cities, etc, etc — but I think it’s gone far enough for a “quick” few days’ worth of fun project. Have a go!