Using data-viz to make a wire story stand out from the pack

I’ve been interested lately in finding examples of online-only, collaborative, non-profit newsrooms who’ve utilized the power of data visualization techniques to give added value to stories that otherwise wouldn’t necessarily be unique, and in doing so beat out legacy news organizations who published a text narrative alone. Take, for example, this data-rich story and interactive map displaying statewide testing results published by NJSpotlight Friday. While the news that only 8 out of 10 graduating seniors had passed New Jersey’s current standardized test in 2011 was widely reported across the state last week, including by the Star-Ledger in Newark and by The Press of Atlantic City, only NJSpotlight took advantage of the story’s strong data element to produce a more concise, data-driven visual narrative.

So NJSpotlight obviously deserves kudos for the gap they’re filling in New Jersey journalism. What’s more, the job they did on the interactive map was fairly sophisticated (I’ve still yet to figure out how to overlay such a highly customized legend onto a Google map). But as is always the case with any deadline project, there’s room for improvement. Let’s take a look at the good and the bad of NJSpotlight’s Friday package on state test results.

First off, this is a classic example of a story where county and/or municipality polygons with a colored fill layered on top of a Google Map brings new insight to a widely reported story. Not only can we immediately see from the map that most of the state fell within the 75 to 90 percent range in terms of passing rates, but we can also clearly tell that the north-central region of the state, particularly near the Pennsylyvania border, earned significantly higher scores than the rest of New Jersey. The pop-up table with information on vocational and charter schools also adds an additional layer of nuance to the piece, and does a decent job of displaying the numbers in a table-like format.

The map colors follow a somewhat logical pattern, with green representing high-passing rates and red representing lower passing rates. But the orange, yellow and blue colors that fall in the middle do more to obfuscate than they do to help visualize. Without referencing the legend, how is the user supposed to know that blue is better than yellow, or that green is better than blue? What’s more, the combination of such bright shades of colors from opposite ends of the color spectrum makes the map less pleasing on the eye than it would’ve been had the designer chosen more subtle, complimentary shades. I understand the desire to have red represent ‘negative’ and green represent ‘positive,’ but if NJSpotlight had went with a graduated color scale from red to green, with neutral-based mid-values such as the ones I used in this recent map on nationwide obesity rates, the map would’ve been not only aesthetically more appealing, but easier to read.

Another minor criticism I could make of the map is the designer’s decision to set the polygon-fills to solid colors with 100 percent opacity. This obscures the underlying view of which cities and townships each shape contains. While I understand the thought-process that likely went into this decision – it’s hard to make disparate colors, especially orange and yellow, stand out when layered on a slightly orange-tinted map with road and highway features – the designer could have easily used a tool such as to generate some nice equidistant colors that would’ve looked fine set to an opacity of about 50 or 60 percent.

For the sake of thoroughness, I also want to address the included table that contains the charter and vocational school data. I like the fact that NJSpotlight chose to alternate the shades of background color for every other row in the table. It helps distinguish each row more easily from its neighbor, and gives an extra visual attribute to what easily could have been a stale grid. My only recommendations might be to split up every five or six rows with a dividing line, and to incorporate a bar chart, if possible, for one of the values in the cell (presumably, the most important value, the percent passing column).