Emmanuel Macron won the French presidential election yesterday. So Guess what we have a graphic or two of this week? If you guessed Mongolian puppies, you were wrong.
Thursday afternoon the Wall Street Journal—they seem to really be upping their game of late—published an article breaking down the connection between a Le Pen support in the first round and unemployment. For me, the key to the article was the following graphic, which plots those two variables by department. The departments that she won, generally speaking, suffer higher unemployment.
Unemployment and Len Pen support
Colour coding relates to the winner of the department. I am not certain that the size of the voters in the department matters as much. But the annotation of particular departments, qualified as being limited to the French mainland—see my problem back in April about when France is more than France—flows through the several graphics in the piece.
This is a piece from the Thursday running up to Sunday’s vote. Tomorrow we will look at a piece from the day before the vote that looked at another key component of Macron’s win.
Credit for the piece goes to Martin Burch and Renée Rigdon.
Another day, another story about the administration to cover with data-driven graphics. We are approaching Trump’s 100th day in office, traditionally the first point at which we examine the impact of the new president. And well, beyond appointing a Supreme Court justice, it is hard to find a lot of things President Trump has actually done. But on his 99th day, he will also need to approve a Congressional bill to fund the government, or else the government shuts down on his 100th day. Not exactly the look of a successful head of state and government.
Why do I bring this up? Well, one of the many things that may or may not make it into the bill is funding for Trump’s wall that Mexico will pay for, but at an undetermined later date, because he wants to get started building the wall early, but late because he promised to start on Day 1.
Several weeks ago the Wall Street Journal published a fantastic piece on the current wall bordering Mexico. It examines the current state of fencing and whether parts of the border are fenced or not. It turns out a large portion is not. But, the piece goes on to explain just why large sections are not.
The wall today
You should read the full piece for a better understanding. Because while the president says building the wall will cost $10 billion or less, real estimates place the costs at double that. Plus there would be lawsuits because, spoiler: significant sections of the border wall would cross private property, national parks, and Native American reservations. Also the southern border crosses varied terrain from rives to deserts to mountains some lengths of which are really difficult to build walls upon.
But the part that I really like about the piece is this scatter plot that examines the portion of the border fenced vs. the number of apprehensions. It does a brilliant job of highlighting the section of the border that would benefit most significantly from fencing, i.e. a sector with minimal fencing and a high number of apprehensions: the Rio Grande Valley.
Where would more fencing make more of a difference
And to make that point clear, the designers did a great job of annotating the plot to help the reader understand the plot’s meaning. As some of my readers will recall, I am not a huge fan of bubble plots. But here there is some value. The biggest bubbles are all in the lower portion of fenced sectors. Consequently, one can see that those rather well-fenced sectors would see diminished returns by completing the wall. A more economical approach would be to target a sector that has low mileage of fencing, but also a high number of apprehensions—a big circle in the lower right of the chart. And that Rio Grande Valley sector sits right there.
Overall, a fantastic piece by the Wall Street Journal.
Credit for the piece goes to Stephanie Stamm, Renée Rigdon, and Dudley Althaus.
Well have we got an interesting week this week. Friday begins Trump Time. So hold onto your Twitter accounts, folks. But before we get there, I wanted to do a short week of some data-driven graphics that take a look at the state of things.
Instead of what I had intended for today, let us take a look at a new post from the Wall Street Journal that examines GDP, inflation, industrial production, and the unemployment rate in advanced economies. At its most basic level, the graphics show how many of the 39 advanced economies have a value within a one-percentage point range. The size of the dots indicates how many countries fall within the bin.
A look at advanced economies’ GDPs
What keeps getting me, however, is the colour. Nowhere does the piece explain what the colour represents. Does it represent anything? I think it might only be used to show the ranges in the values, not the number of countries sharing said values. And if that is the case, it is a poor design decision.
My eye goes to the colour first before it goes to the dot density let alone the size of the dots. Like a Magic Eye, when I stare at the piece long enough, I begin to see the overall trend for each metric. But blink and the colours reassert their visual dominance.
I wonder what would happen if the graphic settled on a single colour? My instinct says that the patterns would become far clearer, because colour change would no longer be a visual pattern needing interpretation—even though it needs no interpretation from a data standpoint. By limiting the number of visual patterns, the piece would make the data stand out more clearly and make for clearer communication.
If an editor screams something like “It needz more colourz!!1!”, I would reserve four separate colours and then use one and only one for each of the four metrics.
That all said, what the piece does really well is explain segments of the data. In the above screenshot, you can clearly see and get the overall GDP story. But then from there you read down and get explanations or callouts of the overall to provide more context and information. The designer greys out the remainder of the dots and allows the colour to emphasise those countries in focus. A lightly transparent overlay allows for the background dots to remain faintly visible while the text can clearly be read.
All in all, I am not sure where I fall on this particular piece. It does some things well, others not so much. But either way, the piece does paint an interesting portrait of populism’s potential causes.
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
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
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.
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
And my take:
My take on it all
Credit for the original work goes to the Wall Street Journal graphics department.
AT&T is attempting to merge with Time Warner in order to have more/better control of a content pipeline. But as this Wall Street Journal article points out, the concept of tie-ups between media and telecoms is not exactly new. Especially since the breakup of the old Bell Telephone company.
Merging Time Warner and AT&T
Credit for the piece goes to the Wall Street Journal graphics department.
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
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.
Today’s post is not super complex, but we all know I am a sucker for transit. Especially Amtrak. Back home on the East Coast, it runs both quickly and reliably along the Northeast Corridor and the Keystone Corridor. But as this graphic from the Wall Street Journal shows, that does not quite hold up for the longer distance Amtrak routes. Why? Freight trains.
Long distance is always difficult
Credit for the piece goes to the Wall Street Journal graphics department.
As you may know, while I presently live in Chicago, I hail from Philadelphia. I grew up there and most of my best mates did too. And some of them attended a small school called Villanova. And as you may know, their men’s basketball programme just won the national championship in dramatic fashion. So today’s post shares with you a graphic from the Wall Street Journal that explains how Villanova won the game in the final few seconds.
The final shot won it all
Credit for the piece goes to the Wall Street Journal graphics department.
