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.
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.
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.
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!
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.floor{
background:violet;
}
</style>
<body>
<script src="//d3js.org/d3.v3.js"></script>
<script src="threeBowie.js"> </script>
</body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Your_Icon" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M82,80.038v-0.465c-13-4.076-17.154-5.865-22.676-12.828c0.299-0.226,0.401-0.464,0.689-0.715 c1.211,1.318,3.676,3.619,6.606,3.356c-2.08-2.08-2.373-3.917-1.689-5.099c1.009,0.815,3.168,1.693,5.777,1.327 C68.058,63.657,66.607,59,66.469,55C66.467,55,67,55,67,55s0-0.376,0-0.378l-0.149,0.011c0.109,0.01,0.087,0.018,0.199,0.018 c1.114,0,2.12-0.562,2.876-1.541c0.59-0.766,0.938-1.767,1.044-2.818l0.466-4.845c0.11-1.104-0.097-2.203-0.57-3.091 c-0.618-1.167-1.662-1.905-2.854-2.024l-0.194-0.018l0.345-11.045c0.107-0.133,0.174-0.621,0.174-1.644 c0-4.651,2.12-6.265,1.609-11.282c-0.753-7.34-5.138-8.237-7.482-9.237c-2.346-0.999-4.834-3.854-5.384-4.649 c-0.428,1.122-0.307,2.794,0,3.67c-3.487-0.02-6.798-5.505-6.798-5.505s-5.751,5.485-9.237,5.505c0.305-0.876,1.65-1.648,1.896-3.79 c-2.448,2.019-4.935,3.77-7.28,4.768c-2.347,1-6.729,1.897-7.485,9.237c-0.51,5.018,1.611,6.631,1.611,11.282 c0,1.023,0.068,1.511,0.175,1.644l0.347,11.045l-0.193,0.018c-1.193,0.119-2.232,0.857-2.851,2.024 c-0.473,0.89-0.671,1.987-0.562,3.091l0.482,4.844c0.105,1.053,0.489,2.054,1.08,2.819c0.757,0.979,1.83,1.541,2.942,1.541 c0.11,0,0.223-0.008,0.333-0.018l0.039-0.004c-0.139,3.459-1.567,8.843-4.218,10.801c2.611,0.366,4.793-0.326,5.802-1.142 c0.684,1.182,0.438,3.019-1.642,5.099c2.93,0.263,5.491-2.037,6.702-3.354c0.301,0.263,0.778,0.512,1.094,0.75 C33.776,73.715,28,75.504,17,79.573v2.352c0,0.009,0,0.018,0,0.026v0.289c0,5.615,0,17.76,0,17.76h65c0,0,0-12.146,0-17.76l0,0v-2.2 V80.038z M33.288,52.235l-1.968,0.196c-0.039,0.003-0.077,0.005-0.114,0.005c-0.885,0-1.686-1.026-1.821-2.366l-0.482-4.844 c-0.139-1.395,0.501-2.603,1.432-2.693l2.008-0.2c0.037-0.004,0.074-0.007,0.11-0.007c0.084,0,0.17,0.011,0.252,0.028 c0.184-2.825,0.286-5.646,0.599-8.284l0.021-0.107c0,0,0.007-0.094,0.023-0.261c0.121-0.941,0.27-1.858,0.463-2.741 c0.48-2.01,1.403-4.381,3.133-4.889c2.557-0.752,5.196,0.098,9.233,0.429L34.76,48.525l9.728-3.121l-6.547,15.05l17.999-21.779 l-10.229,3.121c0,0,9.099-11.659,12.566-16.009c1.021-0.049,1.967,0.011,2.9,0.286c1.197,0.352,2.009,1.597,2.554,2.999 c1.225,3.86,1.301,8.578,1.607,13.306c0.108-0.031,0.221-0.049,0.334-0.049c0.035,0,0.07,0.001,0.105,0.005l2.01,0.2 c0.929,0.091,1.568,1.298,1.431,2.693l-0.482,4.844c-0.133,1.339-0.936,2.366-1.82,2.366c-0.037,0-0.076-0.002-0.112-0.005 l-2.01-0.2c-0.013-0.002-0.025-0.005-0.037-0.007c-1.819,9.044-7.287,15.579-15.735,15.579 C40.576,67.804,35.11,61.274,33.288,52.235z M48.992,97.424c-12.626,0-18.713-4.491-20.991-12.156 c4.819,1.335,9.174,2.497,9.583,2.683c1.08,0.494,1.404,2.784,1.392,3.815l2.133,0.033c0.001-0.044,0.014-1.104-0.256-2.296 c-0.396-1.754-1.22-2.962-2.382-3.493c-0.682-0.312-5.936-1.606-11.009-2.96c-0.298-1.54-0.471-3.188-0.538-4.933 c5.887-2.42,10.021-4.969,14.09-10.122c2.399,1.332,5.106,2.022,8.009,2.022c2.925,0,5.65-0.701,8.062-2.054 c4.08,5.201,8.147,7.754,14.036,10.19c-0.065,1.729-0.231,3.354-0.514,4.87c-5.038,1.363-10.268,2.672-10.954,2.985 c-1.162,0.531-1.986,1.739-2.383,3.493c-0.27,1.191-0.257,2.252-0.256,2.296l2.133-0.033c-0.012-1.031,0.312-3.321,1.394-3.815 c0.409-0.186,4.751-1.361,9.546-2.706C67.832,93.07,61.718,97.424,48.992,97.424z"/>
</svg>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()