A Look Back

Well, we are one day away now. And I’ve been saving this piece from the New York Times for today. They call it simply 2016 in Charts, but parts of it look further back while other parts try to look ahead to new policies. But all of it is well done.

I chose the below set of bar charts depicting deaths by terrorism to show how well the designers paid attention to their content and its placement. Look how the scale for each chart matches up so that the total can fit neatly to the left, along with the totals for the United States, Canada, and the EU. What it goes to show you is best summarised by the author, whom I quote “those 63 [American] deaths, while tragic, are about the same as the number of Americans killed annually by lawn mowers.”

Deaths by terrorism
Deaths by terrorism

I propose a War on Lawn Mowers.

The rest of the piece goes on to talk about the economy—it’s doing well; healthcare—not perfect, but reasonably well; stock market—also well; proposed tax cuts—good for the already wealthy; proposed spending—bad for public debt; and other things.

The commonality is that the charts work really well for communicating the stories. And it does all through a simple, limited, and consistent palette.

But yeah, one day away now.

Credit for the piece goes to Steven Rattner.

Diversity in the 115th Congress

Well, we have arrived at 2017. We all know the big political story in the executive branch. But we also saw elections in the legislative branch. But how different will the 115th Congress look from the 114th? The Wall Street Journal took a look at that in an article.

Congressional diversity
Congressional diversity

The article’s graphic does a nice job showing the two different compositions. But if we are truly interested in the growth, we could use a line chart to better showcase the data. So what did I do last night? I made that chart. But as I was playing with the data I saw some numbers that stood out for me. So I compared the proportion of minorities in the original graphic to their proportion of the US national population, per Census Bureau data.

Redesigning the original graphic
Redesigning the original graphic

The line charts, broken out into the House vs. the Senate and then into the two parties, do a really good job of showing how the growth is not equally distributed between the two parties. And the reverse of that is that it shows how one party has failed to diversify between the two congresses.

The 115th Congress might be more diverse than ever. But it has a long way to go.

Credit for the original piece goes to the Wall Street Journal graphics department.

The Electoral College

Well today we elect the president of the United States. Wait! you say, did we not just do that a few weeks ago?

Not really, no.

In the run up to the election, I and others saw the possibility that this election could result in a gap between the national popular vote and the electoral college vote. And people think that unfair. Consequently I decided to start working on a series of graphics to help explain the system. But before I could finish, the Washington Post published this piece that I think does a strong job. So, I am going to point you there instead.

The United States is not a democracy, but a federal, democratic republic. Though that may smack of wordsmithery, it is an important distinction. We are a democratic republic in that we elect people to represent us, we do not directly vote on matters of government. And then that federal bit. The United States was formed by sovereign states, i.e. the colonies and other independent republics like Texas and (sort of) California. Others were territories belong to sovereign states that we acquired through negotiation, e.g. the Louisiana territory and Florida. In short, the United States is not a unitary state ruled by an all-powerful central government. The central government only has the authority granted to it by the states and territories entering the union.

States are intended to be equal, but the democratic republic bit means the people need to have their say. So the federal House of Representatives gets a set number of seats divided proportionally by population (as determined by the US Census) while the Senate represents all states equally with senators. The House is elected by the people every two years and thus is more in tune with national public sentiment. The Senate serves as the more deliberative body tempering perhaps overly reactionary House legislation. It also serves to represent the interests of the state governments. Initially, you did not even vote for senators. Those were chosen by your state governments, often the state legislature. (I will save that topic for another day.)

The electoral college of 538 members comes from each state’s House delegation and its two senators. And because this is a federal, i.e. state-led, republic, each state determines how to divvy up their votes. Most states do winner-take-all. Two, Maine and Nebraska, allocate them based on who wins the House districts and then an additional two (from the number of senators) to the overall state winner.

That very complicated system was designed to ensure that states with smaller populations are not summarily outvoted and overruled by the largest of states. This initially helped the smaller states in the Northeast like Maine, Rhode Island, Connecticut, and Delaware, but also the slave states like Georgia. In 2016, this means that the states of the Great Plains and Rocky Mountains receive overrepresentation at the expense of the larger states like California, Texas, New York, and even my Pennsylvania.

