Making it mobile

This blog/ project is about making interactive data visualisations, trying to figure out what works and what doesn’t. I think they offer a lot and I think the viewer should expect a lot too- you’re looking at the internet, it moves, you should expect more than you would from a book or newspaper. There’s the potential for an extra dimension and people who are doing data analysis and visualisation should find that exciting. But it’s been bugging me for a while that they don’t quite work on phones – what is a hover on a laptop is a click on a phone and the clicks are hard to click, sometimes it takes a while to load stuff, it’s all too small etc etc. Then I saw this tweet from Randy Olson (Randy moderates the Data is Beautiful Reddit – he knows of which he speaks).

And that made me think rather a lot. So I did some thinking but it came to nothing.

Later on last week I had cause to draw the graph below, which began life as a static graph (Microsoft Excel copied and pasted into Word, as ever). It’s based on Donald Hirsch’s/ End Child Poverty’s new child poverty figures, and it’s basically a cumulative frequency thing – rank areas (in this case, electoral wards) by the proportion of kids in each area who live in poverty, then, moving up the distribution, show the proportion of all children in poverty who live in an area at least as poor as that one. Hover over any part of the graph to see the values etc and so on.

If poor children were equally distributed across all areas, there would be a straight diagonal line from the bottom left to the top right. There’s a curve, obviously, as you’d expect there to be more poor kids in poor areas than non-poor areas (that’s kind of by definition…). The interest, then, is in the steepness of the curve, particularly over on the left, and what that tells us about clustering of poor children.

You can explore the graph and look at different points to see how concentrated the distribution is. So, if you go from the 50% mark on the y axis, you’ll see half of all poor kids live in 22% of areas. Going along the x axis, you’ll see that the poorest 50% of areas have 77% of all poor children. I find the ends of the distribution interesting, too – 20% of poor children in 6% of areas, 10% of poor children in the 30% of least poor areas. And so on.

But going back to Randy’s point, how does this work on a mobile? Not brilliantly, as anyone who is reading this on a mobile can attest. It’s kind of fiddly to get any particular value, as the columns that form the curve are necessarily very thin, since there’s 100 of them fitting into a narrow space. So you’ll end up poking way trying to get close to a number and maybe you’ll find that enjoyable and maybe you wont.

I don’t really know how you get round that – a phone screen just is smaller. But there’s a different way of looking at it – what if the clicking weren’t so essential? We could set the graph up in such a way that it tells the viewer the/ a key fact to begin with, which they can explore further if they want. The graph below basically does that, taking what I think is the most interesting finding and setting that up as the starting state. The relevant lines are highlighted in red, and the tooltip is already set at the top, and in a bigger font, making it more obviously a title for the graph. Otherwise it’s exactly the same as the graph above – you can hover/ click on whatever part of the graph to find out more. It’s just that you don’t have to. Basically, it’s now a static graph you can interact with.

Which isn’t of course to say that this is perfect on a mobile – I’ve checked, it’s not. The font’s still too small, it’s still a bit hard to compare numbers that appear to be quite close together. It’s definitely heading in the right direction, though.

One of the interesting things about making this kind of stuff is that you’re faced with problems all the time – some of them are design problems and some are technical problems. This one looks like a technical problem – the differences across different platforms – but there are things you can do to the design to make it better. The point here being is that there could be some middle ground where there is interactivity for those that can use it but the viz isn’t utterly redundant without- visualisations where interactivity is useful, but not essential. Or, more snappily, VWIIUBNE. That’s bound to catch on.

I don’t take comments on the blog as the spam is too tedious to deal with but I can be found on twitter – @tommacinnes

Comments are closed.