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

The dumb reason I went and made a graphing app, even though there are already like a million of them

There are a lot of great free chart making apps out there like Datawrapper and Chartbuilder.1 These tools are great, but they can’t do everything we wanted out of a chart maker. In particular, we wanted to be able to annotate charts extensively as necessary so they could be stand-alone story-telling tools on social media (as in the example above this paragraph). Here are the most important design principles I had in mind for Playfair:

  • Power and flexibility
  • Annotations/on-chart editing
  • Collaborative editing

Once I decided I’d like other people to be able to use Playfair as well I added a couple more:

  • Easy to deploy
  • Easy to theme

I talk a bit about these on Playfair’s github page, but I want to focus on the first two in this blog post, because they were the primary motivators for creating Playfair.

Power and flexibility

What I mean by ‘power and flexibility’ is really more specific than that. Because we create some charts that are pretty academic-ish at EG, with things like dot plots that have 95% confidence intervals around them, I wanted to create a simple to use grapher that functions more or less like the R package ggplot2. In ggplot2, you don’t create bar graphs, or scatter plots, or anything else really. Instead, ggplot2 has what it calls geoms. Geoms are geometric objects – they could be any method of representing data like a line, a point, a bar, or something exotic like a violin. This means you can layer various geoms to create more complicated charts. In this ggplot2 graph, the point geom has been combined with the text geom to create labeled points:

geom_text-10

ggplot2 is super popular (just take my word for it) because you can make virtually any type of chart using this method.2

Playfair also uses geoms. In Playfair these are categories in the Chart tab. If enough data is provided for Playfair to chart a geom, it will do so (usually specifying an x and y variable is enough). Here are the geoms available right now:

geoms

Playfair is pretty flexible! In a future post, I will show off some of the different graphs you can make with Playfair using the concept of geoms and the (also pretty useful) settings tab in Playfair (which allows you to play with the design of a graph).

Annotations and on-chart editing

A good graphic on social media can do a couple of things. It could draw people to your site. That would be great, but it’s a big lift to ask people to read about economic policy, even if it has been written with the lay person in mind. So at EG we were interested in creating static graphics that tell the whole story. Even if the first chart in this post gets retweeted without attribution and without a link to the original article, it still tells people more or less what we were trying to get across in the full post.

This is a big point of differentiation with other charting apps. Very few charting apps make it easy to add your own annotations. In Playfair, you can right-click the charting area and add text, arrows, and callout lines easily. All text on the graph can be edited simply by double-clicking the text. You can alter the color of individual data points, label data points, style text, and more by right-clicking on graph elements. Here’s another chart that has been extensively annotated:

image001

Interested in Playfair? There’s 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). Finally, I have a youtube channel where I walk through creating some graphs.

  1. I kinda wish I had looked more closely at highcharts as an option. These are used to great effect by some non-profit sites I have seen. It’s hard to tell how much of an investment it takes to get highcharts to that level of function however. Also is it just me or does highcharts need to put some much nicer looking charts in its gallery?
  2. That’s not the only reason ggplot2 is hugely popular. It also does cool stuff like facets, which Playfair can’t do yet. It’s also pretty easy to use and lots of data-people know R.
Share on FacebookTweet about this on TwitterShare on LinkedIn