The graphics from the Washington Post do a great job of showing not just how states today are over- or under-represented, but how that has changed since 1960. That is an important date given the Voting Rights Act that attempted to break down systemic injustices against minorities, particular blacks, in elections.

This small multiple map of the United States shows representation changes over time. Really well done.
This small multiple map of the United States shows representation changes over time. Really well done.

Is the electoral college “fair”? If this was a unitary republic, no. I doubt anyone would or could argue that point. But the United States is not and was not meant to be a unitary republic. We are a collection of sovereign states that grant power to a federal government. So in that sense, the electoral college is a fair, albeit not perfect, system that seeks to reallocate electoral power from high population states to low population states.

Credit for the piece goes to Denise Lu.

Detroit’s Housing Market

A few weeks ago the Wall Street Journal published a graphic that I thought could use some work. I like line charts, and I think line charts with two or three lines that overlap can be legible. But when I see five in five colours in a small space…well not so much.

So I spent 45 minutes attempting to rework the graphic. Admittedly, I did not have source data, so I simply traced the lines as they appeared in the graphic. I kept the copy and dimensions and tried to work within those limitations. Clearly I am biased, but I think the work is now a little bit clearer. I also added for context the Great Recession, during which credit tightened, ergo more properties would have been likely purchased with cash. It’s all about the context.

The original:

The original graphic
The original graphic

And my take:

My take on it all
My take on it all

Credit for the original work goes to the Wall Street Journal graphics department.

Pill Popping Power

But not likely. As this FiveThirtyEight piece explains, steroids are not likely the cause of the increased power exhibited this year by Major League Baseball. The article goes into a bit of detail, but this set of small multiples does a nice job comparing several other factors that could be at play.

How different factors increased power or not
How different factors increased power or not

What I like about the piece is how each line chart is centred on the year where the factor came into play. And then to the right and left are ten years before and after. Maybe a little bit more could have been done to highlight the differing years—I admit that I missed that at first—but the concept itself is solid.

Credit for the piece goes to the FiveThirtyEight graphics department.

OD’ing in Philly

Another day in Philadelphia, another post of Philly data visualisation work. Here we have a piece from 2015 that was updated earlier this spring. It looks at overdose rates in the Philadelphia region, including parts of New Jersey. It does include a map, because most pieces like this typically do. However, what I really find interesting about the piece is its use of small multiple line charts below to take a look at particular counties.

The piece overall is not bad, and the map is actually fairly useful in showing the differences between Jersey and Philadelphia (although why New Jersey is outlined in black and the Philly suburban counties are not I do not know). But I want to take a look at the small multiples of the piece, screenshot below.

Philly area counties
Philly area counties

You can see an interesting decision in the choice of stacked line charts. Typically one would compare death rates like for like and see whether a county is above, below, or comparable to the state, local, or national averages. But combining the three gives a misleading look at the specific counties and forces the user to mentally disentangle the graphic. I probably would have separated them into three separate lines. And even then, because of the focus on the counties, I would have shifted the colour focus to the specific counties and away from the black lines for the national average. The black is drawing more attention to the US line than to the county line.

Credit for the piece goes to Don Sapatkin.

National Heights

And by this title I am not referencing McKinleys, K2s, or Everests. No, the BBC published this piece on the changing average heights of citizens of various countries. This was the graphic they used from the report’s author.

National heights of people
National heights of people

Personally speaking, I do not care for the graphic. It is unclear and puts undue emphasis on the 1914 figure by placing the illustration in the foreground as well as in the darkest colour. I took a thirty-minute stab at re-designing the graphic and have this to offer.

A comparison of the six heights
A comparison of the six heights

While I admit that it is far from the sexiest graphic, I think it does a better job of showing the growth than decline of national heights by each sex in each of these three select countries. Plus, we have the advantage of not needing to account for the flag emblems. Note how the black bars of Egypt disappear into the black illustration of the person.

Credit for the piece goes to the eLife graphics department.

Expensive Wines

Another Monday, another week, another post. But this week we will try to get by without any more Brexit coverage. So what better way to cure a hangover than with more booze? So let’s start with some fancy wine.

I meant to post this piece a little while back, but yeah that unmentionable thing occurred. Now we have the time to digest as we sip and not slam our beverage of choice—the Sun’s over the yardarm somewhere I figure. FiveThirtyEight took a look at expensive wines. It compares the pricing at various vintages for France, California, and other wine-producing regions. On the balance, a very smart piece with some great graphics.

