70+ million people watched the debate last week. But, 2.5 million people have already voted. Me? Well in Pennsylvania there is no early voting, so you queue up on Election Day. But that also means I will have had the full election season to brush up on candidates for president and all the other offices. But what about early voters? Well the Washington Post put together an article last week about the numbers of early voters—hence my figures in the opening—and the amount of information they might have missed.
The number of early votes cast
From a design standpoint, it is a really nice article that blends together large centre-piece graphics such as the above to smaller in-line graphics to margin graphics. None are interactive; all are static. But in these cases, users do not need the freedom to interact with the charts. Instead, the designers have selected the points in time or data points more relevant to the story.
Overall the piece is solid work.
Credit for the piece goes to Kevin Uhrmacher and Lazaro Gamio.
Last week the Washington Post published a fascinating article on the data visualisation work of the Donald Trump media campaign. In my last job I frequently harped on the importance of displaying the baseline and/or setting the baseline to zero. When you fail to do so you distort the data. But maybe that is the point of this, for lack of a better term, political data visualisation.
Baselines are important
My favourite author is George Orwell of 1984 and Animal Farm fame. But Orwell also penned numerous essays, one of which has struck me as particularly relevant in this election cycle: Politics and the English Language. In concluding the essay Orwell wrote:
Political language…is designed to make lies sound truthful and murder respectable, and to give an appearance of solidity to pure wind.
And so political data visualisation? Well I believe it exists to serve the same purpose. The article goes into detail about how the designers behind the graphics fudged the numbers. Now did the campaign intend to mislead people with the data visualisation graphics? It is hard to say, because some of their graphics actually diminish leads that Trump has among certain demographics. Could it be the designer behind the graphics simply does not understand what he or she is doing? Perhaps. We clearly cannot know for certain.
Either way, it points to a need for more understanding of the importance and value of data visualisation in the political discourse. And then the natural follow-up of how to best design and create said visualisations to best inform the public.
But I highly recommend going to the Post and reading the entirety of the article.
Credit for the original work goes to the Trump campaign graphics department, the criticism to John Muyskens of the Washington Post.
Well that does it for the three presidential debates. Didn’t they seem very presidential with all those interruptions and interjections? Thankfully after the debate, FiveThirtyEight put together a quick graphic highlighting the total number of each per candidate per debate.
Wait, but, stop
Credit for the piece goes to the FiveThirtyEight graphics department.
Today’s post is about religion. One of the two things you are never supposed to talk about in good company. And since the other is politics and since I cover that here frequently, let’s just go all in, shall we?
FiveThirtyEight has an interesting piece about religious diversity and a corresponding lack of religiousness. From a graphics standpoint, the central piece is this chart below.
Diversity and religiousness compared
What I would love, however, is for the plot to be interactive. It would be great to let people check out their own individual home states and see how they compare to the everyone else.
Credit for the piece goes to the FiveThirtyEight graphics department.
The Olympics are over and Team GB did rather well, coming in second in the medals table with 27 gold medals, more than they won back in 2012 when they hosted the Olympics. (See my piece four years ago where a colleague of mine and I accurately predicted the UK’s total medal count.)
Consequently the BBC put together an article with several data-driven graphics exploring the performance and underpinnings of Team GB. This screenshot captures a ranking chart that generally works well.
How the Olympics rankings have changed over the years
However, the use of the numbers within the dots is redundant and distracting. A better decision would have been to label the lines and let the eye follow the movement of the lines. A good decision, however, was to label the grey lines for those countries entering and falling out of the Top-5.
Credit for the piece goes to the BBC graphics department.
One of the things I like about Chicago’s WGN network is its weather blog. They often include infographic-like content to explain weather trends or stories. But as someone working in the same field of data visualisation and information design, I sometimes find myself truly confused. That happened with this piece last Friday.
Pay attention to the map in the upper-right
The map in the upper-right in particular caught my attention and not in the good way. The overall piece discusses the heavy rainfall in the Chicago area on Thursday and the map looks at the percentage increase in extreme weather rainfall precipitation. All so far so good. But then I look at the map itself. I see blue and thing blue > water > rainfall. The darker/more the blue, the greater the increase. But, no—check out Hawaii. So blue means less rainfall. But also no, look at the Midwest and Southeast. So does green mean anything? Beyond being all positive growth, not that I can tell. As best I can tell, the colour means nothing in terms of rainfall data, but instead delineates the regions of the United States—noting of course they are not the standard US Census Bureau regions.
So here is my quick stab at trying to create a map that explains the percentage growth. I have included a version with and without state borders to help readers distinguish between states and regions.
My take on the map
And what is that at the bottom? A bar chart of course. After all, with only eight regions, is a map truly necessary especially when shown at such an aggregate level? You can make the argument that the extreme rainfall has, broadly speaking, benefitted the eastern half of the United States. But, personally speaking, I would prefer a map for a more granular set of data at the state or municipality level.
Credit for the piece goes to Jennifer Kohnke and Drew Narsutis.
I am on holiday for a few days and am visiting Philadelphia. So what better time to cover some Philadelphia-made content? This interactive piece came out last year from Philly.com alongside coverage of the Philadelphia mayoral contest.
Where the cops live
I want to call out the colour palette for the choropleth in particular. We can see a blue to red system with a stop at yellow in the middle—a divergent palette. With this kind of a setup, I would expect that yellow or the light blue to be zero or otherwise straddle the point of divergence. Instead we have dark blue meaning 0 and dark red meaning 401+. The palette confuses me. It could be that the point of divergence—something around the 200 number—could be significant. It could be the city average, an agreed upon number for good neighbourhood relations, or something. But there is no indication of that in the graphic.
Secondly the colour choice itself. I often hesitate using red (and green) because of the often-made Western connotation with bad. Blue here, it works very well with the concept of the thin blue line, NYPD blue, blue-shirted police. If we assume that there is a rationale for the divergent palette, I would probably place the blue on the high-end of the spectrum and a different colour at the negative end.
Lastly, from the perspective of the layout, Philly has a weird shape. And so that means between the bar chart to the right and the city map on the left the piece contains an awkward negative space. The map could be adjusted to make better use of the space by pointing north somewhere other than up.—why is north up?—to align the Delaware River with the bars. Or, the bars could abut West Philly.
The interactions, however, are very smooth. And a nice subtle touch that orients the reader without distracting them is the inclusion of the main roads, e.g. Broad Street. The white lines are sufficiently thin to not distract from the overall piece.
Happy Monday, all. Some big news stories going on today, but I wanted to take a look at this piece from the New York Times. They report on the sale of Yahoo to Verizon for almost $5 billion via a piece that takes short written analysis and blends it with clear and concise charting. The effect is a quickly digestible, but data-driven content piece.
Last one of these critiques—I promise. Earlier this week I looked at the New York Times’ coverage and the BBC’s coverage. Well, today I want to examine the Guardian’s coverage of the Brexit vote results. This piece differs the most from the preceding work and it starts right from the top, literally.
The faces of the campaigns
I am not the biggest fan of the illustrations of David Cameron and Boris Johnson, but in a sense, neither is a throw-in. For the last few months, the Guardian has been using these and similar illustrations of US presidential candidates to tie results into different political camps. Thus in that sense, they do fit the Guardian’s current brand. Interestingly, neither remains (pun intended) in the picture for the future of the Tories.
Data-wise, however, the decision to use the bar chart at the outset of the piece reflects an understanding of the importance of the top-line number. Districts count, but only at that granular level I discussed. What truly matter, though, is the aggregate. And this is a no-doubt-about-it means of conveying that information. (I will admit the David Cameron frowny face does help a wee bit.)
And if the use of big numbers and illustrations at the top of the piece broke with the choropleth map we saw with the New York Times and the BBC, well, we have another clear break.
Hexagonal representation
Instead of using a geographic map, the Guardian employs a cartogram with hexagons. I have covered similar uses a severaltimesbeforetoday. The hexagon shape allows better retention of familiar geographic shapes, while still providing a means of solving the small district problem, especially in places like central London.
From another design perspective, that of colour, we see an improvement over the blue–yellow spectrum used by the BBC. You may recall from yesterday:
Having multiple tints and shades of yellow makes the map difficult to read.
Here, the Guardian instead opted for a simplified, and easier to read, two-step split. Bright blue and yellow with each have a call it half-tint. With only two blues and, more importantly, two yellows to distinguish, the map becomes easier to read. The trade-off, the darker of the colours represents anything above a 15% majority.
Clicking on the map then provides with a small summary of the district results.
A look at Watford
Here we see nothing too dissimilar from how the BBC treated the interaction with their map. A small, subtle design element I enjoy, however, is the inclusion of the national average. The 50% marker indicates clearly which side won, but the tick below the bar gives the reader context of where the district fell into relation to the remainder of the country.
And that leads us into the next set of comparisons.
Comparisons based on demographics
The Guardian took local district results and compared them against several different demographic and socio-economic indicators. This allowed them to present various correlations of the vote. It turns out that higher education correlated best with the results of the UK vote. From a design perspective, the linked circles provides some stability. However, I would have preferred the ability to click a geography and have it remain sticky and bring up the specific figures. Additionally, some sort of text search for geographies would be helpful.
And then the Guardian’s piece closes as strongly as it opened.
Votes along the Tyne
The piece examines three riverside areas to provide specific analysis to the vote. The screenshot above focuses on the Tyne, which runs alongside the aptly named Newcastle upon Tyne. The Guardian uses the previous general election results for the area to contrast with the referendum results. It does similar analysis for the Thames (London) and the Mersey (Liverpool).
Similar to the New York Times piece, the Guardian’s piece responds well to viewing the content on a small screen. The changes are less complex and they deal mostly with the arrangement of the various components instead of the layout of contextual data. But the Guardian clearly considered how the piece would work on a mobile phone up through a widescreen monitor.
Overall the piece is quite strong and does an excellent job of showcasing the results data and providing insightful analysis that complements the vote totals.
Credit for the piece goes to the Guardian graphics department.
So now it is two weeks since the Brexit vote. Yesterday, I looked at the results designs from the New York Times. Today I want to take a look at those of the BBC. Not surprisingly the two share in the use of choropleth maps; the choice makes a lot of sense. People vote within districts and those form the most granular unit of data available. But, whereas the New York Times led and really focused on one giant map, the BBC opted to use multiple, smaller maps. (They did choose a different page for their live results, but we are comparing post-result coverage.) For example, their piece leads in with a map of Leave’s results share.
Leave’s share
There are a few key differences between this and the New York Times. First and foremost, this map is interactive. Mousing over various districts provides you the name, and by clicking you move into a zoomed-in view of the district. It displays the district name, the vote totals and share for the two camps, and then voter turnout. From a design standpoint, the problem with the zooming in is that the scales of the outlining stroke does not change.
Zoomed in, looking at central London
A thin stroke at the national, zoomed-out view, translates to a thick, clunky, and awkward-looking outline at the local, zoomed-in view. And as the above screenshot highlights, many of the urban districts are small in comparison to the more rural districts. Unfortunately the map does not offer the functionality of zooming-in prior to selecting a district. So many of the districts in the more urban areas like London, Manchester, Birmingham, and Belfast are difficult to see and select. Thankfully, below the map the BBC offers a function to type in your district, post code, or Northern Irish constituency to help you find smaller districts.
Another design criticism I have with the piece is the colour palette. Broadly speaking, the piece uses blue and yellow. The two colours make sense in a few ways. Both are present on the European Union flag, with yellow stars on a blue field. (Importantly the twelve stars do not represent EU members like the US flag’s fifty stars represent the states.) Another, far looser interpretation could be the blue of the Conservatives and the yellow closer to the gold of the UK’s Liberal Democrats, the former broadly anti-EU and the latter pro-EU. Regardless of the rationale, the choice of yellow to display multiple levels of data is less than stellar (pun intended), as this Remain share map highlights.
Remain’s share
Having multiple tints and shades of yellow makes the map difficult to read. The lowest value yellow is brighter than the next higher level, and so stands out more vividly on the map than those districts that had a higher share of Remain votes. Using yellow against blue does work, especially in the bar charts throughout the piece and seen in the aforementioned Islington screenshot. But, as a colour for wider, more intense use, yellow was not the wisest decision.
The BBC also included several other choropleth maps exploring the vote breakdown. In this instance of voter turnout, we have the same choropleth map, but a green colour indicating the total vote turnout.
Voter turnout
The colour and its choice makes broad sense; green is what one gets when they mix yellow and blue, when you combine Remain and Leave. However, the map functionality of clicking to reveal results still shows the overall results.
Should the vote results be given the highest priority?
At this point, we have moved on from the vote results themselves to the breakdown of the vote. I would have redesigned the mouse-click to display a results view that highlighted turnout over the results themselves. Certainly keeping the results is important, but the focus of this map is not the vote, but the turnout. The data display should be designed to keep that consistent.
One part of the piece where I quibble with the designer selection of chart type follows on from turnout: a comparison of turnout to the youth population.
The turnout vs the youth
Asking people to compare undistinguished districts on one map to those of another—note the white district lines have here disappeared—is difficult. My first thought: I would have instead opted for an interactive scatterplot. Comparing the turnout on one axis and youth on the other, the user would have an easier time identifying any correlations or clusters of data.
In contrast, the following map comparison would not work via a scatterplot. Here we compare June’s results to those of a vote in 1975. In the intervening years, the geography of the voting districts changed, and so a one-to-one comparison is impossible.
1975 vs. 2016
The broad scope, however, is clear. A resounding vote to stay part of the European Market or single market in 1975 evolved into a narrow but decisive vote to leave the European Union in 2016.
The piece then closes out with an interactive map of the total results and then, importantly, a long list of bar charts showing each district’s results. Unlike the map, however, the bar charts are a static graphic. And with a few hundred to view, it becomes difficult to isolate and compare two in particular. But the selection of the visualisation type makes a user’s comparison far more precise.
The results as a series of bar charts
Overall, I would rate the piece a solid work, but with some clear areas of improvement. And who knows? Maybe there will be a second referendum. Or a new general election. And in that case, the BBC could improve upon the designs herein.
Credit for the piece goes to the BBC graphics department.
