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.

Cavalcante Captured

Well, I’ve had to update this since I first wrote, but had not yet published, this article. Because this morning police captured Danelo Cavalcante, the murderer on the lam after escaping from Chester County Prison, with details to follow later today.

This story fascinates me because it understandably made headlines in Philadelphia, from which the prison is only perhaps 30–40 miles, but the national and even international coverage astonished me. Maybe not the initial article, but the days-long coverage certainly seemed excessive when we had much larger problems or notable events occurring throughout the world.

That brings me to this quick comparison of these two maps. The first is from the local paper, the Philadelphia Inquirer. It is a screenshot in two parts, the first the actual map and the second the accompanying timeline.

The Inquirer map
The timeline from the Inquirer

Then we have the BBC and their map of the story:

The BBC version

Both maps use light greys and neutral colours to ground the reader’s experience, his or her welcome to the world of southeastern Pennsylvania. The Inquirer uses a beige and a white focus for Chester County and the BBC omits county distinctions and uses white for rural and grey for built-up areas around Philadelphia.

Both maps use red numbers in their timeline sections to sequence the events, though the Inquirer’s is more extensive in its details and links the red events to red map markers.

The Inquirer leans heavily on local roads and highways with lines of varying width in white with thin outlines. Whereas the BBC marks only significant roads as thin blue lines.

The Inquirer’s map adds a lot of geographical context, especially for an audience fastidiously following the situation. And the following makes sense given all the local closures and anxiety—though I’m of the opinion a significant bit of those closures and anxiety were unwarranted. But for a reader in London, Toronto, or Melbourne, does anyone really need to see Boot Road? Strasburg Road? Even Route 30? Or the Route 30 Bypass (at Route 100, hi, Mum)? Not really, and so the omission of many of the local roads makes sense.

I would keep the roads relevant to the story of the search or the capture, for example Routes 23 and 1, and places relevant, for example Longwood Gardens and South Coventry. Here the BBC perhaps goes too far in omitting any place labels aside from Philadelphia, which is itself borderline out of place.

What I like about the BBC’s map, however, is the use of the white vs. grey to denote rural vs. built-up areas, a contextual element the Inquirer lacks. Over the last two weeks I have heard from city folks here in Philadelphia, why can’t the cops capture Cavalcante in Chester County? Well, if you’ve ever driven around the area where he initially roamed, it’s an area replete with wooded hills and creeks and lots of not-so-dense rich people homes. We don’t yet know where he was finally captured, but in Phoenixville he was spotted on camera because it’s an actual borough (I’m pretty certain it’s incorporated) with a walkable downtown. It’s dense with people. And not surprisingly the number of spottings increased as he moved into a denser area.

The Inquirer’s map, however, doesn’t really capture that. It’s just some lines moving around a map with some labels. The BBC’s map, though imperfect because the giant red box obscures a lot of the initial search area, at least shows us how Cavalcante evaded capture in a white thus rural, less-dense area before being seen in a grey thus built-up dense area.

All-in-all, both are good enough. But I wish somebody had managed to combine both into one. Less road map than the Inquirer’s, but more context and grounding than the BBC.

Credit for the Inquirer piece goes to John Duchneskie.

Credit for the BBC 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.

Legendary Adjustments

The other day I was reading an article about the coming property tax rises in Philadelphia. After three years—has anything happened in those three years?—the city has reassessed properties and rates are scheduled to go up. In some neighbourhoods by significant amounts. I went down the related story link rabbit hole and wound up on a Philadelphia Inquirer article I had missed from early May that included a map of just where those increases were largest. The map itself was nothing crazy.

A pretty standard map here.

We have a choropleth with city zip codes coloured by the percentage increase. I was thrown for a bit of a loop as I immediately perceived the red representing lower values and green higher values, the standard green to red palette. But given that higher values are “bad”, I can live red representing bad and sitting at the top of the spectrum.

I filed it away to review later, but when I returned I visited on my mobile phone. And what I saw broadly looked the same, but there was a disconcerting difference. Take a look at the legend.

One little difference…

You can see that instead of running vertically like it did on the desktop, now the legend runs horizontally across the bottom. In and of itself, that’s not the issue. Though I do wonder if this particular legend could have still worked in roughly the same spot/alignment given the geographic shape of Philadelphia along the Delaware River.

Rather look at the order. We go from the higher, positive values on the left to the negative, lower values on the right. When you read the legend, this creates some odd jumps. For example, we move from “+32% to +49%” then to “+15% to +31%”. We would normally say something to the point of the increase bins moving from “+15% to +31%” then to “+32% to +49%”. In other words, the legend itself is a continuum.

The fix for this would be to simply flip the running order of the legend. Put the lower values on the left and then step up to the right. For a quick comparison, I visited the New York Times website and pulled up the first graphic I could find that looked like a choropleth. Here we have a map of the dangerous temperatures across the United States.

Definitely staying inside today.

Note how here the New York Times also runs their legend horizontally below the graphic. But instead of running high-to-low like in the Inquirer, the Times runs low-to-high, making for a more natural and intuitive legend.

This kind of simple ordering change would make the Inquirer’s map that much better.

Credit for the Inquirer piece goes to Kasturi Pananjady and John Duchneskie.

Credit for the Times piece goes to Matthew Bloch, Lazaro Gamio, Zach Levitt, Eleanor Lutz, and John-Michael Murphy.

Political Hatch Jobs

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.

It would be funny to see a candidate finish with negative vote share.

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.

Now with box plots.

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.

Credit for the piece goes to John Duchneskie.

Where’s the Axis

We’re starting this week with an article from the Philadelphia Inquirer. It looks at the increasing number of guns confiscated by the Transportation Security Administration (TSA) at Philadelphia International Airport. Now while this is a problem we could discuss, one of the graphics therein has a problem that we’ll discuss here.

We have a pretty standard bar chart here, with the number of guns “detected” at all US airports from 2008 through 2021. The previous year is highlighted with a darker shade of blue. But what’s missing?

We have two light grey lines running across the graphic. But what do they represent? We do have the individual data points labelled above each bar, and that gives us a clue that the grey lines are axis lines, specifically representing 2,000 and 4,000 guns, because they run between the bars straddling those two lines.

However, we also have the data labels themselves. I wonder, however, are they even necessary? If we look at the amount of space taken up by the labels, we can imagine that three labels, 2k, 4k, and 6k, would use significantly less visual real estate than the individual labels. The data contained in the labels could be relegated to a mouseover state, revealed only when the user interacts directly with the graphic. Here it serves as a “sparkle”, distracting from the visual relationships of the bars.

If the actual data values to the single digit are important, a table would be a better format for displaying the information. A chart should show the visual relationship. Now, perhaps the Inquirer decided to display data labels and no axis for all charts. I may disagree with that, but it’s a house data visualisation stylistic choice.

But then we have the above screenshot. In this bar chart, we have something similar. Bars represent the number of guns detected specifically at Philadelphia International Airport, although the time framer is narrower being only 2017–2021. We do have grey lines in the background, but now on the left of the chart, we have numbers. Here we do have axis labels displaying 10, 20, and 30. Interestingly, the maximum value in the data set is 39 guns detected last year, but the chart does not include an axis line at 40 guns, which would make sense given the increments used.

At the end of the day, this is just a frustrating series of graphics. Whilst I do not understand the use of the data labels, the inconsistency with the data labels within one article is maddening.

Credit for the piece goes to John Duchneskie.

Fire in Fairmount

Philadelphia made the national and international news last week, although for once not because we’re all being shot to death. This time because a fire in a rowhome killed 12 people, including nine children. The Philadelphia Inquirer quickly posted a short article explaining what occurred that morning. But the early indication, based upon the confession of a five-year old, is that a child playing with a light set a live Christmas tree on fire.

Ironically, the city prohibits live trees in high rises, apartment buildings, and multi-family dwellings. The rule is in place because live trees are a very real fire hazard. Just a few weeks earlier, a man and two of his sons were killed in a suburb north of Philadelphia (his wife and a third son survived). They died in a fire that began with lights on a live tree. But here in the city, the code states that multi-family dwellings begin at three households. This rowhome had been converted into two separate units, so a live tree was legal. But they would have been better without.

The Inquirer article features a scrolling illustration depicting what we presently know about the fire: how and where it started, why it may have spread, and ultimately who died.

Live trees smell great, but they’re a very real fire risk.

Credit for the piece goes to Sam Morris.

Philadelphia’s Wild Winters

Winter is coming? Winter is here. At least meteorologically speaking, because winter in that definition lasts from December through February. But winters in Philadelphia can be a bit scattershot in terms of their weather. Yesterday the temperature hit 19ºC before a cold front passed through and knocked the overnight low down to 2ºC. A warm autumn or spring day to just above freezing in the span of a few hours.

But when we look more broadly, we can see that winters range just that much as well. And look the Philadelphia Inquirer did. Their article this morning looked at historical temperatures and snowfall and whilst I won’t share all the graphics, it used a number of dot plots to highlight the temperature ranges both in winter and yearly.

Yep, I still prefer winter to summer.

The screenshot above focuses attention on the range in January and July and you can see how the range between the minimum and maximum is greater in the winter than in the summer. Philadelphia may have days with summer temperatures in the winter, but we don’t have winter temperatures in summer. And I say that’s unfair. But c’est la vie.

Design wise there are a couple of things going on here that we should mention. The most obvious is the blue background. I don’t love it. Presently the blue dots that represent colder temperatures begin to recede into and blend into the background, especially around that 50ºF mark. If the background were white or even a light grey, we would be able to clearly see the full range of the temperatures without the optical illusion of a separation that occurs in those January temperature observations.

Less visible here is the snowfall. If you look just above the red dots representing the range of July temperatures, you can see a little white dot near the top of the screenshot. The article has a snowfall effect with little white dots “falling” down the page. I understand how the snowfall fits with the story about winter in Philadelphia. Whilst the snowfall is light enough to not be too distracting, I personally feel it’s a bit too cute for a piece that is data-driven.

The snowfall is also an odd choice because, as the article points out, Philadelphia winters do feature snowfall, but that on days when precipitation falls, snow accounts for less than 1/3 of those days with rain and wintry mixes accounting for the vast majority.

Overall, I really like the piece as it dives into the meteorological data and tries to accurately paint a portrait of winters in Philadelphia.

And of course the article points out that the trend is pointing to even warmer winters due to climate change.

Credit for the piece goes to Aseem Shukla and Sam Morris.

Rarely Shady in Philadelphia

After a rainy weekend in Philadelphia thanks to Hurricane Henri, we are bracing for another heat wave during the middle of this week. Of course when you swelter in the summer, you seek out shade. But as a recent article in the Philadelphia Inquirer pointed out, not all neighbourhoods have the same levels of tree cover, or canopy.

From a graphics standpoint, the article includes a really nice scatter plot that explores the relationship between coverage and median household income. It shows that income correlates best with lack of shade rather than race. But I want to focus on a screenshot of another set of graphics earlier on in the article.

On the other hand, pollen.

I enjoyed this graphic in particular. It starts with a “simple” map of tree coverage in Philadelphia and then overlays city zip codes atop that. Two zip codes in particular receive highlights with bolder and larger type.

Those two zip codes, presumably the minimum and maximum or otherwise broadly representative, then receive call outs directly below. Each includes an enlarged map and then the data points for tree cover, median income, and then Black/Latino percentage of the population.

I don’t think the median income needs to be in bar chart form here, especially given the bars do not line up so that you can easily compare the zip codes. The numbers would work well enough as factettes or perhaps a small dot plot with the zip codes highlighted could work instead.

Additionally, the data labels would be particularly redundant if a small scale were used instead. That would work especially well if the median income were moved to the lowest place in the table and the share charts were consolidated in one graphic. Conceptually, though, I enjoy the deep dive into those two zip codes.

Then I wanted to highlight some great design work on the maps. Note how in particular for Chestnut Hill, 19118, the outline of the zip code is largely in a thicker, black stroke than the rest of the map. At the upper right, however, you have two important roads that define the area and the black stroke breaks at those points so the roads can be clearly and well labelled. The other map does the same thing for two roads, but their breaks are shorter as the roads run perpendicular to the border.

Overall this was just a great piece to read and I thoroughly enjoyed the graphics.

Credit for the piece goes to John Duchneskie.

Bodies Buried Under Spring Garden

Okay, technically not Spring Garden Street, but a strip mall along one of Philadelphia’s main arterial city streets. Luckily these aren’t some victims of a serial murderer, but rather the result of Philadelphia being an old city (for the United States). As this article from the Philadelphia Inquirer explains, the bodies were discovered during excavations for new construction at the site.

The reason I shared this today was that this past weekend, I had a pint with a colleague of mine at Yards Brewery located at 5th and Spring Garden. We sat at an outside table along Spring Garden and at some point I recall pointing out that Spring Garden hadn’t always been a street. Originally it only existed west of Broad.

Little did I know that the construction site across the street on that sultry Sunday afternoon was home to an archaeological excavation of an old, long since demolished city church cemetery.

Of course I still want a tram/trolley or light rail line to run down the length of Spring Garden like it did in years past.

You can use the slider in the article to compare the layout of the intersection in 2021 to that of 1860. I love these old timey maps, especially when working on genealogy. Because while we know the cities where we live today, they didn’t look like we know them 150 years ago. And in lieu of photography, it’s otherwise difficult to try and make sense of our ancestors’ world.

Just a few doors south of the Methodist church we had a bakery and a small alley called Brussels Place. And facing the alley we had what look like a number of small homes or perhaps stables. Larger presumably rowhomes lined the main streets of the intersection.

At the right of the screen, I also remember my colleague and I discussing some of the old-looking rowhomes. They may very well be the same ones depicted on this 1860 map. They are the few survivors as most of the area, as the article points out, was eventually turned into a petrol station that later became the strip mall today fenced off to be turned into flats.

Credit for the piece goes to John Duchneskie.