The New Longest Flight

You might recall that back in March I wrote about the use of spherical maps to show great circles. This helps illustrate the actual routes that aircraft take in flight. (Yes, actual flight plans deviate based on routes, weather, traffic, &c.) At the time I wrote about how there was a soon-to-be Singapore–New York route. Ta da.

That's just a long time in one aircraft.
That’s just a long time in one aircraft.

Nothing fancy here in this graphic from the Economist. It probably is just a reuse of the original but with the additional routes removed. But, I still love these kinds of maps. From a design manager standpoint, in a way this is great efficiency in that an element from a graphic made once can now, with minimal effort, be used in a second piece. And not in a meaningless, throw-in way, but this graphic does very much help to illustrate the actual route and long across the globe it travels.

In a second note, not related to the graphic itself, I want to point out a subtle change made by the Economist. This is the first online graphic to use an updated chrome, which is the branding elements that surround the actual content of the piece.

Slight changes
Slight changes

The biggest change is a new or modified typeface for the graphic header. I have not seen anything about design changes at the Economist, but I will look into it. But the changes are, again, subtle. The best example in these two comparisons (new on the left, old on the right) is the shape of the letter e.

E, as in Economist
E, as in Economist

You can see how the terminal, or the part of the letter hooking and swinging out at the bottom, used to come to an end at an angle. Now it ends with a vertical chop. I haven’t looked too extensively at the typeface, but given the letter e, it appears to be a little bit wider of a face.

The other change, not quite as subtle, is the positioning of the iconic red rectangle around which so much of the Economist’s brand hangs. Bringing back the above graphic, you can see where I drew a black line to indicate the edge of the original graphic.

Slight changes

The box is now orientated horizontally (again, new is on the left), which actually brings it closer to the actual Economist logo. But, and probably more importantly, it allows the graphic’s edge to go to the, well, edge. And since their site uses generous whitespace around their graphics, they don’t necessarily need margins within the graphic.

They have also chosen to raise the level at which the header starts, i.e. there is less space between the red rule at the top of the graphic and the start of the words. This, however, appears to have been possible in the original design.

As more graphics roll out, I am going to be curious to see if there are other changes. Or even just to see how these subtle changes affect the rest of the graphics.

Credit for the piece goes to the Economist Data Team.

Development Languages

Last week the Economist published an article sort of about my industry. Now I am a designer and more familiar with the front-end design and some HTML and CSS, but a lot of the things I have designed over the last few years have needed some serious developers with some serious skills. And those guys were the ones who would truly understand this graphic, which looks at the popularity of Python relative to other languages like C++, Java, Javascript, .NET, &c.

Python has certainly climbed in importance
Python has certainly climbed in importance

I really like what the designers did here. First and foremost the key chart is a ranking chart showing the popularity of languages since 1988—Java and C have consistently been at the top. But other languages no longer relevant are not even shown. (Where are you, Actionscript?) Those that are both relevant and also mentioned are colour coded within the set.

But the truly nice thing is being able to use the empty space of the lower-left area of the chart to add some context. It shows the growth in Google searches since 2010 in searches for Python.

Bonus note, look at that rise in R since 2008.

Credit for the piece goes to the Economist Data Team.

Differences Between Print and Online

On Monday I read, in print, part of a page one article in the Times. I ran out of times given the whole new royal baby coverage, and opted to read the rest digitally. Originally, this was just for my own enjoyment as there were no graphics in the article.

But this one appeared online.

It's a nice graphic too…
It’s a nice graphic too…

I clearly have nothing to compare it to in print, which is a shame because this is a nice graphic with one thing I really wanted to point out. Although, maybe a print version would not have had the thing I will get to. But maybe there just wasn’t space in the print edition or they tried to make it work, but the colours or layout wasn’t working. Who knows.

When I saw the digital version, the line chart struck me as particularly nice. Now, maybe the Times has been doing this for a little while and I have missed it, but notice the highlighted line, Rural public. Yes the line is thicker or bolder than the others, but more importantly it has a thin white stroke attached that helps separate it from the lines behind it. Those lines are important for context, but not necessarily to tell the story of how rural public servant jobs have been hit the hardest.

You often see this kind of approach taken with maps. Don’t believe me? Take a look at Google Maps as one example. Their text often has a thin white outline to make it stand out from the content of the map. I just have never seen the logic applied to a line chart.

I doubt the design would hold up in a number of other scenarios. For example, a straight line chart with no line highlighted in particular, the spaghetti-ness mess would make the above a largely white line chart. Too much overlap. And a simple comparison, say of two lines, probably is clear enough that the approach is not necessary. But in scenarios like these where the highlighted series is important, the choice clearly works.

On a much smaller note, check out the x-axis labels. They are used only once for the first chart. And then because the bar charts and line charts align, they carry through straight down the rest of the piece. Very efficient.

I only wish I knew how this would have appeared in print…

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

Where Creativity Goes to Die

I know I spent yesterday on the NFL Draft and that a lot of you would regard that as the lighthearted piece for the week. But trust me, here in Philly, it’s not so much. Just walk three blocks west from my flat.

So today we have another piece from This Is Indexed that looks at the creative process. And in my 8+ years of experience, this is nothing but true.

Le sigh
Le sigh

Credit for the piece goes to Jessica Hagy.

Baselines Are Important

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
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.

Miniature Ball Fields

Last week Jackie Bradley Jr., the starting centerfielder for the Boston Red Sox, saw his hit-streak end at 29 games. For those of you who do not follow baseball, that means he hit the ball and reached first base safely without causing an out for 29 games in a row. Quite a feat. Anyway, because it is a feat, the story gets covered and in this case, by the Boston Globe.

They wrote several articles on Bradley and the hit streak, but this one included a small, interactive graphic that mapped out his hits. Because a streak exists over time, the component includes a slider to show how the hits have progressed.

Bradley hit to all parts of the field
Bradley hit to all parts of the field

Worth keeping in mind that this was merely a sidebar graphic, not a large and fully immersive piece. The piece itself features only a few tables detailing baseball data comparisons, but it exists in a new design layout from the Globe featuring bigger, glossier photographs. Not all graphics need to be the biggest element on the page. From a pacing perspective, it sometimes helps to have a small graphic placed next to the important text to provide immediate context. Speaking of context…

The graphic in the context of the page
The graphic in the context of the page

Overall, a very nice piece.

Credit for the piece goes to the Boston Globe graphics department.

Where Is Pennsyltucky?

So last week I mentioned Pennsyltucky in my blog post about Pennsylvania’s forthcoming importance in the election. And then on Friday I shared a humourous illustrated map of Pennsylvania that led into an article on Pennsyltucky. But where exactly is it?

Luckily for you, I spent a good chunk of my weekend trying to find some data on Pennsylvania and taking a look at it. You can see and read the results over on a separate page of mine.

Where is Pennsyltucky?
Where is Pennsyltucky?

Design and Data Visualisation

Today’s piece features a critique of the data visualisation world from Christopher Ingraham at the Washington Post. It centres on the difference between these two maps. The one on the left is Ingraham’s and the one on the right from the Pew Charitable Trusts.

Spot the difference
Spot the difference

I do not want to spoil or ruin the article for you—it’s a short read after all. But the crux of the argument, which I believe extends beyond maps, is that despite the proliferation of tools to visualise data, one still needs to understand the principles behind it to create meaningful work. Anybody can put words to paper—look at this blog after all—but the truly great writers have the education and the experience to move and motivate people. And the same holds true for designers of data visualisation. And designers even more broadly.

If I have to add one design critique to Ingraham’s work, I would also add that design decisions like colours and map type also play a role in creating legible pieces. The grey lines in the Pew map versus the white lines in the Post’s make it difficult to read the colours in the smaller, eastern counties of the United States.

Credit for the Washington Post piece goes to Christopher Ingraham.

Credit for the Pew Charitable Trusts piece goes to Pew’s graphics department.

The London Underground Typeface

Johnston, the typeface of the London Underground, turns 100 this year. And so last Thursday the Guardian posted a short article about the typeface. It is worth a quick read, if only for the description of serif typefaces as “letters without the little flicks at the end of their strokes”. Some people overlook typeface selection when it comes to the display of data and information, but it is vitally important. Letters need to be clear and easy to understand, but also set at the right size for the audience. If they fail to do that, a work fails to be legible, and that means something is not being communicated. And that is a failure in design.

The original design
The original design

Note the handwriting for the notes versus the sans-serif letterforms.

Details in Charts

Today we are looking at a smaller piece from the Washington Post. The graphic fits within an article about US stock prices. What the graphic does is show the total scale, i.e. starting the chart on the 0 axis, and then showing in detail the fluctuations near the maximum end of the scale. And yet all of this done as an inset graphic. It need not be a full-width graphic, because the data does not demand it.

The chart is in the details
The chart is in the details

Credit for the piece goes to the Washington Post graphics department.