Click to make the David Bowie heads move if not groove.

This is a little demo inspired by wanting to learn a little more about these svg things in a non map context after seeing Mike Bostock’s Three Little Circles tutorial I decided to apply some of those and other d3 concepts to 4 David Bowie heads. I’ll try and explain what’s different in this code than that tutorial, but for now you can click anywhere on the violet background to make the Bowie heads move!

The awesome icon is called David Bowie by Vlad Likh from The Noun Project.

Separating out the JavaScript

So in most of my bl.ock examples and many of way smart people they put a bunch of the code in one index.html file. Often all the Javascript and CSS, and if there’s not that much code it’s cool but I want to start separating stuff out so I put my d3 code in a file called threeBowie.js even though I decided to to 4 Bowies. Though I was still lazy and left my CSS in the index.html file.

Appending everything to the page

In the tutorial you start with a bunch of circle svg elements already on defined for you. Here we append the svg w/ the purplish background then append some images to this svg.

Basic Transitions

In the Future

I want to make the heads keep dancing so I’m going to try a setInterval thing or maybe do something else. It’s also heck of easy to make the images change height and width in the same manner they were moved. Make it better and show me please!