Here is my last submitted assignment for the Data Visualization course I’ve been taking. We were asked to find data — any data — that was of interest to us and determine the best way to present it to readers.
Here in Seattle, we are lucky that the city provides a great data resource for all sorts of information. As someone who has worked in Communications my entire career, I was personally interested in the robust list of community news sources in the city broken down by neighborhood. It’s granular to the level of email list-serves in various neighborhoods. Here is the data I was working with.
This data set obviously lends itself best to an interactive map format, so I took to Google Maps to plot out what I thought was relevant for a resident of a particular neighborhood and for someone wishing to get their news covered. Here is what I came up with (click for full size):
This isn’t complete in that I wasn’t able to plot out all of the neighborhoods (or very accurately plot the neighborhoods that are already included), but it gives a good idea of where I’m headed. Part of the information here is from city data, but I would also have to do a fair amount of researching to find things like actual neighborhood boundaries, reporter name, phone number, news tip link/email and related news from Twitter.
I’m extremely interested in pursuing this further as a live product because we have a really active hyperlocal news community here and I think it could be really useful with the right info and an efficient way to keep it updated.
My latest assignment for the data/infographic class I’m taking was to design an interactive data visualization from the unemployment data used by the Guardian in this map. I ran out of time to put a finer point on the design and I didn’t get a chance to play around with other data sets, but here’s one proposal I have to show the jobless data set.
The first infograph plots all 50 states to show an overall trend in the rise and fall of unemployment rates in the U.S., but I have highlighted five states that don’t fall in line with the rest of the country as well as the overall U.S. rate so readers have a baseline to compare to. In addition, I would add a pulldown of other states so a reader could highlight and compare a particular state of interest.
I also envision being able to hover over the timeline to get dialogue boxes of info explaining some of the more noticeable shifts in unemployment rates across the country, particularly between Oct 2011 and Jan 2012.
The second half of the visualization would include an interactive map, first that serves as a sort of “heat map” for current high unemployment rates. Clicking the play button would animate the map to show change over time, similar to what you see on an animated weather map.
Clicking on a state on the map would get you deeper detail about that states unemployment rate over time. You could hover over any line in the bar chart to see a particular month’s rate. Another dropdown would be here to add another state to the bar chart for comparison’s sake.
This week’s assignment for my class on Infographics & Data Visualization was to take data from the findings of an aid transparency index (that ranks global aid organizations on how well they conform to best practices for data transparency) and then turn those findings into an interactive data visualization.
The audience for this is a general newspaper audience. Once I dug into the findings of the report, I realized that most of the formatting of data was already available and effectively told the story of their findings. From there, it was just a matter of bringing individual pieces from the report together in an interactive way.
Beyond this general overview of findings, there are certainly other stories within this data you could extract and show in a different way (how does the U.S. stack up to other countries; UNICEF ranks last for data transparency of international aid orgs; etc), but I focused on the overall findings for this particular assignment.
Click to see larger.
I’m currently enrolled in a massive online class taught by graphics and data visualization guru Alberto Cairo and hosted by the Knight Center for Journalism in the Americas.
As a former newsroom resident, I’ve long appreciated the power of infographic design, but I’ve never taken the opportunity to really study what makes an infographic great or not-so-great.
It’s been a fairly eye-opening course so far and we’re only into Week 2. Take this week, for instance, when we critiqued an interactive graphic by the New York Times. My reverence for the NYT runs deep so critiquing their work feels a bit sacrilegious, but I do what I’m told!
Here’s the graphic we were asked to rethink (click the image to get full functionality). The graphic shows readers how often certain words were spoken by each party during the Democratic and Republican National Conventions. Underneath the graphic, it also displays the parts of the transcripts where those words were mentioned.
I had a few minor nits about the graphic, but my major nit was the separation of data from context. Looking through the transcripts, it became clear that references to those words were not equal in value. You would only know that if you sifted through the transcripts which were easy to miss if you didn’t scroll down the page.
Here is my static re-imagining of the interactive graphic (click for full size)
Here, I make the transcript the primary visual component while placing the navigation within the bar chart. Doing this and placing the two components side-by-side essentially forces readers to interact with these two levels of data simultaneously.
How it would work interactively:
- I invision the user clicking the “previous” and “next” arrows underneath the quotes to reveal other quotes. Perhaps providing a link to all instances of the word within the transcript that could display underneath and jump the user to that part of the page.
- A short, unintrusive, but helpful NYT note about why the findings are significant displays under the quotes.
- Clicking on the words in the bar graph would change which word or phrase is displayed.
- The NYT editors could decide the 8-10 most editorially significant words or phrases to pre-populate the bar chart then allow users to either add to or replace with words of their choosing.
- Clicking on “see the complete list of words” would lengthen the bar chart significantly to compare all the words in this format. An option to again truncate the list would appear.
- Some usability improvements could definitely be made here to make the calls to action crystal clear.
It’s worth mentioning that I sketched this out before taking to the computer, a process we were encouraged to do so that we didn’t trap ourselves into a specific design, a trap I set for myself all too often when I’m designing for the web. My drawing skills are laughably awful, but it definitely helped with the process and made connections in my brain that I would have struggled to make had I started in Illustrator.
About me
I'm a web developer, designer, writer, communications professional, former newspaper journalist, Wordpress evangelist, news junkie, pop culture addict AND MORE! Currently employed as the Technical Communications Specialist at the Seattle Housing Authority.
