Editor’s note: I was having some technical issues last week. This was supposed to post last week.
Editor’s note two: This was supposed to go up on Monday. Still didn’t. Third time’s the charm?
Yesterday I wrote about a piece from the New York Times that arrived on my doorstep Saturday morning. Well a few mornings earlier I opened the door and found this front page: a map of the western United States highlighting the state of New Mexico.
Unlike the graphic we looked at yesterday, this graphic stretched down the page and below the fold, not by much, but still notably. The maps are good and the green–red spectrum passes the colour blind test. How the designer chose to highlight New Mexico is subtle, but well done. As the temperature and precipitation push towards the extreme, the colours intensify and call attention to those areas.
Also unlike the graphic we looked at yesterday, this piece contained some additional graphics on the inside pages.
These are also nicely done. Starting with the line chart at the bottom of the page, we can contrast this to some of the charts we looked at yesterday.
Here the designer used axis lines and scales to clearly indicate the scale of New Mexico’s wildfire problem. Not only can you see that the number of fires detected has spiked far above than the number in the previous years back to 2003. And not only is the number greater, the speed at which they’ve occurred is noticeably faster than most years. The designer also chose to highlight the year in question and then add secondary importance to two other bad years, 2011 and 2012.
The other graphics are also maps like on the front page. The first was a locator map that pointed out where the fires in question occurred. Including one isn’t much of a surprise, but what this does really nicely is show the scale of these fires. They are not an insignificant amount of area in the state.
Finally we have the main graphic of the piece, which is a map of the spread of the Calf Canyon and Hermits Peak fire, which was two separate fires until they merged into one. The article does a good job explaining how part of the fire was actually intentionally set as part of a controlled burn. It just became a bit uncontrolled shortly thereafter.
This reminded me of a piece I wrote about last autumn when the volcano erupted on La Palma. In that I looked at an article from the BBC covering the spread of the lava as it headed towards the coast. In that case darker colours indicated the earlier time periods. Here the Times reversed that and used the darker reds to indicate more recent fire activity.
Overall the article does a really nice job showing just what kind of problems New Mexico faces not just now from today’s environmental conditions, but also in the future from the effects of climate change.
Credit for the piece goes to Guilbert Gates, Nadja Popovich, and Tim Wallace.
Last night I went to see Top Gun: Maverick, the sequel to the 1986 film Top Gun. Don’t worry, no spoilers here. But for those that don’t know, the first film starred Tom Cruise as a naval aviator, pilot, who flew around in F-14 Tomcats learning to become an expert dogfighter. Top Gun is the name of an actual school that instructs US Navy pilots.
Back in the 1980s, the F-14 was the premiere fighter jet used by the Navy. But the Navy retired the aircraft in 2006 and it’s been replaced by the F/A-18E/F Super Hornet, a larger and more powerful version of the F/A-18 Hornet. So no surprise that the new film features Super Hornets instead of Tomcats.
And so I wanted to compare the two.
The important thing to note is that the Tomcat flies farther and faster than the Hornet. The F-14 was designed to intercept Soviet bombers that were equipped with long-range missiles that could sink US carriers. The Hornet was designed more of an all-purpose aircraft. It can shoot down enemy planes, but it can also bomb targets on the ground. That’s the “/A” in the designation F/A-18. In the role of intercepting enemy aircraft, the F-14 was superior. It could fly well past two-times the speed of sound and it could fly combat missions over 500 miles away from its carrier.
In the interception role, however, the F-14 had another crucial advantage: the AIM-54 Phoenix missile. It was a long-range air-t0-air missile designed for the Tomcat. It does not work with any other US aircraft and so the Hornet uses the newer AIM-120 AMRAAM, a medium-range air-to-air missile.
There are plans to design a long-range version of the AIM-120, but it doesn’t exist yet and so the Hornet ultimately flies slower, less distance, and cannot engage targets at longer ranges.
However, dogfighting isn’t about long-range engagements with missiles. It’s about close-up twisting and turning to evade short-range missiles and gunfire. And even in that, the F-14 could use four AIM-9 Sidewinder missiles whereas the F/A-18 carries only two on its wingtips.
By the 2000s F-14 was an older aircraft and while the moving, sweeping wings look cool, they cause maintenance problems. They were expensive to maintain and troublesome to keep in the air. But they are arguably superior to what the Navy flies today.
Moving forward, the Navy is beginning to introduce the F-35 Lightning II to the carrier fleets. Maybe I’ll need to a comparison between those three.
Friday the Bureau of Labour Statistics published the data on the jobs facet of the American economy. Saturday morning I woke up and found the latest New York Times visualisation of said jobs report waiting for me at my door. The graphic sat\s above the fold and visually led the morning paper.
We have a fairly simple piece here, in a good way. Two sections comprise the graphic. The first uses a stacked bar chart to detail the months wherein the US economy lost jobs during the previous two and a half years. We can take a closer look in this second photo that I took.
Here we can see the stacked bars pile up with the most recent bars to the right. Some of the larger bars have labels stating the number of jobs either lost (top) or gained (bottom). I’m not normally a fan of stacked bar charts, because they don’t allow a reader to easily discern like-for-like changes. In this instance, the goal is to show how close all the little bits have come towards making up the three negative bars. Where I take issue is that I would prefer the designers used some sort of scale to indicate even a rough sense of how many jobs the various bars represent.
That issue crops up again to a slightly lesser degree with the bottom set of graphics. These compare the growth of hourly earnings and inflation both from February 2020. During the first few months of the pandemic and its recession, you can see earnings for those most directly impacted by shutdowns drop. But there is no negative scale accompanying the positive scale and that makes it difficult to determine just how far earnings fell for those in, say, leisure and hospitality.
The second part of the graphic works overall, however it’s just some of the finer design details that are missing and take away from the graphic’s overall effectiveness.
This all fits part of a larger trend in data visualisation that I’ve been noticing the last few months. Fewer charts seem to be using axes and scales. It’s not a good thing for the field. Maybe some other day I’ll write some things about it.
For this piece, though, we have an overall solid effort. Some different design decisions could have made the piece clearer and more effective, but it still does the job.
Credit for the piece goes to Ben Casselman, Ella Koeze, and Bill Marsh.
I noticed an interesting thing this morning. Over the holiday weekend I bookmarked a BBC News article about new airlines because it included a small graphic showing the number of airlines started during the pandemic (32) and the number of new airlines lost during the pandemic (55). The graphic used a stock three-dimensional illustration of a passenger airlines with a blank white body. From the top of the body rose two white bars, next to the left was the shorter of the two with a 32. The right was taller and had a 55. Above each was a header saying something to the effect of “Airlines started in 2020” and “Airlines lost in 2020”, respectively. Funny thing this morning that when I returned to the bookmark with this post in mind, the article’s graphic had disappeared.
This weekend I happened to start re-reading 1984, George Orwell’s classic dystopian novel about a man named Winston Smith. He works in the Records Department and is tasked with “rectifying” misstatements. I had just finished reading the section where Orwell describes Smith’s work wherein he takes previously published newspaper articles about statistics and figures and then edits them to include new numbers aligned with the actual outputs. This way should anyone read the old article for evidence of a previous past, they find the output forecasts have always been correct. He then destroys the written record of the old past by dumping it into a memory hole, a pneumatic tube that delivers it straight to a furnace where the old past is incinerated and thus replaced with Smith’s new version.
When I read the article again, because the graphic was gone, I read a paragraph that had figures for 2021. I cannot recall those numbers being present earlier this weekend. But they are roughly where I remember the old graphic being. Yet the article includes no note about any edits to a previous version let alone what those edits may have been. And so now I am left wondering if I really saw what I think I remember that I saw. How very Orwellian.
But let’s assume I did see what I thought I saw, the graphic was actually unnecessary. It presented two figures, 32 and 55. The bar chart itself had no axis labels and that made it a bit difficult to believe the numbers themselves. It did not help that the white bars blended almost seamlessly into the white body of the airliner. Moreover, the graphic was large and fit the full width of the text column. For two figures.
My initial goal was to show this graphic I made to show just how little space truly needs to be used to show an effective graphic. I also changed the direction of the bars. Instead of making one bar about the positive change and the other the negative change, I made both bars about the change. Therefore the one bar moved upwards with the positive (32) and the other downwards with the negative (55). I then plotted a dot to show the net change between the two. Yes, 32 airlines were created in 2020. But that still made for a net loss of 23 that year.
But because the graphic was missing and there was some new text for 2021 figures, I decided to incorporate them as well to show how the trend basically continued year over year.
I left the white space to the right to illustrate how you really do not need a full-width graphic to display only six data points, itself a three-fold increase on the original graphic’s data content. The original graphic contained more illustrated plane than it did data content.
Graphics should be about the data, not about the splashy, flashy, whizbang background content that ultimately distracts our attention away from what should be the focal point of the piece: the data. The article still contains photos of planes with the livery of the new airlines, of empty terminals to represent the pandemic losses, and portraits of executives. This graphic did not need an illustrated plane taking over the graphic. It needed to only show those two numbers.
I would even contend that the article could have made do with a simple factette, two big numbers. Airlines closed in 2020 and the airlines opened. It need not be fancy, but it quickly delivers the big numbers with which the reader should be concerned. You don’t need to see an aircraft or a terminal. You could add some colour to the numbers or even a minus sign as there is a significant difference between a 55 and a -55. But all in all, the graphic need not be full width like it was originally.
But I think we should all keep in mind the value of transparency. The graphic did exist, of that I am certain. But future readers or even my sanity cannot be sure that it did. And in an era where “fake news” and fact-checking are important, I wonder if we need to be including corrections notes in more of our news articles. Because if we lose faith in our news, we have little left to lean upon in our societal discourse about the events of our time.
The Wall Street Journal put together a nice piece about the uptick in elementary school shootings, both in the number of shootings and the number of deaths. It used two bar charts, regular and stacked, and a heat map to tell the story. The screenshot below is from a graphic that looks at the proportion of school shootings that occur at elementary schools. They are not as common, but as other graphics in the article show, they can be quite deadly.
The graphic above does a nice job of distilling the horror of a tragedy into a single rectangle. That is an important task because it allows us to detach ourselves and more rationally analyse the situation. Unfortunately the analysis is that yes, Virginia, things really have been getting worse.
Overall the article is simple but soberingly effective. School shootings are a problem with which American society has not dealt and my cynical side believes with which we will continue to not deal.
Credit for the piece goes to James Benedict and Danny Dougherty.
Last week the Washington Post published a nice long-form article about the troubles facing the Colorado River in the American and Mexican west. The Colorado is the river dammed by the Hoover and Glen Canyon Dams. It’s what flows through the Grand Canyon and provides water to the thirsty residents of the desert southwest.
But the river no longer reaches the ocean at the Gulf of California.
Why? Part drought, part population growth, and part economic activity. The article does a great job of exploring the issue and it does so through the occasional use of information graphics. This screenshot captures the storage capacity of the two main dams, Lake Mead and Lake Powell, created by the Hoover and Glen Canyon Dams, respectively. You may have heard of these recently because the water shortages presently affecting the region have brought reservoir levels to some of their lowest levels in years. And that means people have been finding all sorts of things.
But the graphic does a nice job of showing just how low things have gotten of late. Naturally I am curious what the data looks like on a longer timeline. Hoover Dam, of course, began during the administration of Herbert Hoover but was completed during the Franklin Roosevelt administration—who also renamed the dam as Boulder Dam though Congress reversed that change in 1947. Lake Powell came along three decades later and so the timelines would not be the exact same, but I am curious all the same.
The overall article makes sparse use of the graphics and they occupy much less space in the design than the numerous accompanying photographs. But the balance in terms of content works, I just would have preferred the charts and maps a bit larger.
Contrast this to what we explored last week in a New York Times piece, specifically the online version. There we saw graphics with no headers, data descriptors, axes labels, &c. Here we see the Washington Post was able to create a captivating piece but treat the data and information—and the reader—with respect. There are fewer graphics in this piece, but the way they were handled puts this leaps and bounds above the online version we looked at last week.
Credit for the piece goes to a lot of people, but the graphics specifically to John Muyskens. The rest of the credits go to the author Karin Brulliard and then just copying and pasting from the page: Editing by Amanda Erickson and Olivier Laurent. Photography by Matt McClain. Video by Erin Patrick O’Connor and Jesús Salazar. Video editing by Jesse Mesner-Hage and Zoeann Murphy. Graphics by John Muyskens. Graphics editing by Monica Ulmanu. Design and development by Leo Dominguez. Design editing by Matthew Callahan and Joe Moore. Copy editing by Susan Stanford. Additional editing by Ann Gerhart.
Yesterday I focused on the big graphic from the New York Times that crossed the full spread of the front/back page. But the graphic was merely the lead graphic for a larger piece. I linked to the online version of the article, but for this post I’m going to stick with the print edition. The article consists of a full-page open then an entire interior spread, all in limited colour. The remainder of the extensive coverage consists of photo essays and interviews that understandably attempt to humanise the data points, after all, each dot from yesterday represented one individual, solitary, human being. That is an important element of a story like this and other national and international tragedies, but we also need to focus on the data and not let the emotion of the story overwhelm our rational and logical analysis.
From a data visualisation standpoint the first page begins simply enough with a long timeline of the Covid-19 pandemic charting the number of absolute deaths each day. As we looked at yesterday, the absolute deaths tell part of the story. But if we were to have looked at the number of absolute cases in conjunction with the deaths, we could also see how the virus has thus far evolved to be more transmissible but less lethal. Here the number of daily deaths from Omicron surpassed Delta, but fell short of the winter peak in early 2021. But the number of cases exploded with Omicron, making its mortality rate lower. In other words, far more people were getting sick, but as far fewer were dying.
An interesting note is that if you take a look at the online version, there the designers chose a more stylised approach to presenting the data.
Here they kept the dot approach and simply stacked and reordered the dots. However, I presume for aesthetic reasons, they kept the stacking loose dots and dropped all the axis lines because it does make for a nice transition from the map to this chart. But they also dropped all headings and descriptors that tell the reader just what they are looking at. These decisions make the chart far less useful as a tool to tell the data-driven element of the story.
There are three annotations that label the number of deaths in New York, the Northeast, and the rest of the United States. But what does the chart say? When are the endpoints for those annotations? And then you can compare the scale of the y-axis of this chart and compare it to the printed version above. A more dramatic scale leads to a more dramatic narrative.
This sort of visual style of flash and fancy transitions over the clear communication of the data is why I find the print piece more compelling and more trustworthy. I find the online version, still useful, but far more lacking and wanting in terms of information design.
The interior spread is where this article shines.
From an editorial design standpoint, the symmetry works very well here. It’s a clear presentation and the white space around the graphic blocks lets that content shine as it should in this type of story. Collectively these pieces do a great job telling the story of the pandemic thus far across the nation. The graphics do not need a lot of colour and make do with sparse flash. Annotations call the reader’s attention to salient points and outliers.
From a content standpoint, I would be particularly curious if we have robust data for deaths by education level. Earlier this year I recall reading news about a study that said education best correlated to Covid cases, and I would be curious to see if that held true for deaths. Of course these charts do a great job of showing just how effective the vaccines were and remain. They are the best preventative measure we have available to us.
Here I disagree with the design decision of how to break down the states into regions. The Census Bureau breaks down the United States into four regions using the same names as in the graphic above. However, if you look closely at the inset map, you will see that Delaware, Maryland, and West Virginia in particular are included as part of the Northeast. (I cannot tell if the District of Columbia is included as part of the Northeast or South.)
Now compare that to the Census Bureau’s definition:
If you ask me to include Delaware and Maryland as part of the Northeast, well, if you’re selling it, I’ll buy it. After all, just because the Census Bureau defines the United States this way does not mean the New York Times has to. Both are connected to the Northeast Corridor via Amtrak and I-95 and are plugged into the Megalopolis economy. Maybe the Potomac should be the demarcation between Northeast and South. But I struggle to understand West Virginia. Before you go and connect it to the Northeast, I would argue that West Virginia has far more in common with the Midwest geographically, economically, and culturally.
More critically, given this issue, it strikes me as a serious problem when the online version of the chart—with the aforementioned issues—does not even include the little inset to highlight this at best unusual regional definition.
And so while I have reservations about the data—how would the data have looked if the states were realigned?—the design of the line charts overall is good.
Again, I am talking about the print version, not that online graphic. I would argue that the above screenshot is barely even a chart and more “data art” or an illustration of data. Consider here, for example, that for the South we have that muted slate blue for the dots, but the spacing and density of the dots leads to areas of lighter slate and darker slate. But a lighter slate means more space between stacked dots and darker slate means a more compact design. A lighter colour therefore pushes the “edge” of the line further up the y-axis and artificially inflates its value, not that we can understand what that value is as the “chart” lacks any sort of y-axis.
Finally the print piece has a set of small multiples breaking down deaths by income in the three largest American cities: New York, Los Angeles, and Chicago. These are just great little charts showing the correlation between income and death from Covid, organised by Zip code.
But this also serves as a stark reminder of just how much better the print piece is over the online version. Because if we take a look at a screenshot from the online article, we have a graphic that addresses all the issues I pointed out earlier.
I am left to wonder why the reader of the online version does not have access to this clearer and more accurate representation of the data throughout the piece?
To me this article is a great example of when the print piece far exceeds that of the online version. Content-wise this is a great story that needed to be told this weekend, but design wise we see a significant gap in quality from print to online. Suffice it to say that on Sunday I was very glad I received the print version.
Credit for the piece goes to Sarah Almukhtar, Amy Harmon, Danielle Ivory, Lauren Leatherby, Albert Sun, and Jeremy White.
Earlier this week I read an article in the Philadelphia Inquirer about the political prospects of some of the candidates for the open US Senate seat for Pennsylvania, for which I and many others will be voting come November. But before I get to vote on a candidate, members of the political parties first get to choose whom they want on the ballot. (In Pennsylvania, independent voters like myself are ineligible to vote in party primaries.)
This year the Republican Party has several candidates running and one of them you may have heard of: Dr. Oz. Yeah, the one from television. And while he is indeed the front runner, he is not in front by much as the article explains. Indeed, the race largely had been a two-person contest between Oz and David McCormick until recently when Kathy Barnette pulled just about even with the two.
In fact, according to a recent poll the three candidates are all statistically tied in that they all fall within the margin of error for victory. And that brings us to the graphic from the article.
Conceptually this is a pretty simple bar chart with the bar representing the share of the support of those polled. But I wanted to point out how the designer chose to represent the margin of error via hatched shading to both sides of the ends of the red bar.
In some cases the hatch job does not work for me, particularly with those smaller candidates where the bar goes negative. I would have grave reservations about the vote should any candidate win a negative share of the vote. 0% perhaps, but negative? No. I also don’t think the grey hatching works as well over the grey bar in particular and to a lesser degree the red.
I have often thought that these sorts of charts should use some kind of box plot approach. So this morning I took the chart above and reworked it.
Overall, however, I really like this designer’s approach. We should not fear subtlety and nuance, and margins of error are just that. After all, we need not go back too far in time to remember a certain candidate who thought she had a presidential election locked up when really her opponent was within the margin of error.
Everyone knows inflation is a thing. If not, when was the last time you went shopping? Last week the Boston Globelooked specifically at children’s shoes. I don’t have kids, but I can imagine how a rapidly growing miniature human requires numerous pairs of shoes and frequently. The article explores some of the factors going into the high price of shoes and uses, not very surprisingly, some line charts to show prices for components and the final product over time. But the piece also contains a few bar charts and that’s what I’d like to briefly discuss today, starting with the screenshot below.
What we see here are a list of countries and the share of production for select inputs—leather, rubber, and textiles—in 2020. At the top we have a button that allows the user to toggle between the two and a little movement of the bars provides the transition. The length of the bar encodes the country in question’s market share for the selected material.
We also have all this colour, but what is it doing? What data point does the colour encode? Initially I thought perhaps geographic regions, but then you have the US and Mexico, or Italy and Russia, or Argentina and Brazil, all pairs of countries in the same geographic regions and yet all coloured differently. Colour encodes nothing and thus becomes a visual distraction that adds confusion.
Then we have the white spaces between the bars. The gap between bars is there because the country labels attach to the top of the bars. But, especially for the top of the chart, the labels are small and the gap is at just the right height such that the white spaces become white bars competing with the coloured bars for visual attention.
The spaces and the colours muddy the picture of what the data is trying to show. How do we know this? Because later in the article we get this chart.
This works much better. The focus is on the bars, the labelling is clear, almost nothing else competes visually with the data. I have a few quibbles with this design as well, but it’s certainly an improvement over the earlier screenshot we discussed. (I should note that this graphic, as it does here, also comes after the earlier graphic.)
My biggest issue is that when I first look at the piece, I want to see it sorted, say greatest to least. In other words, Furniture and bedding sits at the top with its 15.8% increase, year-on-year, and then Alcoholic beverages last at 3.7%. The issue here, however, is that we are not necessarily looking at goods at the same hierarchical level.
The top of the list is pretty easy to consider: food, new vehicles, alcoholic beverages, shelter, furniture and bedding, and appliances. We can look at all those together. But then we have All apparel. And then immediately after that we have Men’s, Women’s, Boys’ , Girls’, and Infants’ and toddlers’ apparel. In other words, we are now looking at a subset of All apparel. All apparel is at the same level of Food or Shelter, but Men’s apparel is not.
At that point we would need to differentiate between the two, whilst also grouping them together, because the range of values for those different sub-apparel groups comprise the aggregate value for All apparel. And showing them all next to Food is not an apples-to-apples comparison.
If I were to sort these, I would sort by from greatest to least by the parent group and then immediately beneath the parent I would display the children. To differentiate between parent-level and children-level, I would probably make the bars shorter in the vertical and then address the different levels typographically with the labels, maybe with smaller type or by putting the children in italic.
Finally, again, whilst this is a massive improvement over the earlier graphic, I’d make one more addition, an addition that would also help the first graphic. As we are talking about inflation year-on-year, we can see how much greater costs are from Furniture and bedding to Alcoholic beverages and that very much is part of the story. But what is the inflation rate overall?
According to the Bureau of Labour Statistics, inflation over that period was 8.5%. In other words, a number of the categories above actually saw price increases less than the average inflation rate—that’s good—even though they were probably higher than increases had been prior to the pandemic—that’s bad. But, more importantly for this story, with the addition of a benchmark line running vertically at 8.5%, we could see how almost all apparel and footwear child-level line items were below the inflation rate. But the children and infant level items far exceeded that benchmark line, hence the point of the article. I made a quick edit to the screenshot to show how that could work in theory.
Overall, an interesting article worth reading, but it contained one graphic in need of some additional work and then a second that, with a few improvements, would have been a better fit for the article’s story.
Last night we had breaking news on two very big fronts. The first is that somebody inside the Supreme Court leaked an entire draft of the majority opinion, written by Justice Alito, to Politico. Leaks from inside the Supreme Court, whilst they do happen, are extremely rare. This alone is big news.
But let’s not bury the lede, the majority opinion is to throw out Roe v. Wade in its entirety. For those not familiar, perhaps especially those of you who read me from abroad, Roe v Wade is the name of a court case that went before the United States Supreme Court in 1971 and was decided in 1973. It established the woman’s right to an abortion as constitutionally protected, allowing states to enact some regulations to balance out the state’s role in concern for women’s public health and the health of the fetus as it nears birth. Regardless of how you feel about the issue—and people have very strong feelings about it—that’s largely been the law of the United States for half a century.
To be fair, the draft opinion is just that, a draft. And the supposed 5-3 vote—Chief Justice Roberts is reportedly undecided, but against the wholesale overthrow of Roe—could well change. But let’s be real, it won’t. And even if Roberts votes against the majority he would only make the outcome 5-4. In other words, it looks like at some point this summer, probably June or July, tens of millions of American women will lose access to reproductive healthcare.
And to the point of this post, what will that mean for women?
This article by Grid runs down some of the numbers, starting with laying out the numbers on who chooses to have abortions. And then ultimately getting to this map that I screenshot.
The map shows how far women in a state would need to travel for an abortion with Roe active as law and without. I’ve used the toggle to show without. Women in the south in particular will need to travel quite far. The article further breaks out distances today with more granularity to paint the picture of “abortion deserts” where women have to travel sometimes well over 200 miles to have a safe, legal abortion.
I am certain that we will be returning to this topic frequently in coming months, unfortunately.