But since I had to pick just one, since this isn’t a full-on critique, I opted for this set of small multiples. It compares the price vs. vintage for a number of California red wines. (One of which I had this weekend.)

California reds
California reds

Credit for the piece goes to Oliver Roeder.

Comparing the Brexit Results Designs: Part 3

Last one of these critiques—I promise. Earlier this week I looked at the New York Times’ coverage and the BBC’s coverage. Well, today I want to examine the Guardian’s coverage of the Brexit vote results. This piece differs the most from the preceding work and it starts right from the top, literally.

The faces of the campaigns
The faces of the campaigns

I am not the biggest fan of the illustrations of David Cameron and Boris Johnson, but in a sense, neither is a throw-in. For the last few months, the Guardian has been using these and similar illustrations of US presidential candidates to tie results into different political camps. Thus in that sense, they do fit the Guardian’s current brand. Interestingly, neither remains (pun intended) in the picture for the future of the Tories.

Data-wise, however, the decision to use the bar chart at the outset of the piece reflects an understanding of the importance of the top-line number. Districts count, but only at that granular level I discussed. What truly matter, though, is the aggregate. And this is a no-doubt-about-it means of conveying that information. (I will admit the David Cameron frowny face does help a wee bit.)

And if the use of big numbers and illustrations at the top of the piece broke with the choropleth map we saw with the New York Times and the BBC, well, we have another clear break.

Hexagonal representation
Hexagonal representation

Instead of using a geographic map, the Guardian employs a cartogram with hexagons. I have covered similar uses a several times before today. The hexagon shape allows better retention of familiar geographic shapes, while still providing a means of solving the small district problem, especially in places like central London.

From another design perspective, that of colour, we see an improvement over the blue–yellow spectrum used by the BBC. You may recall from yesterday:

Having multiple tints and shades of yellow makes the map difficult to read.

Here, the Guardian instead opted for a simplified, and easier to read, two-step split. Bright blue and yellow with each have a call it half-tint. With only two blues and, more importantly, two yellows to distinguish, the map becomes easier to read. The trade-off, the darker of the colours represents anything above a 15% majority.

Clicking on the map then provides with a small summary of the district results.

A look at Watford
A look at Watford

Here we see nothing too dissimilar from how the BBC treated the interaction with their map. A small, subtle design element I enjoy, however, is the inclusion of the national average. The 50% marker indicates clearly which side won, but the tick below the bar gives the reader context of where the district fell into relation to the remainder of the country.

And that leads us into the next set of comparisons.

Comparisons based on demographics
Comparisons based on demographics

The Guardian took local district results and compared them against several different demographic and socio-economic indicators. This allowed them to present various correlations of the vote. It turns out that higher education correlated best with the results of the UK vote. From a design perspective, the linked circles provides some stability. However, I would have preferred the ability to click a geography and have it remain sticky and bring up the specific figures. Additionally, some sort of text search for geographies would be helpful.

And then the Guardian’s piece closes as strongly as it opened.

Votes along the Tyne
Votes along the Tyne

The piece examines three riverside areas to provide specific analysis to the vote. The screenshot above focuses on the Tyne, which runs alongside the aptly named Newcastle upon Tyne. The Guardian uses the previous general election results for the area to contrast with the referendum results. It does similar analysis for the Thames (London) and the Mersey (Liverpool).

Similar to the New York Times piece, the Guardian’s piece responds well to viewing the content on a small screen. The changes are less complex and they deal mostly with the arrangement of the various components instead of the layout of contextual data. But the Guardian clearly considered how the piece would work on a mobile phone up through a widescreen monitor.

Overall the piece is quite strong and does an excellent job of showcasing the results data and providing insightful analysis that complements the vote totals.

Credit for the piece goes to the Guardian graphics department.

Coverage of the Orlando Shootings

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
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.

The New York Times takes a more detailed approach.

The New York Times layout
The New York Times layout

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
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
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
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.

Then we have the Orlando Sentinel’s timeline graphics.

The Orlando Sentinel's layout
The Orlando Sentinel’s layout

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
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.

Lastly we have the National Post, which is at the other end of the spectrum.

The National Post's layout
The National Post’s layout

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

National Post: Mike Faille and Dean Tweed.