indiemaps.com/blog

I’ve long been a sucker for the polar area/coxcomb/rose charts popularized by Florence Nightingale. These multivariate charts can show ordered or unordered categorical data. As noted in an Economist piece on influential information graphics,

As with today’s pie charts, the area of each wedge is proportional to the figure it stands for, but it is the radius of each slice (the distance from the common centre to the outer edge) rather than the angle that is altered to achieve this.

I wanted to produce some just for kicks, so looked around for a script in AS3. No dice. OK, any language? Didn’t see anything. So I sat on the idea for a while and then finally thought up the technique that made producing them in AS3 quite easy. With the resultant classes, producing graphics like the following small multiples of U.S. soldier deaths in Iraq is a snap. The classes are written in AS3, so can be used with Flash, Flex, or mxmlc. All the example screenshots below are PNGs captured from SWFs produced with only AS3 (extended Sprites). To see the code (which includes a lot of ugly annotation), click ‘view source‘ below any image. All source code is included in the ZIP distribution linked below.

U.S. Soldier Deaths in Iraq, March 2003 to October 2008

view source

The above chart series utilizes the coxcomb in the same manner as Nightingale’s original — as a month-by-month temporal chart. The following is also a small multiples presentation, but utilizes categorical coxcombs to show car color popularity by percent manufactured.

Cars manufactured by color, 2003 to 2006

view source

And as the ultimate test for the classes, I decided to try my hand at reproducing Nightingale’s original graphic. I relied on Hugh Small’s beautiful reproduction of Nightingale’s graphic. I quickly gave up on reproducing the fonts, and indeed a few of Nightingale’s embellishments/idiosyncrasies are not reproduced in my graphic. But one of these nights I’ll extend the class to more faithfully reproduce Nightingale’s original. Nevertheless, not bad eh?

view source

I’m open to the criticism that these coxcombs (and other area-based symbologies) are rarely preferable to a simple bar chart (a length-based symbology). But I still believe they ought to be a part of the information designer’s toolkit, especially as they hold definite advantages over their more popular offspring, the pie chart. For animated or small multiples applications in particular, the coxcomb is preferable to the pie chart because of the constant position/angle of slices. It’s easy to glance across a series of small multiples coxcombs, or watch an animating coxcomb, and follow individual slices. I’ve built basic interactivity and tweening (using Grant Skinner’s lightweight GTween Engine) into the class. See this discussion over at Edward Tufte’s site for some of the advantages and disadvantages of coxcomb charts.

Further, though bar charts may be easier to read, they may not work in all contexts, including interactive mapping, in which compactness may outweigh other concerns.

Here’s an example of some of the basic tweening and interactive capabilities of the class.

view source

When I initially thought of coding these charts, I balked at the idea of constructing slices whose relative areas would faithfully represent the data. But I eventually realized that I could just use masked circles. The circles could be accurately scaled to the data, and since each segment would mask the same percentage of the circle, the resultant pie slices would faithfully represent the data. The technique (demonstrated in the diagram below) has the added advantage of allowing tweening of slices in animated displays.

the main technique behind CoxcombChart.as — the masking and rotation of CoxcombSlices

A bit easier said than done, since the strokes on each slice need to be drawn. But that boils down to geometry. Each slice need only be rotated into place to form the final rose chart.

I’ll create a few more examples in the future — I’m particularly interested in the cartographic applications of this multivariate chart. I’ll likely post a Modest Maps layer showing coxcomb charts of average precipitation-by-month for major cities, or something, in the near future. For now, here’s all the code used to produce the graphics above. It should be pretty easy to produce a coxcomb chart of any data using this code, and my interface is flexible enough to modify the appearance and interactivity of the charts for most applications. But feel free to extend the class and override methods to alter these properties.

• A ZIP of the full distribution. This also includes Grant Skinner’s lightweight GTween Engine (a single .as class) which is required for the class. Andy Woodruff’s DashedLine class is also included, as it is used in the Nightingale example.
• For you browsers, view all the source here

Creating the coxcombs should be pretty easy. Here’s an example instantiation of a non-interactive coxcomb, 350 pixels wide/tall, with 3 slices, each a different color.