Well this is it. Well at least for you American readers of this blog. It’s Election Day. If you had told me that this is what it would come to almost a year and a half ago, I would have laughed. But it did. And now it comes down to all of us to vote, unless unlike me you live in a state with early voting. And then when the polls begin to close, nerds of the political and data persuasion will be following the results in state, counties, and congressional districts.
And we will be following it all because not all the people on the ballots are named Trump or Clinton. I lived eight years in Illinois. There, you guys are, among others, choosing between Kirk and Duckworth. Here in Pennsylvania, it’s between Toomey and McGinty. Here there is also a referendum on judicial retirement ages. Other districts, counties, and states will have other things upon which to vote.
And while local politics and governance impact us the most, let’s face it. We’re all here for the title fight. The heavyweight class: Trump v. Clinton. So today being Election Day, how is it going to turn out? Well I have my thoughts, check them out here, but who really knows? But who also doesn’t want to try and guess? Enter the New York Times. They have a great interactive decision tree that allows you to experiment. But even without selecting a thing you can see how much more likely a Clinton victory is. She simply has more paths to 270 electoral college votes.
Decide who wins by deciding who wins which state
But that all said, a Clinton victory is far from guaranteed. If the narrow polls are wrong in any one of her “firewall” states, Trump can win. And while it may seem forever ago, remember Bernie Sanders in Michigan? The polls had him down by at least five points to Clinton throughout the race. He won the state by two points. Now a seven point swing is a bit extreme, and I am not suggesting any state will be in that much error. But three to four points is very plausible. And Clinton’s leads? In many of these states, they are within that uncomfortable margin. So here is a plausible scenario that makes tiny New Hampshire and its four votes the deciding state.
Leaving it all to New Hampshire
So remember, if you haven’t already, go vote. And if I learned anything from Chicago, it’s vote once, vote often.
Credit for the piece goes to the New York Times graphics department.
Again, the election is next week. And since I have moved from Chicago to Philadelphia, I now find myself in a contested state. This piece comes from the New York Times and explores the polling results across the blue-leaning-but-still-a-swing-state. I find it particularly interesting just how much red and purple there is in the suburban counties of Delaware, Chester, Montgomery, and Bucks all surrounding Philadelphia. But that will only make my vote matter more than it would have had were I still living in Chicago.
But you should also check out the piece for some updates on the Senate race we have going on here. The Republican Pat Toomey is running for re-election against the Democrat Katie McGinty. The race can be described as a tossup as the polls seem to be flipping back and forth. But there is some interesting polling data to be found in the article.
Pennsylvania’s pre-election support
In about a week we will see just how Pennsylvania goes for both the presidential election and the Senate election.
70+ million people watched the debate last week. But, 2.5 million people have already voted. Me? Well in Pennsylvania there is no early voting, so you queue up on Election Day. But that also means I will have had the full election season to brush up on candidates for president and all the other offices. But what about early voters? Well the Washington Post put together an article last week about the numbers of early voters—hence my figures in the opening—and the amount of information they might have missed.
The number of early votes cast
From a design standpoint, it is a really nice article that blends together large centre-piece graphics such as the above to smaller in-line graphics to margin graphics. None are interactive; all are static. But in these cases, users do not need the freedom to interact with the charts. Instead, the designers have selected the points in time or data points more relevant to the story.
Overall the piece is solid work.
Credit for the piece goes to Kevin Uhrmacher and Lazaro Gamio.
If you didn’t already know, the Iraqi Army and Kurdish forces are moving on Mosul, a city in northern Iraq overrun by ISIS back in 2014. The New York Times has illustrated a satellite image of the Mosul area to show how the forces are progressing in their assault on the city.
All the smoke
Credit for the piece goes to the New York Times graphics department.
Yesterday scientists announced the discovery of a likely rocky planet within the habitable zone of Proxima Centauri, Sol’s (the Sun’s) nearest star. The New York Times covered the discovery with a piece full of nice explanatory graphics.
Now if we can only get onto the whole matter–anti-matter warp engine thing we could go explore the place.
Looking at the orbit of our newest neighbour
Credit for the piece goes to the New York Times graphics department.
Happy Monday, all. Some big news stories going on today, but I wanted to take a look at this piece from the New York Times. They report on the sale of Yahoo to Verizon for almost $5 billion via a piece that takes short written analysis and blends it with clear and concise charting. The effect is a quickly digestible, but data-driven content piece.
Yesterday, I left the office late and encountered a protest in front of my building organised by the Black Lives Matter movement. The protest focused on recent shooting deaths of black men by police officers in Minneapolis and Baton Rouge, but the protests clearly tapped into deeper issues regarding race, inequality, and armed police among others. But in a far more tangible sense, I am left curious what has happened to the police officers involved in these cases? I figured today would be a good day to share the New York Times work on the follow-ups. The piece looks for accountability or the lack thereof in police shootings of civilians. Additional tables look at settlements and Justice Department investigations.
What has happened afterwards
The piece does a nice job of using tables to organise and showcase the results of the investigations. Something about the colour choices feels off; I am far more quickly drawn to the negative results as opposed to the positives. Should that be the idea? Regardless, the work shows that tables, while not the sexiest visualisation form available, have an important role to play in designing displays of information.
Credit for the piece goes to Haeyoun Park and Jasmine C. Lee.
Well a little under two weeks later and here we are: Brexit. I wanted to take a moment in a slightly longer piece and comment on it. Not the results, because no, that I can leave to a pint at the pub. Instead I wanted to comment on this particular results content from the New York Times that I rather admire.
Overall the piece is not interactive; it features a static choropleth map with annotations and insets, particularly of greater London. On a side note, I would be remiss if I did not point out that similarly to the piece I wrote last week, this map omits a voting district: Gibraltar. Gibraltar, like Northern Ireland, borders the European Union directly via Spain. And despite voting overwhelmingly to remain in the EU, Gibraltar is omitted from these results.
The large format results
In a large layout, the piece makes excellent use of annotation text to indicate the overview stories for the home nations of the United Kingdom: Scotland, Wales, and Northern Ireland. Northern Ireland, of course, will likely have to deal with the reintegration of border controls between the Republic of Ireland and Northern Ireland, a point the piece makes quite clear.
Additionally the map makes use of small elements to draw attention to data points, i.e. geographies, worth noting. London dominates the urban landscape, but other important cities like Belfast, Manchester, Birmingham are circled to show the strength of Leave/Remain. I would be curious to know the rationale behind including some areas, but omitting others, e.g. the strong Remain results in Cambridge or Brighton or the strong Leave results in Boston, require knowing just where cities are located in England.
From a design standpoint, the colours used in the map work really well together in contrast to other palette choices one could make. (We will take a look at that tomorrow.) Additionally, the shape of the United Kingdom allows for contextual elements, e.g. the regional result aggregates, to be placed much closer and nearer to the results. The space also allows for those annotations to be placed near their particular geographies.
But, what makes the piece stand out is when the user consumes it on smaller screens. On a more tablet-sized screen, we see a tweaked layout.
The results on a medium-sized screen
It makes use of the remaining wide-aspect dimensions to move the greater London results into a white space carved out by the peninsula of East Anglia. While the city and home nation labels remain, the regional annotations and results are gone from the graphic. Instead, they have been placed below the map, the main and most important part of the story.
Then for mobile phone or other narrow displays, the piece degrades even further.
The results on a narrow screen
City labels and circles are gone, with the exception of London. The greater London inset moves from alongside the map to now below the map, in the Channel so to speak. This layout allows for a narrow screen to better view the geographic results and then scroll down into the districts of London that require more space to be displayed. The annotations and stories remain below the graphic.
The design of the overall piece accounts nicely for at least three different screen sizes while keeping the story constant. All the truly changes is the layout of the graphic (and the loss of a few contextual labels at the smallest of sizes). Overall, it makes for a rich and compelling—and well designed—piece on the Brexit results.
Credit for the piece goes to Gregor Aisch, Adam Pearce, and Karl Russell.
The United Kingdom voted to leave the European Union. Kind of a big deal, right? After the vote, the New York Times put together a piece on just how connected Europe remains. For example, European defence can largely be considered guaranteed through NATO, to which the United Kingdom remains. The screenshot below details which European countries participate in the Schengen Zone and the Eurozone, the former creates a common border the latter a common currency.
I personally dislike the use of squares to represent European countries, with the size determined by the population. Granted the piece opens with a large map labelling every country, but it does require a user to have the ability to abstract the geography of Europe. Adding a degree of interactivity over each square would partially resolve the issue.
Travel and currency connectivity throughout Europe
Credit for the piece goes to James Kanter and Iaryna Mykhyalyshyn.
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
