data visualisation – Coffee Spoons

No Matter What You Say, I’m Still Me

As many long-time readers know, I was long ago bitten by the genealogy bug and that included me taking several DNA tests. The real value remains in the genetic matches, less so the ethnicity estimates. But the estimates are fun, I’ll give you that. Every so often the companies update their analysis of the DNA and you will see your ethnicity results change. I wrote about this last year. Well yesterday I received an e-mail that this year’s updates were released.

So you get another graphic.

The clearest change is that the Scottish bit has disappeared. How do you go from nearly 20% Scottish to 0%? Because population groups in the British isles have mixed for centuries. When the Scottish colonised northern Ireland, they brought Scottish DNA with them. And as I am fairly certain that I have Irish ancestors from present-day Northern Ireland, it would make sense that my DNA could read as Scottish. But clearly with the latest analysis, Ancestry is able to better point to that bit as Irish instead of Scottish. And this shouldn’t surprise you or me, because those purple bars represent their confidence bands. I might have been 20% Scottish, but I also could have been reasonably 0% Scottish.

Contrast that to the Carpatho-Rusyn, identified here as Eastern European and Russian. That hovers around 20%, which makes sense because my maternal grandfather was 100% Carpatho-Rusyn—his mother was born in the old country, present-day Slovakia. We inherit 50% of our DNA from each of our parents, but because they also inherit 50%, we don’t necessarily inherit exactly 25% from our grandparents and 12.5% from our great-grandparents, &c.

But also note how the confidence band for my Carpatho-Rusyn side has narrowed considerably over the last three years. As Ancestry.com has collected more samples, they’re better able to identify that type of DNA as Carpatho-Rusyn.

Finally we have the trace results. Often these are misreads. A tiny bit of DNA may look like something else. Often these come and go each year with each update. But the Sweden and Denmark bit persisted this year with the exact same values. If I compare my matches, my paternal side almost always has some Swedish and Danish ethnicity, not so for my maternal side. And importantly, those matches have more. Remember, because of that inheritance my matches further up on my tree should have more DNA, and that holds true.

That leads me to believe this likely isn’t a misread, but rather is an indication that I probably have an ancestor who was from what today we call Sweden or Denmark. Could be. Maybe. But at 2%, assuming the DNA all came from one person, it’s probably a 4th to a 6th great-grandparent depending on how much I and my direct ancestors inherited.

Clearly there’s more work to do.

Climate Conscientious and Cheaper Cars

Sometimes in the course of my work I stumble across graphics and work that I previously missed. In this case I was seeking a post about one of my favourite infographics, but it turned out I’ve never posted about it and so I will have to rectify that someday. However in my searching, I came upon an article from the New York Times last year where they wrote about research from MIT that compared the carbon dioxide emissions—bad for the environment and climate—per mile to the average monthly cost of a wide range of 2021 vehicles. The important distinction here is that average monthly cost is not the sticker price of a vehicle, but rather the sticker price plus lifetime operating costs. (For their analysis, the authors assumed a 15-year lifespan and 13,000 miles driven per year.)

Why is this so important? It’s pretty simple, really. In the United States, vehicle emissions are the largest source of carbon emissions. And the vast majority of that is due to passenger vehicles. If we as a society want to get serious about reducing our carbon footprint, the biggest changes we need to make are reducing our amount of driving, moving more people into mass transit, or switching out people’s gas-powered vehicles for electric vehicles.

The New York Times turned their work into a really nice static datagraphic. It is static, so there is no real interactivity if you want to compare your vehicle to others. However, the designers did choose some popular models and identified some of the key outliers.

There are nice annotations here that double their effort as a legend here.

The designers group the cars, represented by dots, into colour fields. These do a good job of showing how there is overlap between the different types of vehicles. Not all hybrid and plug-in vehicles are cheaper or even less CO2 emitting than some gas-powered vehicles, typically your smaller compacts and hatchbacks. Each colour field is linked to a textual annotation that also functions as a legend.

That alone is very helpful in understanding the differences, subtle and not-so-much, between the types of vehicles. Later on in the article the designers also used a scatter plot of a narrower set of data to compare a select set of vehicles.

Here we can see that one cannot simply assume that all electric vehicles are cheaper long-term than their gas-powered compatriots. Here we can see that the Nissan Altima, whilst emitting more CO2, compares favourably with the Tesla Model 3 in both the long-term cost but also in the upfront sticker price.

Despite finding this article a year and a half late, we can tie this to current events in that President Biden’s climate bill creates tax credits for electric vehicles. While the bill is perhaps not as significant as many would like, it is remarkable for still being a lot of money devoted to reducing our emissions. And when it comes to electric vehicles, one of the key components is the creation of tax credits. These would help mitigate those upfront sticker costs of electric vehicles. Because whilst they may generally be cheaper in the long-run, you still need to put up more money than their conventionally-powered alternatives either as lump sums or down payments. And with interest rates rising, what you need to cover via an auto loan will become more expensive.

