I had some time to kill on the train to Devs Love Bacon, and limited internet access, so I was looking for an offline project to play with and learn something new in a couple of hours. Step in Rickshaw a graphing library built on D3 it’s a quick way to make beutiful interactive graphs.
I used the data from the history of the Glastonbury Festival to built a graph showing the price and attendance over time. Simple enough, but with the need to include two different scales (attendance is huge compared to the price) enough of a challenge for a few hours.
The result is down at the bottom, and you can see everything in the source here.
A couple of notes on things I stumbled upon along the way. I started by pinching an example that looked about right.
- Trying to chance too much at once. Make the smallest change possible, reload, make sur eyou’ve not nuked the whole thing. I found the error messages to be mildly useful.
- The data series are really simple lists of objects with an x and a y value for each point.
- The data series need to be sorted before you graph them. My data was a mess (long story) so using a quick and dirt compare method made sense.
- You can apply different scales to each data series. I experimented with log scales but couldn’t get it working quickly so ended up with different linear scales.
- There’s a bug in my hovercard which shows the date at 1970. I’ll get back to this.