interactive design – Coffee Spoons

Pour One Out—For Your Liver

Last month Vox published an article about the trend in America wherein people are drinking less alcohol. They cited a Gallup poll conducted since 1939 and which reported only 54% of Americans reported partaking in America’s national tipple—except for that brief dalliance with Prohibition—making this the least-drinking society since, well, at least 1939.

Vox charted the data in the following graphic.

Overall, the graphic is good. Here the use of individual dots makes clear the years wherein Gallup conducted the survey. In some of the earlier periods it was not an annual question. The line weight is just thick enough to be distinct and the axis lines are lighter and in a light grey to create contrast.

The line uses the colour black. You really do not need colour in a line chart—or a bar chart or anything really charting only a single variable—unless it stems from your branding. Admittedly, Vox is now membership-supported and I am not a member so I only can read a few articles and am unsure if their chart brand standards now use black as their primary colour.

I can quibble with the axis label, “Drink alcoholic beverages”, because that should or could be included in the graphic header or sub-header. But putting in the graphic space is fine. And I like it next to the line instead of in a legend above the chart.

But the thing that irks me is the use of data labels at specific years. You could argue for the inclusion of the label at the current year, the 54%. You could argue for the maximum value, the 71%, but I would not.

Labels distract the reader’s eyes from the line itself and the line is the story. Calling out the 54% and maybe the 71%, fine, but the random 67%? A second random 67%? Those are unnecessary distractions that take away from the chart’s communicative value.

I have mentioned it before and I will mention it again, the use of excessive data labels plagues data visualisation these days. I need to write it up in a longer piece and someday I will. Here is a crude mockup of the graphic without the data labels.

The line’s pattern is easier to spot—fewer distractions for the eyes. The pattern is clear that since the late 1970s roughly 65% of Americans drank alcohol, with the occasional dip, including one in the late 1980s and early 1990s and a briefer one in the mid-90s. I wonder if the 1989–90 dip relates to the recession. The sudden dip in the mid-90s confounds me. But the point is these things are easier to spot without labels the sparkling distraction of the labelling.

Again, overall, the graphic is good. And these days the state of information design and data visualisation is…not great, Bob. So I do not want to critique this graphic too heavily. But a tweak or two would make it even better.

Credit for the piece goes to Dylan Scott.

Racing to the Final Finish Line

Thoroughbred racing is big business. And Philadelphia’s Parx Casino owns a racing track that, in a recent article in the Philadelphia Inquirer, has seen a number of horse deaths. The article includes a single graphic worth noting, a bar chart showing the thoroughbred death rate. The graphic contrasts rising deaths at Parx with a national trend of declining deaths.

Traditionally rate statistics are shown using dots or line. The idea is that a bar represents counting stats, i.e. how many total horses died. I understand the coloured bars present a more visually compelling graphic on the page, and so I can buy that reason if you are selling it.

Labelling each datapoint, however, with a grey text label above the bar remains unnecessary. They create sparkling, distracting grey baubles above the important blue bars. If you need the specificity to the hundredths degree, use a table. This graphic is also interactive. The mouseover state is where a specific number can be provided, adding an additional layer or level of depth in a progressive disclosure of information.

Credit for the piece goes to Dylan Purcell.

Fear the Floodwaters

This past weekend saw some flooding along the East Coast due to the Moon pulling on Earth’s water. In Boston that meant downtown flooding, including Long Wharf. The Boston Globe’s article about the flooding dwelt with more impact, causes, and long-term forecasts—none of which really warranted data visualisation or information graphics. Nonetheless, the article included a long time series examining the change in Boston’s sea level relative to the mean.

For me, the graphic works really well. The data strips out the seasonal fluctuations and presents the reader with a clear view of rising sea levels in Boston. If the noisiness of the red line distracts the reader—one wonders if an annual average could have been used—the blue trend line makes it clear.

And that blue trend line has a nice graphic trick to help itself. Note the designer added a thin white stroke on the outside of the line, providing visual separation from the red line below.

My only real critique with the graphic is the baseline and the axis lines. The chart uses solid black lines for the axes, with grey lines running horizontally depicting the deviation from the mean sea level. But the black lines draw the attention of the eye and thus diminish the importance of the 0 inch line, which actually serves as the baseline of the chart.

If I quickly edit the screenshot in Photoshop, you can see how shifting the emphasis subtly changes the chart’s message.

Overall, however, the graphic works really well.

Credit for the piece goes to John Hancock.

Just Keep Grinding it Out