Overall this is a really nice piece. Should I ever need to buy another vehicle, I would love to see this as a resource available to the general public. Unfortunately it only compares 2021 vehicles. And it does make me wonder where my 2005 vehicle compares. Probably not too terribly favourably.

Credit for the piece goes to Veronica Penney.

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.

Facebook’s for the Old Folks

We start this work week with something that the young people use, but in a different way than older people do, including elder millennials like myself: social media. Of course, as an elder millennial, I remember Facebook when it was The Facebook when it expanded access to Penn State, which I attended for a single year.

Pew Research conducted a study of teenagers that revealed they use social media more than ever before, but that they use new (sort of) platforms more than the venerable paragon of the past: Facebook.

The Economist’s Data Team looked at the data and created this graphic showing the trends.

We see stacked bar charts on the left and then a line chart on the right. The left-hand chart shows the frequency with which teenagers use various social media platforms. What I don’t understand is how someone uses a social media application “almost constantly”. But that’s probably why I’m an elder millennial.

Get off my lawn, you whippersnappers.

On the right we see the percentage of teenagers who have used an application at least once. The biggest winners? Applications primarily featuring image over text. The losers? Those that use words.

Now longtime readers know that I am not terribly fond of stacked bar charts, especially because they make comparisons between, in this case, social media platforms very difficult. And I feel like we have a story in the occasional use responses, but it’s tough teasing it out from this graphic.

On the right, well, this is one I enjoy. You can tell just how much the social media environment has evolved in the last 7–8 years because TikTok did not exist and YouTube was not thought of as a social media platform.

I wonder if different colours were truly needed for the line chart. The lines do not really overlap and there is sufficient separation that each line can be read cleanly. If the designers wanted to highlight the fall of Facebook or another story line, they could have used accent colours.

But overall a solid graphic.

Now to check my feeds.

Credit for the piece goes to the Economist’s Data Team.

Datagraphics as Marketing Materials

I spent the last two weeks out of town, and my post for the Friday before didn’t happen because there was a fire at my building—I and my unit are fine—that knocked out internet for about 24 hours. But now I have returned.

One of the things I did was visit the city of Pittsburgh in western Pennsylvania. There I discovered the city has a World War II era submarine, the USS Reqin, a Tench-class submarine that launched at the end of the war and saw no active combat. She was later preserved and arrived at the Carnegie Science Centre in Pittsburgh where she serves as a museum ship.

As I waited for the self-guided tour to begin, I spotted a small poster with some big numbers. Naturally I investigated and found it to be a marketing piece by PPG, a Pittsburgh-based paint and coatings company. The poster detailed the work that went in the preservation of the submarine’s exterior using PPG’s own paints and coatings.

We can see the large numbers clearly and to the piece’s credit the hierarchy works. What are we talking about? Three paints applied to the submarine in these quantities in this amount of time. The only factette not totally relevant is how many tourists annually visit the submarine.

Design wise, the poster does a nice job of dividing up its space into an attention-grabbing upper-half. After all, it grabbed my attention. The lower half then subdivides into three columns that speak to the aforementioned subjects. The last column then divides again into halves.

As marketing design does, it’s not the most offensive. For example, we don’t have the gallon buckets sized or scaled differently. The designers used a restrained palette and kept a consistent typographic treatment.

Admittedly, I was a bit disappointed because I had thought it would be some facts or data about the submarine itself. But for what the piece is, I thought it did a nice job.

Credit for the piece goes to PPG’s graphics department.

We’re a Long Way from Kansas

I had something else for today, but this morning I opened the door and found my morning paper. Nothing terribly special. No massive headline. No large front-page graphic. See what I mean?

But then as I bent down to pick it up, I spotted a little tree map. But it turned out it wasn’t a tree map. It was a rectangle, largely, but it was actually a county map of Kansas. It was so small it fit within a single column.

The map showed those counties that had a majority vote in favour of keeping abortion rights. And then those counties that also voted for Trump in 2020 were outlined in orange—a good colour pairing. Turned out a number of counties did.

Without wading into the politics of it, because that’s a separate article, this was a great little map. It didn’t need to be crazy complicated or even large.

Credit for the piece goes to the New York Times graphics department.

What It Is to be Asian American

Pew recently released a report into the Asian American experience. The report used 66 different focus groups to gather feedback and then summarised that with quotes, video bits, and lots of text. But at the beginning of the report was a nice little graphic that detailed the composition of the focus groups.

This is not a fancy graphic, nor need it be given its supplemental role to the overall piece. But I think it does a reasonable job of showing the construction of the overall focus group demographics, a key point to understanding the responses.

