GIFS!

Today I learned how to make gifs!

Hang on…

today3

This is a lot of fun.

This all emerged from a twitter discussion with John Burn Murdoch of the FT and Rob Fry of the ONS, both of whom were posting animated vizzes of income distributions and trying to inaugurate International Day of Animated Income Distributions. (It’s very much their campaign, though obviously I shall support it in any way I can). I posted a link to an animated viz I had done about the UK income distribution. John tweeted me to mock the fact I hadn’t used a gif. And I hadn’t used a gif because….because I didn’t know how.

Actually John and I spoke about making gifs probably a year or 18 months ago. I looked at making them then, but it seemed too complicated to record what was going on on my screen and turn it into a gif, which is what I’d be trying to do. Either I didn’t look in the right places or the software didn’t exist because I found it pretty much straight away today with a quick google. (Side note – it wouldn’t surprise me at all if the relevant software had been developed in the last 18 months. One of the things that continually surprises me about the whole world of interactive graphics is that something that looks like a problem has an easily implemented solution within 6 months, almost without exception).

So. With the new little gadget (I used Screen to Gif, but there’s others around), you get a frame within which you press record and capture whatever’s going on on your screen. Pretty easy. Here’s the gif I made.

incomes_animation_2

That gif is just a recording of me clicking my way through that interactive animation, possibly not pausing long enough between changes. What it does, excellently, is make the animation shareable on twitter. What it doesn’t do, at all, is allow the user to actually inspect the numbers in the viz. Obviously the tooltip, which I doubtless took ages over, doesn’t work in a gif. But it also doesn’t give the user any real chance to look at either axis and consider what’s actually going on.

I’ve noticed this year that a lot of our work gets shared much more on twitter than it used to. We use more infographics, which are built for sharing, and lots of pictures of graphs. So lots of retweets, lots of mentions. But far fewer clicks through to the report which is the original source of the material. Far fewer people (or certainly fewer people per tweet share) going on to the website. Twitter has stopped being an advert for our content and started being the content itself. Turing vizzes into gifs is another step along that road – you can see all the animation in your timeline, there’s no need to go to the website.

As someone who does analysis then designs and codes animations, I’ve got, as you’d imagine, mixed feelings about this. On the one hand, if more people see the stuff, then good, and you could see how an animated image might get shared more than a static, or a link to an animation you have to click through to see. But on the other, gifs were built for sharing hilarious cat images, or Sideshow Bob stepping on a series of rakes. It’s a shallow type of engagement and I’m not convinced that people go away with much more than a memory of some pretty moving lines.

What this is, then, is another design decision. I think doing a gif of an animation is, on balance, a good thing to do. It should therefore shape what goes into the original viz. As analysis, though, it feels underwhelming. So somehow, you still need to make people click through to something more absorbing. The task remains of how you get people to engage with more detailed content.

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.