Re-making graphs in Playfair 1

This is going to be a semi-regular feature where I take some graphs I found and re-make them in my web app for charting 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).

Two-dimensional scatter plot

Someone in my Twitter timeline posted this (15-month old) piece from the Pew Research Center. I liked the idea of remaking the first graph because it’s a bit unorthodox – basically a one-dimensional scatter plot with quite a few annotations. Here’s the Playfair version:


This really wasn’t that hard to do in Playfair. Here’s the dataset:

country	disagree	height
Venezuela 	62	0
United States 	57	0
Egypt 	56	0
United Kingdom 	55	0
Brazil 	53	0
Nicaragua 	52	0
Israel 	51	0
Colombia 	51	1
France 	50	0
Philippines 	49	0
Mexico 	49	1
Spain 	47	0
Japan 	44	0
Uganda 	43	0
Russia 	41	0
Jordan 	41	1
Chile 	40	0
Peru 	40	1
Thailand 	39	0
Palest. ter. 	38	0
Indonesia 	38	1
El Salvador 	38	2
Tanzania 	38	3
Greece 	37	0
Lebanon 	36	0
Tunisia 	36	1
Argentina 	36	2
Poland 	34	0
Ukraine 	34	1
China 	33	0
Senegal 	33	1
Italy 	32	0
Nigeria 	32	1
Germany 	31	0
Malaysia 	31	1
Kenya 	30	0
India 	27	0
South Africa 	27	1
Vietnam 	24	0
Bangladesh 	23	0
South Korea 	23	1
Ghana 	23	2
Turkey 	20	0
Pakistan 	13	0

The ‘height’ column is the y-variable for Playfair’s points charting element. So making this chart is as simple as plotting disagree against height and then… doing a ton of work in the settings tab. I made the graph 255 pixels high, changed the settings for y-axis ticks so they are hidden (for stupid reasons, the right way to do this is to change the y-tick text size to 0.5, NOT 0), and messed with the graph margins a lot to make the spacing look right. The median line is a trendline drawn from -4 to 6 (which are also specified as the limits of the graph in the design tab, since Playfair would normally just have the y-axis go from 0 to 3 for this data). The last step was to recolor the US data point and add annotations for several countries.

Scatter plot with trend and text labels

I also remade the third chart in that post. It’s just a scatter plot with text labels and a trendline (Playfair can only do linear trends right now so I had to ditch the logarithmic trend). Here’s the chart:


This one required very little custom work. Here’s the dataset:

country	religion	region	gdbpc
Canada 	24	North America	44655.717
Italy	30	Europe	30803.002
Greece	35	Europe	24574.13
Poland	24	Europe	22201.121
Czech Republic	10	Europe	28086.483
Russia	18	Russia	18407.849
Turkey	70	Middle East	15767.332
Egypt	82	Middle East	6695.757
Jordan	82	Middle East	6281.488
Lebanon	57	Middle East	15077.617
Tunisia	79	Middle East	10252.567
Israel	25	Middle East	35658.681
Australia	21	Asia/Pacific	44345.873
China	2	Asia/Pacific	10694.698
Indonesia	94	Asia/Pacific	5498.999
Malaysia	77	Asia/Pacific	18639.154
Pakistan	98	Asia/Pacific	3231.228
Philippines	86	Asia/Pacific	4961.667
Korea	19	Asia/Pacific	34795.424
Argentina	32	Latin America	18917.284
Bolivia	68	Latin America	5616.468
Brazil	74	Latin America	12525.674
Chile	39	Latin America	19887.291
El Salvador	80	Latin America	7719.914
Mexico	45	Latin America	16111.463
Venezuela	42	Latin America	13530.524
Ghana	89	Africa	3589.691
Kenya	87	Africa	1903.429
Nigeria	90	Africa	2997.391
Senegal	97	Africa	2019.689
South Africa	69	Africa	11542.945
Uganda	86	Africa	1551.199

In the points tab, I set the x-variable to gdbpc, the y-variable to religion, and the color variable (which groups the by point color) to region. I fiddled with point parameters in the settings tab to get something a little bigger than the default solid point. There are a few ways you could add the text but the easiest is to use the text geom (tab) by setting the same x and y variables and then indicating the country variable as the actual text. I manually moved the text around so none of it was colliding. Finally, I fit a linear trend to the data in Excel and included that line using the segments/trend lines tab.

Simple bar graph

There is a barchart circulating on Twitter from that shows the male/female breakdown of reviews for the new Ghostbusters movie. I’m throwing this in here because I haven’t shown any Playfair bar charts yet. There’s nothing fancy about this – the data is once again grouped by the color variable but otherwise this is a 30-second job in Playfair so I’m not going to explain it too much here.


Share on FacebookTweet about this on TwitterShare on LinkedIn