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

An Algorithm for Creating and Selecting Graph Axes

For an arbitrary set of data points, what’s the ‘best’ graph axis for those points? Say that your x-variable runs from 5 to 45. A human can quickly pick a few promising options for the x-axis. It could have ticks at 0, 15, 30, and 45. Or perhaps 0, 10, 20, 30, 40, and 50. Getting a program to generate ‘nice’ options like this is a bit trickier. I’ve been working on a graphing app recently and I’ve reproduced my solution, with notes, below.

graph_axes

Although there are a number of algorithms people have put forth on Stack Overflow and elsewhere, many of these do not handle certain kinds of data sets correctly, and virtually none treat 0 correctly in my opinion. I started from scratch with the following 5 rules for my function:

  • If an axis crosses 0, 0 *must* be an axis tick value
  • Axis ticks *must* be attached to a grid line (i.e. you can’t have x-axis ticks floating in space – they must be attached to a y-axis grid line as you see in the example above)
  • The data should be as tightly contained as possible (little wasted space)
  • There should be no fewer than 4 ticks on each axis, and if rule 2 requires it, up to 10
  • Numbers should be ‘nice’ (round numbers etc.)

Continue reading