inchworm

inchworms

Summer of Coding, one inch at a time...

Pies

inchworms -

Today, after finishing the chapter on interactivity, we started playing with D3 layouts.

The first layout explained was a Pie. We thought it would be fun to make a pie that represented what we spent most of the day doing. One for each of us.

Creating the pie was pretty straightforward. But working out how to make each piece of the pie respond to mouseover/mousemove/mouseout, so that the name of each pie-piece appeared as a graphic overlay, proved to be a GRAND HEADACHE!

Carla found a lame-ish solution that added each pie-piece name to a ‘title’ element. Modern browsers would automatically show this upon mouse rollover. You can see it below, although you might need to roll your mouse over and then wait a moment.

Carla was quite happy with this but Anja was unimpressed. Partly because it was a solution that she had not found, but also because the name’s appearance just took too long to appear.

So she found this solution:

–>We need to send a big shout out to @mortice for helping us work out how to get our javascript working on our jekyll blog. Don’t tell anyone but he is a secret front end developer too…