Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8

mpmckenna8/icon_21660.svg

Last active August 29, 2015 14:02
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 mpmckenna8/f0abe7ae10eef35972bd to your computer and use it in GitHub Desktop.
Save mpmckenna8/f0abe7ae10eef35972bd to your computer and use it in GitHub Desktop.
Download ZIP
4 little David Bowie head SVGs
Raw
readme.md

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!

Display the source blob
Display the rendered blob
Raw
icon_21660.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.floor{
background:violet;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="threeBowie.js"> </script>
</body>
Raw
threeBowie.js
var svg = d3.select('body').append('svg').attr('width', 720).attr('height',270).attr('class','floor');
var daves = [1,2,3,4]
var xpos = 40
// this is what appends some pictures to my svg
svg.selectAll('.bows')
.data(daves)
.enter()
.append('image')
.attr('xlink:href', './icon_21660.svg')
.attr('x', function(d){
return 70 * d
})
.attr('y', 40)
.attr('width',100)
.attr('height',100)
.attr('class','bows');
function dance (){
svg.selectAll('.bows')
.transition()
.delay(500)
.attr('x',function(d){
return Math.random() *720 -29;
})
.attr('y',function(d){
return Math.random() *200 -30;
})
.duration(5000)
};
d3.select('svg')
.on('click',function(){
return dance()}
)
dance()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment