back · main · about · writing · notes · d3 · contact

Dancing madness: fun with mouse events and d3
22 May 2016 · 873 words

There’s something oddly satisfying about making things appear through a mouse click. It’s like the webpage has recognised your supremacy over it and is bowing to accommodate your wishes. You are its master. You have power.

Are you a person who likes to feel powerful?

Read on. We’re going to create something truly amazing.

Our task: to click inside a rectangle, and have dancing people appear.

Why dancing people, you ask?

Why not. There’s plenty of other tutorials that focus on creating circles. Dancing people are much more exciting.

Here’s what it will look like.

First Steps

I’m going to assume that you know where to write your d3 code. If you don’t, visit this link.

Like all basic d3.js visualisations, we need to create a SVG element to hold our graphics wizardry. This SVG element needs to be specified with two attributes: height and width.

We can make our code flexible by defining variables for our height and width, rather than hard-coding the values. This has the advantage that if we want to change the dimensions of the SVG element later, we only need to change the code in one place. We’ll also create a variable called “padding” – this will act as space between the edge of the SVG element and the rectangle.

var svgWidth = 900
var svgHeight = 500
var padding = 5

Now we can create the SVG element. We store the result in a variable so that we can access it easily later.

var svg ="body").append("svg")
.attr("height", svgHeight)
.attr("width", svgWidth);

We can now append the rectangle to the SVG element. What we will do is enclose the rectangle inside a HTML group element, and give the group an id name of “back”. This has a few advantages:

Let’s add the group and the rectangle. We’ll also specify the x and y coordinates of the rectangle as variables for convenience.

We are going to want only the border of the rectangle to show. To achieve this, we can use d3’s syntax to set fill as none as the style of the SVG rectangle.

var rectx = 5
var recty = 5

.attr("id", "back")
.attr("x", rectx)
.attr("y", recty)
.attr("width", svgWidth - padding )
.attr("height", svgHeight - padding)
.style("fill", "none")
.style("stroke", "black");

Adding Mouse Events

It’s easy to add mouse events. To make something happen when we click on our rectangle, we can use the selection.on syntax.

In our code, it looks something like:

svg.on("click", function()
//do something

Remember our aim: we want to make dancing people appear when we click.

I’ve harvested a collection of hilarious dancers (in gif format) with the magic of Google Images. Storing the web addresses of each gif in an array is a convenient way of accessing these gifs later on.

Of course, if the url for a gif changes, then the links aren’t going to point towards the correct image anymore. You could get around this by storing the gifs locally, but I’m going to use the web addresses because this project is only a bit of fun.

Here’s our array:

dancers = [

Then to make the dancers appear:

svg.on("click", function()
var coords = d3.mouse(this)
x = coords[0]
y = coords[1]
.attr("xlink:href", dancers[Math.floor(Math.random()*dancers.length)])
.attr("width", 40)
.attr("height", 100);

There’s a lot going on here, so I’ll break it down:


then the image at that hyperlink would display.

And there you have it! You can now bask in your power and make your minions dance all over the screen for you.

Here’s our final result again. Now, wasn’t that fun?

back · main · about · writing · notes · d3 · contact