Interrupted

Unordered thoughts about programming, engineering and dealing with the people in the process.

Coxcomb Charts With Raphael.js

| Comments

The coxcomb chart was first used by Florence Nightingale to persuade Queen Victoria about improving conditions in the military hospitals during the Crimean War.

As you see it serves the same purpose as a traditional barchart, but displays the information in a coxcomb flower pattern.

I couldn’t find something already done that suited my needs, so I made one my self.

It’s slightly modified from the original design, since it doesn’t display the bars stacked but side by side, I think it’s better to display superposed labels that way.

Death and Mortality

Feeding data into the chart is straightforward

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
deaths = {
   data : {
       jan : {
          disease : 180,
          wounds : 20
       },
       feb : {
          disease : 140,
          wounds : 35
       },
       mar : {
          disease : 80,
          wounds : 50
       },
       may : {
          disease : 40,
          wounds : 40
       },
       ...
    colors : {
        ...
    }
}
Raphael("deaths", width, height).
    coxCombChart(width / 2, height / 2, height / 2, deaths, properties);

I’ve used it to show some skills in a resume-of-sorts if you wanna see a color strategy by category and not by series.

Lie Factor Warning

The received values are normalized and the maximum value takes the complete radius of the coxcomb. Be warned, each value is normalized and only the radius is affected, not the complete area of the disc sector. This may introduce visualization problems as the ones pointed by Edward Tufte, with x10 lie factors or more, as in the following known case with a 9.4 lie factor.

I may fix it if someone founds this useful, the area for the formulas are on this website. The source code is on github.

Follow me on Twitter

Comments