This week I really wanted to hold off on commenting about Brexit graphics until things settled down—admittedly thinking Remain would win. Now that Thursday has arrived, I think we can all agree that settling down is not happening and the UK really is leaving the EU.
As an Irish American, I grew up with frequent commentary about the Troubles and the general situation in Ireland. So by dint of my heritage, I care about how Brexit impacts Northern Ireland. Unfortunately this graphic from the New York Times on Brexit sentiments entirely omitted Northern Ireland. (It is far from the first time graphics about the UK omit Northern Ireland.)
Where is Northern Ireland?
But, what irritates me in particular about this graphic at this historic time, is what the designers did choose to include. If you look to the north and west of Scotland, you will find the Outer Hebrides and Orkney Islands. From the legend it appears there are no results, accordingly the islands remain—pun intended—grey for, I presume, a classification of not applicable or something similar. (Although, that should also be clarified in the legend.) But, while we are given an inset of Greater London’s results, the entire home nation of Northern Ireland is omitted from the results. (I could then mention how Northern Ireland was not ignored when it came to the Euro 2016 Round of 16 participant results, but I do not understand football enough to comment intelligently.)
And since we mentioned Northern Ireland, we should also mention that Gibraltar is absent from the results map presented here. Gibraltar was once Spanish territory. However, Spain ceded it to the United Kingdom in 1713 as part of the Peace of Utrecht made to end the War of the Spanish Succession. Gibraltar voted overwhelmingly to Remain. And as with Scotland and Northern Ireland, it will (likely) be dragged out of the EU against its people’s wishes.
Credit for the piece goes to the New York Times graphics department.
It’s Friday, so what better and more uplifting way is there to enter the weekend than looking at the most distinctive ways people die in the United States. The piece comes from Bloomberg.
Last Monday I stated that I would attempt a longer piece on the graphics explaining the shootings in Orlando. Since I do not have access to the print versions, I am examining only the digital versions here. Go grab a cup of tea, because this is certainly one of my longer pieces.
One of the most common ways sites covered the story was through maps of the club, Pulse. It makes a lot of sense—if we want to understand what happened inside the building we need to be able to place ourselves inside the building. So how to do that?
The first thought would be photography. But, the site is a crime scene likely riddled with bullets and stained with blood. Probably not the best thing for publications to use. So we are left with illustrations of the interior. But what level of detail do readers need to understand the story?
At the one end of the spectrum we have the stripped-down and simplified graphic from the BBC.
The BBC’s layout
In many respects this could offer the clearest explanation. Unlike the next versions, we have no graphical elements with which to confuse and clutter the drawing. Walls are omitted for a far more architectural layout. Doors are clearly marked, but that is it. We have no indication of where other key places are located. Where are the restrooms into which the attacker fled with hostages? Where are the dance floors? Where is the patio through which people escaped? We get some indication through the timeline annotations, but a lot of the detail needed to provide context is missing.
First you can see that the graphics, while smaller, are interspersed within a text-driven timeline of events. Key areas at that point in the timeline are highlighted on the graphic. For the graphic itself, the Times opts for a high-angle view with walls extending from the floor plan and the three key areas are annotated within the graphic. Colour is kept to a minimum with only whites and greys used in addition to the highlight. However, the high grey walls overlap with each other and the unidentified white boxes. What are the white boxes? Are they important? Do the walls need to be grey? Do they need to be so high that they interfere with the graphic?
We can see some different answers to those questions from the Wall Street Journal.
The Wall Street Journal’s layout
Here the graphic is lighter in overall tone, with white and very faint greys replacing the darker tones in the New York Times’ piece. They Journal opts for the same graphics within timeline treatment. They also highlight the areas of the club relevant to the story at that moment in time. But here we first find a larger graphic. The Times could have had space limitations on their online site or they could have had to reuse graphics from their print edition for their online edition. While the Times could have very real reasons for the smaller images, the Journal’s larger graphic gives the content the space it needs to be read and understood comfortably. Also note how the use of grey vs. white for emphasis is reversed. Whereas the Times used white for unmarked boxes and grey for walls and floors, the Journal uses white for the floors and the walls. Grey is used to callout important parts of the club that are then crucially labelled, e.g. where the bars are located. Another really nice touch missing from my screenshot is how the Journal only labels the elements in the first graphic in the timeline. The second graphic only calls out the newly important elements.
The Washington Post takes a similar approach to that of the Journal.
The Washington Post’s layout
We see above the timeline a large graphic identifying the key areas of the club. The use of the small multiples in the timeline then allows the graphics to be smaller and thus accompanied by more text. But in the graphics, the Post diverges from the Journal’s direction in the graphic’s design. We find the layout depicted at a lower angle. And instead of a restrained palette, we find warm beiges and ochres depicting the floors and key elements like the bars. The shadows here begin call more attention to themselves than in the previous designs. We also find high levels of detail with the inclusion of bar stools and seat cushions. On the large graphic, the colour and detail, while distracting, still work because of the space. But in the small multiples for the timeline, a simplified version without stools and seats and a toned-down palette could make the graphic easier to understand.
And then somewhere between the approaches of the Journal and the Post we have the Los Angeles Times.
The Los Angeles Times’ layout
We return to a restrained palette with colour used sparingly to emphasise key parts of the narrative. Detail is limited to the key elements, without any illustrative adornments like furniture. Typographic distinctions, bold vs. italic, delineate the important areas of the club from the remainder of the context. Elements like service alleys, fences, and the patio gate are clearly marked and provide that context of the possible escape routes for patrons attempting to flee the attacker. The graphic then repeats through the timeline, but the subsequent graphics reflect a missed opportunity. Each remains as labelled as this first, and the labels begin to distract from understanding the narrative.
Note any similarities in this graphic to the preceding one? The Tribune Publishing Company, to be rebranded as tronc, owns both the Los Angeles Times and the Orlando Sentinel. So my guess would be the graphics departments collaborated or one of them created a shared asset to be used across the Tribune Publishing Company’s—sorry, tronc’s—media platforms. The Sentinel’s version lacks the finer design details of the LA Times’s, for example note how the typographic treatment here lacks the clearer hierarchy present in the LA Times’ version. I doubt the small type size increase would be noticed by the audience, though I could be wrong. But in terms of providing a timeline of events, the Sentinel’s version, which incorporates the above graphic as well as other media, is the most detailed and complete.
Then similar to some extents to the preceding graphics, we have a piece from the Orange County Register.
The Orange County Register’s layout
As you can likely tell from the screenshot, this is a graphic where the entire piece is designed as a large graphic file instead of components on the page. It could be because the piece was designed primarily for print and not digital consumption. The layout of the club draws heavily on the BBC’s architectural drawing concept, but here is executed far more awkwardly. Instead of including hallways in the schematic, they are indicated by coloured rectangles. And we also know from the other graphics that almost the entirety of the wall at the graphic’s top supported the club’s main bathrooms. The graphic itself is sourced from The Villages Daily Sun, but the OC Register would have been better served by sourcing a more accurate and more clearly designed graphic for the layout. I should also point out the photograph at the top of the graphic appears to have come directly from the New York Times.
Per the style of the National Post, this graphic is more illustrative in its quality than the others. Like the Orange County Register, the National Post designed an entire graphic instead of smaller components on a webpage. The timeline occupies the left column and numbers correspond to locations in the club. However, I think the graphic could have been made more clear if the roof illustration were removed and a higher angle taken to make the back of the club easier to see.
Different publications included different amounts and types of supplemental context. The Washington Post and Wall Street Journal, for example, included additional graphics on mass shootings. Others, like the New York Times, provided links to pieces that examined the context separate from the timeline of events.
Is there a best design among these? Well, design exists to solve problems, and those problems could vary from publication to publication. How soon did the graphics needed to be published? How many people worked on the design? How much information was available when producing the work? Were print considerations necessary?
For me, the Orlando Sentinel’s work, in toto, most clearly presented the narrative. While I quibble with particular elements of the design, again, I would have removed most of the text labels after their first appearance, it provides a balanced amount of detail and broad overviews in a clear fashion. Colour is used to emphasise elements in that moment. The illustration itself does not distract and allows the reader to focus on the story itself.
Credit for the pieces goes to a lot of people.
BBC: BBC graphics department
New York Times: Gregor Aisch, Larry Buchanan, Joe Burgess, Ford Fessenden, Josh Keller, K.K. Rebecca Lai, Iaryna Mykhyalyshyn, Haeyoun Park, Adam Pearce, Yuliya Parshina-Kottas, Sergio Peçanha, Anjali Singhvi, Derek Watkins, and Karen Yourish.
Wall Street Journal: Wall Street Journal graphics department
Washington Post: Weiyi Cai, Emily Chow, Chiqui Esteban, Lazaro Gamio, Chris Ingraham, Laris Karklis, Denise Lu, and Tim Meko.
Los Angeles Times: Eben McCue and Angelica Quintero.
Orlando Sentinel: Gal Tziperman Lotan, Charles Minshew, Mike Lafferty and Andrew Gibson.
Ocean County Register: Ocean County Register graphics staff
Last week Philadelphia became the first large US city to introduce a soda tax. (Berkeley introduced one a few years ago, but is 1/10 the size of Philly.) The Guardian has a really nice write-up on how the tax was sold not on health benefits, but of civic benefits to the education system. But the article made me wonder if somebody had published a map looking at obesity in Philadelphia. Turns out Philadelphia Magazine published an article with just such a map from another source, RTI International. (You can find the full interactive map here.)
The map has three views, one of which allows you to see areas of statistically significant clustering. North and West Philly had some bright red clusters, whereas the western suburbs, in particular along the Main Line have some very cold blues.
Well the Democratic DC primaries were last Tuesday and Hillary Clinton won. So now we start looking ahead towards the July conventions and then the November elections. Consequently, if a day is an eternity in politics we have many lifespans to witness before November. But that does not mean we cannot start playing around with electoral college scenarios.
The Wall Street Journal has a nice scenario prediction page that leads with the 2012 results map, in both traditional map and cartogram form. You can play god and flip the various states to either red or blue. But from the interaction side the designers did something really interesting. Flipping a state requires you to click and hold the state. But the speed with which it then flips is not equal for all states. Instead, the length of hold time depends upon the state’s likelihood to be a flippable state, based on the state’s partisan voter index. For example, if you try and flip Kansas, you will have to wait awhile to see the state turn blue. But try and flip North Carolina and the flip is near instantaneous.
Starting with the 2012 cartogram
While the geographic component remains on the right, the left-hand column features either text, or as in this other screenshot, smaller charts that illustrate the points more specifically.
Charts and cartograms and text, oh my
Taken all together, the piece does a really nice job of presenting users with a tool to make predictions of their own. The different sections with concepts and analysis guide the user to see what scenarios fall within the realm of reason. But, what takes the cake is that flipping interaction. Using a delay to represent the likelihood of a flip is brilliant.
Credit for the piece goes to Aaron Zitner, Randy Yeip, Julia Wolfe, Chris Canipe, Jessia Ma, and Renée Rigdon.
I know I mentioned that I would review the coverage of the Orlando shootings this week in more depth than I did on Monday. But, allow me an interruption for a nice little piece that I wanted to get to last week. If anything, it’s far less serious.
Scatter plot
My apologies for my focus of late on small graphics, but I really think they are underappreciated component of providing context to written analysis. And this piece from FiveThirtyEight about the point scoring accompanies some good analysis that actually made some sense to this non-basketball fan.
Note the two finals-playing teams are highlighted—and importantly how the text is cleared with interrupted chart lines, a very nice touch—while other teams remain visible but unidentified for context.
Monday I examined a chart from the BBC that in my mind needlessly added confusing visual components to what could have been a straight table. So here we take a look at some other options that could have been used to tell the same story. The first is the straight forward table approach. Here I emphasised the important number, that of those killed. I opted to de-emphasise the years and the injured in the table. Also, since the bulk of my audience is from the United States, I used the two-letter states codes.
But let us presume we want a graphic because everyone wants everything to be visual and graphic. Here are two different options. The first takes the table/graphic from the BBC and converts it into a straight stacked bar chart, again with emphasis on the dead. I consolidated the list into a single column so one need not split their reading across both the horizontal and vertical.
As a stacked bar chart
And then if you examine the dates, one can find an interesting component of the data. Of the top-eight shootings, all but two occurred within the last ten years. So the second version takes the graphic component of the stacked bars from the first and places them on a timeline.
In a timeline
For those that wonder about the additional effort needed to create three different options from one data set, I limited myself to an hour’s worth of time. A little bit of thought after examining the data set can save a lot of time when trying to design the data display.
Yesterday I opined about how simple tables can convey meaningful information without the aid of unnecessary chart elements. And while we will get back to that post, I did want to take a moment to share an older piece from the New York Times I recalled and that has been updated since Orlando.
The piece uses a table to compare the gun homicide rates for various countries and compares it to other causes of death. Being killed by a gun in the Netherlands is as likely as dying by accidental gas poisoning in the United States. It puts the absurdly high gun homicide rates in the United States in a new light.
A table of death
Credit for the piece goes to Kevin Quealy and Margot Sanger-Katz.
I will be trying to do a longer piece on the data visualisations surrounding the shootings in Orlando later this week. But for starters, a simple point through this piece from the BBC—not that they are the only culprits of this. Not all data-driven stories need visualisations. Sometimes a nicely typeset table will do the job better and faster.
Green circles?
An actual table with typographic emphasis on the tables would have been better and clearer than this. Or with a little more time and effort—not that those always exist in a journalism organisation—something more appropriate to the type of data could have been designed.
Credit for the piece goes the BBC graphics department.
Well, the election battleground has been set: Trump vs. Clinton. (Yes, I know the District of Columbia has yet to vote.) For those unhappy with the choices presented, the question of “what about a third party candidate?” arises. (Yes, I know there is both a Libertarian Party and Green Party already.) Months ago, FiveThirtyEight looked at where Michael Bloomberg fell as a third party candidate, a run he briefly considered. Turns out he too moved out of the middle and into one of the four corners of the board.
The lay of the land for outsider candidates, ca January