There are certain journalism outlets that I read that consistently do a good job with information design or at least are known for it. Now I try to keep my media diet fairly large and ideologically broad, but in that there are also still some outlets that feature quality design than others. The New York Times, the Washington Post, and the Economist are usually probably top of my list, but you will also see the Wall Street Journal, Philadelphia Inquirer, Boston Globe, the Guardian, and the BBC. I also read more niche outlets for some of my interests, e.g. the Athletic for Red Sox and baseball. But these often don’t feature information design. Politico is one that I read for my political news fix. And when I was reading it whilst on holiday, I was surprised to find an article about the employment market with a really nice line chart.

The article examines the changing labour market where, for over a year now, bargaining power largely resided with employees. If employees wanted raises, benefits, perks, whatever, they could often leave their current employer if their requests weren’t met because another employer, desperate for staff, would likely meet their asks. However, as the economy cools, we would expect the labour market to tighten making few openings available. That begins to reduce the bargaining power of employees as now employers can say “take it or leave it”, knowing that the offers they make to staff aren’t likely to be met by other employers who don’t have open positions or aren’t otherwise hiring.

Four graphics punctuate the article, detailing just that changeover. The full article is worth a read, but I wanted to take a look at one graphic that I think best captures the design decisions made.

That looks like an inflection point to me.

My screenshot above doesn’t capture the interactivity, but we will return to that in a moment. We see three data series: job openings, quits, and layoffs and discharges. The designer represented each with a primary colour, making clear distinctions between the three, and since all three are represented by thousands of units, they can be plotted together. That allows one to make easy comparisons across the three series at particular moments in time, e.g. the Covid recession. My only real quibble is with that recession bar. I probably would have used a neutral colour like a light grey instead of red, because the red appears visually linked to layoffs and discharges when they really are not.

Normally when we see an interactive line chart, we have a small legend above, sometimes below, the graphic. Here, however, the labelling for the lines sit directly next to the line. This makes the display clearer for the reader who scans the data series and I’ve seen the approach often in print, but rarely for interactive work.

And when the reader mouses over the work, the highlight does a few nice things.

We can first see that the line with which the user is engaged becomes the focus: the remaining two lines recede into the background as they are greyed out. We also get a simple, but well designed text label above the cursor. Note how that behind the text there is a thin white stroke that creates visual separation between the letters and the data line. And that cursor is a small grey circle surrounding the data point, allowing you to see said data point.

Take it all together and you have a very clear and very effective interactive line chart. It’s a job well done.

When I see good work from unexpected places it’s important to call it out and highlight it because it means some design director somewhere cares enough to try and improve their publication’s quality of communication. And in an era when many outlets suffer from disinvestment and cost-cutting staff reductions that leave fewer designers, editors, and photographers on staff it is easy to imagine design quality decreasing.

So credit for this piece goes to Eleanor Mueller.

Europe By Rail

Many of us have pent up travel demand. Covid-19 remains with us, lingering in the background, but it’s largely from our front-of-mind. For those of my readers in Europe, or just curious how superior European rail infrastructure is over American, this piece from Benjamin Td provides some useful information.

It uses isochrones to map out how much a traveller could travel if he would travel five hours. For this screenshot I chose London’s King’s Cross station. In red we see distances within a one-hour rail ride from said station. In the lightest yellow are those places within the five-hour distance.

The interactive map allows users to investigate stations throughout Europe. Mousing over various parts brings up different stations. Clicking on the station freezes the station on the map allowing the user to zoom in or out and investigate different areas of Europe.

Colour-wise, things work well. The desaturated map allows the yellow-to-red palette to shine. And to the right a closable legend, which unfortunately cannot be reopened once closed for the only real blemish on the piece. Even typographically, the labels appear in grey whereas selected stations appear in black.

A well done piece.

Credit for the piece goes to Benjamin Td.

The Potential Impacts of Throwing Out Roe v Wade

Spoiler: they are significant.

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.

Until now.

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.

That’s pretty long distances in the south…

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.

Credit for the piece goes to Alex Leeds Matthews.

There Goes the Shore

The National Oceanic and Atmospheric Administration (NOAA) released its 2022 report, Sea Level Rise Technical Report, that details projected changes to sea level over the next 30 years. Spoiler alert: it’s not good news for the coasts. In essence the sea level rise we’ve seen over the past 100 years, about a foot on average, we will witness in just thirty years to 2050.

Now I’ve spent a good chunk of my life “down the shore” as we say in the Philadelphia dialect and those shore towns will all have a special place in my life. But that looks more to be like a cherished memory fading into time. I took a screenshot of the Philadelphia region and South Jersey in particular.

Not just the Shore, but also the Beaches

To be fair, that big blob of blue is Delaware Bay. That’s already the inlet to the Atlantic. But the parts that ought to disturb people are just how much blue snakes into New Jersey and Delaware, how much/little space there is between those very small ribbons of land land off the Jersey coast.

You can also see little blue dots. When the user clicks on those, the application presents the user with a small interactive popup that models sea level rise on a representative photograph. In this case, the dot nearest to my heart is that of the Avalon Dunes, with which I’m very familiar. As the sea level rises, more and more of the street behind protected by the dunes disappears.

My only real issue with the application is how long it takes to load and refresh the images every single time you adjust the zoom or change your focus. I had a number of additional screenshots I wanted to take, but frankly the application was taking too long to load the data. That could be down to a million things, true, but it frustrated me nonetheless.

Regardless of my frustration, I do highly recommend you check out the application, especially if you have any connection to the coast.

Credit for the piece goes to NOAA.

Regal Birthplaces

Earlier this week marked the 70th anniversary of Queen Elizabeth’s accession to the throne of the United Kingdom and many Commonwealth realms. There are many graphics about the length of her reign and the numerous prime ministers and presidents she has met over the years. But I actually enjoyed this article from the BBC as it dovetails nicely with my interest in genealogy, which frequently looks at the same sort of materials.

In genealogy we often want to find photos, illustrations, or really any kind of documentation that ties an ancestor to a particular place at a particular time. What I never realised is that the birthplace of Her Majesty, the Queen, no longer exists.

It kind of makes sense, however, when you consider that as the daughter of the younger son she was never expected to take the throne. When her uncle abdicated, however, her father took the throne and then she became next in line and we all know the rest. But because of that lack of expectation her birthplace was just another London townhome. The article details how development changed the location, not the Blitz as is often thought.

You can see from the screenshot above how the article uses a slider device to compare the neighbourhood in London today vs. what it was in 1895, about 30 years before the Queen’s birth.

At this point we’re all familiar with sliders, but they do work really well when it comes to this kind of before-after comparison.

Credit for the piece goes to the BBC graphics department.

Can You Hit the High Notes?

This is an older piece that I stumbled across doing some other work. I felt like it needed sharing. The interactive graphic shows the high and low note vocal ranges of major musical artists.

Good to see some of my favourite artists in the mix.

Interactive controls allow the user to sort the bars by the greatest vocal range, high notes, or low notes. Colour coding distinguishes male from female vocalists.

In particular I enjoy the bottom of the piece that uses the keyboard to show the range of notes. When the user mouses over a particular singer, the ends of the range display the particular song in which the singer hit the note.

Again, this is an older piece that I just discovered, but I did enjoy it. I would be curious to see how these things could change over time. As an artist ages, how does that change his or her vocal range? Are there differences between albums? This could be a fascinating point at which branching out for further research could be done.

Credit for the piece goes to ConcertHotels.com

Obfuscating Bars

On Friday, I mentioned in brief that the East Coast was preparing for a storm. One of the cities the storm impacted was Boston and naturally the Boston Globe covered the story. One aspect the paper covered? The snowfall amounts. They did so like this:

This graphic fails to communicate the breadth and literal depth of the snow. We have two big reasons for that and they are both tied to perspective.

First we have a simple one: bars hiding other bars. I live in Greater Centre City, Philadelphia. That means lots of tall buildings. But if I look out my window, the tall buildings nearer me block my view of the buildings behind. That same approach holds true in this graphic. The tall red columns in southeastern Massachusetts block those of eastern and northeastern parts of the state and parts of New Hampshire as well. Even if we can still see the tops of the columns, we cannot see the bases and thus any real meaningful comparison is lost.

Second: distance. Pretty simple here as well, later today go outside. Look at things on your horizon. Note that those things, while perhaps tall such as a tree or a skyscraper, look relatively small compared to those things immediately around you. Same applies here. Bars of the same data, when at opposite ends of the map, will appear sized differently. Below I took the above screenshot and highlighted two observations that differed in only 0.5 inches of snow. But the box I had to draw—a rough proxy for the columns’ actual heights—is 44% larger.

This map probably looks cool to some people with its three-dimensional perspective and bright colours on a dark grey map. But it fails where it matters most: clearly presenting the regional differences in accumulation of snowfall amounts.

Compare the above to this graphic from the Boston office of the National Weather Service (NWS).

No, it does not have the same cool factor. And some of the labelling design could use a bit of work. But the use of a flat, two-dimensional map allows us to more clearly compare the ranges of snowfall and get a truer sense of the geographic patterns in this weekend’s storm. And in doing so, we can see some of the subtleties, for example the red pockets of greater snowfall amounts amid the wider orange band.

Credit for the Globe piece goes to John Hancock.

Credit for the NWS piece goes to the graphics department of NWS Boston.