Week 4 Infographic Exercise: A decade of US unemployment

So this week’s infographics MOOC exercise was another draft for an interactive infographic, this time on the unemployment rate per state in the US.  The assignment was based on another DataBlog post from The Guardian which showed a choropleth map of unemployment using data over the time of Obama’s presidency.

The biggest problem was that the data during that time looks nearly meaningless.  It’s noisy, it has a vague downward trend, but you see this *blip* at the start where everything is jumping upwards.  Those who remember the last five years’ worth of economic history better than I did will remember why – the insane crash all kicked in about half a year prior to Obama’s election.

So step one, I hunted down a wider data set via data.gov.  Using the last 8-10 years’ worth of data gave a much more interesting picture and set the context for what was actually going on in the last four.

Step two this week for me was playing with making the data work in Tableau Public.  I had spotted this tool a few weeks ago, and didn’t try it last week as it does have a bit of a learning curve and I really wanted to practice something in Illustrator.  But this time I decided, what the heck, if making something actually interactive isn’t that much more work than graphing and drawing it up in Illustrator, why not?

The end result was very close to what I wanted – my ideal needs just a couple more features (pop-up or overlay annotations on a line graph, a customized timeline control on the line graph) which may or may not ever show up in Tableau, so I guess I still have some motivation to learn a decent chart library in Processing.

You can see the published interactive at Tableau, but the line graph isn’t working, which is kind of lame since it was made using a technique they demonstrate in their own tutorial.  Hopefully that gets fixed, but in the meantime I just screencasted from the desktop version for the assignment hand-in.

Noisy motion – learning from Generative Design

I picked up a copy of the absolutely-beautiful book Generative Design recently and I am loving it.  It’s a perfect resource for where I’m at – exploring generative art, wanting to learn more but don’t need someone to teach me the basics of programming.

It’s been great to find out how many techniques are much simpler to code than I’d expected.  For example, I decided to code my own copy of this noisy motion sketch which creates fantastic wispy-smoke-like patterns.  I’d seen work like this before and assumed some amount of complex simulation was going on.  Turns out it’s just taking Perlin noise and using it as a sort of vector field, defining an angle for particles to move in from each spot.  (Which sounds fancy but it’s basically just a few lines of code.)  Huh!  Easy-peasy, tiny code, fun results.

Infographic MOOC: week 3 exercise

I’ve signed up for Alberto Cairo’s massive online open course on infographics and data visualization.  I’d been tempted by other MOOCs before and decided I didn’t have the time to commit to it, but this one caught me at a good time.

The entire course has been very good so far, giving a great perspective on how infographics relate to journalism as a whole as well as how to think of the infographic / datavis gap as a spectrum of functional and artistic intent.  It’s also included some Illustrator tutorials that have finally gotten me over that initial learning curve in designing with vectors.  (Although as you’ll see shortly, I still have a long ways to go.)

The week 3 exercise was to draw up a draft for an interactive infographic based on the data mentioned on The Guardian’s Datablog re: the transparency of international aid agencies around the world.  The Datablog post includes a couple of bar graphs – a good tool for comparing values with precision, but the stacked bars don’t convey a lot and there’s room to tell more.

My draft suggests a few improvements.  Users could be allowed to filter the aid agencies by geography, letting them compare agencies based in the same region more easily.  Radio buttons could also let users choose between seeing the full aggregate score or only the subscores based on the three levels of detail that the transparency report surveyed the agencies on.

The biggest change I’d propose is on the second layer of the infographic – a slope graph to highlight the general trend across agencies of improved transparency.  This was one of the summary points of the original report and is worth highlighting through data.

Here’s the PDF mockup I created; I used fairly simple shapes to represent tabs, dropdowns, etc rather than spending a lot of time on them, as in a real interactive I would expect to be grabbing UI components from a library for whatever coding / design tool I was using.

aid transparency draft copy