On the left we have a simple count of the number of focus groups by origin. For Indonesians we see there were two focus groups. And thus we have a number two besides the two blocks. Here the two is entirely extraneous and serves as a distracting visual sparkle at the end of the blocks. The advantage of using blocks as opposed to say a bar is that you can visualise the individual components or units, in this case there were two distinct focus groups of Indonesian origin. A user reading this chart should be able to count two blocks. And if they cannot count two blocks, I suspect they would be unable to grasp what the “2” means let alone the rest of the report.

To the right we have two pie charts. My…reticence…to use pies is well-known to long-time readers of Coffeespoons. But here we have the same type of data, counts of focus groups, and I have to wonder: why the designers did not stick with the same model of using individual blocks?

Here I chose to redesign the pie charts.

Nothing here is really new, I just removed the labels because people can count if they need to know the exact number. The labels add visual clutter to the design. And then of course I removed the pie charts and replaced them with blocks like on the left. I was even able to keep the layout roughly the same, albeit within my own graphics template.

Credit for the original goes to the Pew graphics department.

Credit for the redesign is mine.

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 Great British Baking

Recently the United Kingdom baked in a significant heatwave. With climate change being a real thing, an extreme heat event in the summer is not terribly surprising. Also not surprisingly, the BBC posted an article about the impact of climate change.

The article itself was not about the heatwave, but rather the increasing rate of sea level rise in response to climate change. But about halfway down the article the author included this graphic.

As graphics go, it is not particularly fancy—a dot plot with ten points labelled. But what this piece does well is using a dot plot instead of the more common bar chart. I most typically see two types of charts when plotting “hottest days” or something similar. The first is usually a simple timeline with a dot or tick indicating when the event occurred. Second, I will sometimes see a bar chart with the hottest days presented all as bars, usually not in the proper time sequence, i.e. clustered bar next to bar next to bar.

My issue with the the latter is always where is the designer placing the bottom of the bar? When we look at the best temperature graphics, we usually refer to box plots wherein the bar is aligned to the day and then top of the bar is the daily high and the bottom of the bar the daily low. It does not make sense to plot temperatures starting at, say 0º.

In this particular case, however, the dates would appear to overlap too closely to allow a proper box plot. Though I suspect—and would be curious to see—if the daily minimum temperatures on each of those ten hottest days have also increased in temperature.

As to the timeline option, this does a better job of showing not just the increasing frequency of the hottest days, but also the rising maximum value. In the early 20th century the hottest day was 36.7ºC, and you can see a definite trend towards the hottest days nearing and finally surpassing 40ºC.

I do wonder if a benchmark line could have been added to the chart, e.g. the summertime average daily high or something similar. Or perhaps a line showing each day’s temperature faintly in the background.

Finally, I want to point out the labelling. Here the designers do a nice job of adding a white stroke or outline to the outside of the text labels. This allows the text to sit atop the y-axis lines and not have the lines interfere with the text’s legibility. That’s always a nice feature to see.

Credit for the piece goes to the BBC graphics department.

A New Downtown Arena for Philadelphia?

I woke up this morning and the breaking news was that the local basketball team, the 76ers, proposed a new downtown arena just four blocks from my office. The article included a graphic showing the precise location of the site.

I have no doubt whatsoever this won’t impact my commutes.

For our purposes this is just a little locator map in a larger article. But I wanted to draw attention to two things in an otherwise nice map. First, if you look carefully on the left you can see the label for the Broad Street Line placed over the actual railway line, which is what makes it so difficult to read. I probably would have shifted the label to the left to increase its legibility.

Second, and this is a common for maps of Philadelphia, is the actual north-south route of said Broad Street Line, one of the three subway lines running in the city. (You all know of the Broad Street and Market–Frankford Elevated, but don’t forget the PATCO.) If you look closely enough it appears to run directly underneath Broad Street in a straight line. But where it passes beneath City Hall you will see the little white dot locating the station is placed to the left of the railway line.

Why is that?

Well when it was built, Philadelphia’s City Hall was the tallest habitable building in the world. Whilst clearly supplanted in that record, the building remains the largest free-standing masonry building in the world. But that means it has deep and enormous foundations. Foundations that could not be disturbed when the city was running a subway line directly beneath Broad Street.

Consequently, the Broad Street Line is not actually straight—ride it heading south into City Hall Station and you’ll notice the sharp turn both in its bend and the loud screeching of metal. The line bends around parts of the building’s foundations, sharply on the north side and more gently on the south side. So the actual station is still beneath City Hall, but offset to the west.

But most of the time it’s easier just to depict the route as a straight line running directly beneath City Hall.

Credit for the piece goes to John Duchneskie.