Difference graphs

This was something I worked on a while ago. I like the difference graph – it’s not one I’d used before but it’s pretty common in financial analysis. You compare two series – when the first is higher than the second, you colour the gap in the colour of the first line. And vice versa.

I got the original off Mike Bostock (obv) -http://bl.ocks.org/mbostock/3894205 – tho looking back I made a little edit to it to put in two lines as well as two colours. The data in my graph comes from the Bank of England. They ran a data viz competition for people who wanted to use their data. I used their survey of people’s experience of inflation and compared it to their measured CPI inflation. As analysis goes, that’s pretty niche. I did not win the competition.

As well as being my first difference graph there’s a few other new things in here. I used the on.mousemove function to trigger the tooltip (and the little white tracer line). Normally, the tooltip uses on.mouseover, which means that the content of the tooltip is dependent on your being on top of a particular datapoint in the line. But I wanted to talk about the contents of both lines in the tooltip, so knowing where the mouse was in terms of the whole screen was the important thing.

I also like that I finally learned how to format a tooltip using something called html which I need to find out more about. Could be big in the future.

Comments are closed.