Use alternative to donuts

[jpmckinney]

Donuts are bad, because the only visual elements with which I can do quantitative comparisons are the arcs of the circle. Better alternatives are:

• Regular pie charts: At least now I can compare angles at the centre of the circle, which is easier than (and in addition to) arcs of a circle.
• Bar charts: I can compare lengths, which is empirically the easiest way to compare two values visually. There can additionally be a vertical line to indicate the threshold that the bars need to cross.

https://www.perceptualedge.com/articles/visual_business_intelligence/save_the_pies_for_dessert.pdf

[jpmckinney]

I haven't tested what happens if a bar chart has too many codes (with a pie chart, Google Charts uses sliceVisibilityThreshold to hide small slices). If it becomes a problem, we can change the logic when there are over a certain number of codes to either group values into an “Other” bar, or render a pie chart.

After:

• Easier to read (text labels next to bars)
• Easier to instantly see the shape of the data (different length bars, not just a donut or circle)
• Easier to compare lengths (instead of arcs or angles)

Before:

After:

[jpmckinney]

Separately: I tried to add a vertical line for the min/max thresholds, but the "line" style of annotation doesn't work on bar charts (e.g. try changing LineChart to BarChart in https://jsfiddle.net/6zahewst/6/)

[jpmckinney]

I changed the custom bar charts to use Google Charts as well:

Before:

After: