Nightingale Charts - Projects - Beneath the Waves

Nightingale Charts

One of my earliest concerns when developing the experimental Yield-Focused Vulnerability Score (YFVS) model was how to represent the vulnerability data in different ways so that it would be useful to people in a wide variety of information technology roles. In particular, I liked the idea of being able to display the data in a medium level of granularity that would appear as a sort of pattern which would visually indicate some of the general aspects of the data it represented — was a particular score (or subscore) high because all of the elements that made it up were high, or because of a few outliers, and so on.

A topic like vulnerability scoring can get dry and tedious very quickly, so even more so than usual when designing a tool, I also wanted something that would look interesting enough to draw the viewer's attention.

As usual, my thoughts quickly turned to the pinnacle of interfaces: the control consoles of fictional spaceships in late-1970s-to-early-1990s film and television. "How would Glen A. Larson like to see vulnerability data represented?" I pondered. "What sort of score display would inspire the brave pilots and navigators defending the Frontier against Xur and the Ko-Dan armada to shout 'victory or death!'?"

Clearly, something that looked like an LED bar graph was required. But how could I make the design stand out, as well as create a pseudo-glyph that would act something vaguely like a symbol or signature for the specific score or sub-score that went into it? Fortunately, one of the other monuments of fantastic visual design (Tron: Legacy, as well as the original Tron) had the answer: radial/polar mapping of the data. I had been playing around with radially-mapped binary patterns to create Tron-esque wallpaper in late 2013, and here was a chance to make a functional display based around the concept.

I figured this would be a bit of a headache, so I searched for existing charting/graphing tools that would display data in this type of format. As it happens, Florence Nightingale had reached a similar conclusion in the 19th century when trying to convey statistics about deaths during the Crimean War. Unfortunately, very few tools support output in her polar-area graph format, and none of them looked like what I was hoping for. The only option was to write it myself. I was pleasantly surprised to discover that unlike just about everything else related to JavaScript, using the HTML5 Canvas drawing model made what I had in mind ridiculously simple.

Greetings, Starfighter!

I believe I was also successful at creating pseudo-glyphs:

The ninth chevron is locked!

In addition to the YFVS score calculator, you can see some randomly-generated, much-more-colourful charts on the Nightingale Chart demo page. If you are using a browser that doesn't support the Canvas tag, or don't want to run JavaScript from my site, here are some static screenshots:

Nightingale Chart/Radial Bar Graph Examples

Implementing Your Own

Nearly all of the Canvas-related JavaScript was lifted from various pieces of example code. I did not write it to support more than the two very specific uses I had in mind. If you are interested in incorporating this type of graph into your own software, I would strongly recommend writing your own version rather than trying to tweak mine to make it fit.

More on Florence Nightingale's Polar-Area Graph

A few of the pages where you can read more about the history of Florence Nightingale's original polar-area graph are Engines of Our Ingenuity No. 1712: Nightingale's Graph, and Biographies of Women Mathematicians: Florence Nightingale's Polar-Area Diagram.

I think the reason that more graphing systems don't implement her design is that it's actually a bit hard to get it right. Here's the wrong way reconstruct the Crimean War graph referenced on those (and other) pages:

How not to make a polar area chart

This method is wrong because the size of the segments is based solely on the distance from the center of the chart. Florence Nightingale's real graph accurately represents the data by having the area of each segment scaled appropriately. I wouldn't even know where to start in terms of getting that right in a polar coordinate model. Calculus? Trig? Sounds tricky no matter what the answer is. The way I handled it (using fixed-width bars radiating outwards) avoids that problem entirely instead of addressing it.

Related Articles:
Yield-Focused Vulnerability Score (YFVS)