Cleveland-McGill Chart Generator

This tool uses d3.js to create several charts in the style of Cleveland and McGill's seminal study on graphical perception (pdf).

On page load, a semi-random 5-digit dataset is generated. Datasets are generated using the same algorithm that Cleveland and McGill used in their study.

Currently, the best way to extract the charts is to use SVG Crowbar from Shan Carter.

Some charts, such as Treemaps and Bubble charts, weren't included in the original study. These charts were included in a later study from Jeffrey Heer and Mike Bostock, Crowdsourcing Graphical Perception, part of which replicated Cleveland and McGill's original experiment.

I needed these charts so I could run my own version of this experiment, which explored how emotion can influence how well we perceive visualizations (pdf), which I'll be presenting at CHI 2013.

Here's the code. (It's messy, since it's the first thing I built using d3.)

Generated Dataset Info

Dataset:

Answers: