#makeovermonday: Data breaches from informationisbeautiful.net

I’m going to try to do something quick for Andy Kriebel and Andy Cotgreave’s #makeovermonday every week so I can continue showcasing some of the different types of graphs you can make in my graphing web app Playfair and so I can identify and quash bugs! This week they chose an interactive from David McCandless’s informationisbeautiful.net showing the number of records leaked in various data breaches between 2004 and 2016. Andy gives a nice run-down of the pros and cons of the original graphic.

I made the mistake of looking at a few early entries and a major theme that seems to have struck several people is the division between data breeches that were the result of hacks and those that weren’t (including user error and lost equipment). A quick look at the data shows that the former are increasing rapidly. My first thought was that an area chart would show this trend nicely, but then I remembered that I recently implemented a variation on area charts that might be neat here. I’m actually not sure what you call this kind of chart, but it’s simply an area chart with two categories where both areas originate from y=0. The area for one category is above the x-axis and the area for the other is below it. Here’s my entry for this data set:


Continue reading

Stacked bar charts are often bad: a makeover of a vox.com graph

Stacked bar charts are often bad. It can be hard to compare categories that don’t start from the axis, more than a couple of categories can be confusing, and totals can be deceptive. Take a look at this stacked bar chart from Vox.com and see if you understand what’s going on in less than a couple of seconds. The data is simple and the shifts in public opinion are large, so it’s certainly not difficult to see what the graph is trying to say, but this design is muddy at best.


I re-made the graph in my web-app for creating presentation ready charts, Playfair. The major sin of this graph1 is that there is little distinction between the first two survey answers, which are ‘good’ answers, and the second two ‘bad’ answers. There are two distinct buckets of data here but in the Vox graph all data is on the same color spectrum and no attempt is made to draw visual attention to this distinction. The total length of each bar is only meaningful in the sense that public opinion must add to 100%, but I find even this a little confusing as these bars *do not* sum to 100, which initially made me think that the total length of each bar had meaning.

Continue reading

  1. I am aware that the journalist probably made this in a graph maker of some sort and maybe didn’t have the ability to modify the graph like I did.

Quick #makeovermonday in Playfair

Andy Kriebel runs a twitter hashtag #makeovermonday where he revises an existing data visualization every Monday and invites his Twitter followers to do the same. The competition is Tableau-centric (or maybe even exclusive) but I’m going to inject a teensy bit of Playfair into it as an excuse to make a new Playfair graph every now and then and show off some of the app’s capabilities.

This week’s visualization is pretty basic – it started out as a mildly crummy bubble chart and the obvious thing to do is to make it a bar chart. I added a tiny bit of complexity by dividing my bars into owned and chartered capacity (all available at the original datasource, alphaliner), ordering the dataset by owned capacity, and fading out the chartered portion of the bars a little bit (you don’t have to do this by bar in Playfair, you can just fade out the chartered key element by right-clicking on it). This lends some additional visual importance to owned capacity. I have no domain knowledge here so I’m not sure if this division between owned and chartered capacity is interesting, but it seemed like a significant division in the data.

Continue reading

fivethirtyeight.com’s election forecast graph re-made in Playfair (video)

Playfair_graph (2)

I’ve added another video to my YouTube channel demonstrating how to make the above graph in my web app for graphing data, Playfair. Find out more about Playfair at the github page. I’ve made a simple tutorial that walks you through a couple Playfair graphs. And you can try Playfair online here (Chrome only right now).

Continue reading

Playfair: an open source web app for creating annotated charts

As part of my work at the Washington Center for Equitable Growth, I created a web app to make Equitable Growth (EG) styled charts. At EG we produce reports and policy papers on economic topics that frequently feature several charts each. Because the organization employs only one person proficient in Illustrator, creating these charts was an organizational bottleneck.

a Playfair chart

An example chart made in Playfair

To overcome this problem, I’ve created a free web app for charting data. This post is a little introduction to the app, which I call Playfair. There’s also a lot of information on the github page. I’ve made a simple tutorial that walks you through a couple Playfair graphs. And you can try Playfair online here (Chrome only right now).

Continue reading