100%

Nightingale's Rose

✓ Published0🌍 Public

Last edited Jun 23, 2020

Created on Jun 23, 2020

This interactive SVG recreation of Florence Nightingale's polar area diagram visualizes monthly mortality causes among British soldiers during the Crimean War. The chart uses an animated polar area diagram with wedges scaled by square-root-transformed death counts to represent area proportionally. Built with D3.js, it computes radii from area values and renders two sequential twelve-month panels. Data comes from Nightingale's original report, with disease, wounds, and other causes distinguished by color.

AI-generated description

Nightingale's Rose

<a href="http://www.d3js.org" target="_blank">D3.js</a> visualization of the famous polar area diagram from Florence Nightingale's <a href="http://ocp.hul.harvard.edu/dl/contagion/010164675" target="_blank">"A contribution to the sanitary history of the British army during the late war with Russia"</a>.

Two works served as the inspiration for this implementation:

Mike Bostock's protovis <a href="http://mbostock.github.io/protovis/ex/crimea-rose.html" target="_blank">implementation</a>
Understanding Uncertainty's flash <a href="http://understandinguncertainty.org/node/213" target="_blank">implementation</a>

A few comments. Bostock's implmentation, while visually similar to Nightingale's visualization, is wrong. First, the data is not correct. You can verify this in Nightingale's original work. Second, Bostock directly maps the wedge radius to deaths. This mistake is common. Instead, Nightingale represents deaths in terms of area, thus requiring the radius for each wedge to be calculated (for more information, see Understanding Uncertainty's <a href="http://understandinguncertainty.org/node/214" target="_blank">The Mathematics of Coxcombs</a>). This discrepancy would be apparent if one displayed polar axes and allowed reading of radial values.

forked from <a href='http://bl.ocks.org/kgryte/'>kgryte</a>'s block: <a href='http://bl.ocks.org/kgryte/5926740'>2019 Nightingale's Rose OU</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays a stacked area chart of monthly casualties in the Crimean War, broken down by cause (wounds, other, and disease) using the d3.layout.stack() API and SVG rectangles. The chart uses a category10 color scale and ordinal x-axis with a custom time format. Data is loaded from a TSV file and parsed via d3.time.format, while the axes are generated using d3.svg.axis(). The visualization highlights the dramatic spike in disease-related deaths during the winter of 1854–55.

OOsekovS

69% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays mortality causes among British troops during the Crimean War by month from 1854 to 1856, breaking down deaths into wounds, other, and disease. Using D3 v3’s stack layout, the code computes cumulative layer offsets and renders each cause as a distinct colored bar segment with ordinal time-scaled x-axes and a linear y-axis. The SVG visualization, styled with category10 colors, loads tab-separated data via `d3.tsv` and leverages `d3.svg.axis` for formatted month and tick labels.

Mmbostock

67% match

Loading thumbnail…

Untitled

A stacked bar chart displays monthly mortality counts from the Crimean War, broken down by cause—disease, wounds, and other—using a dataset from a TSV file. The chart uses an ordinal x-axis with rounded bands and a linear y-axis, with layers computed via `d3.layout.stack`. SVG rectangles represent each cause per month, colored by a category scale. Formatting relies on `d3.time.format` for date parsing and axis tick labels, with axes generated through `d3.svg.axis`.

KKrishu

67% match

Loading thumbnail…

fresh block

This stacked bar chart visualizes historical death data from the Crimean War, breaking down monthly mortality into categories of disease, wounds, and other causes. The implementation uses D3 v4's `d3.stack`, `d3.stackOffsetNone`, and `d3.scaleBand` for the time-based y-axis and linear x-axis. It sorts months by total deaths and renders layers via SVG rectangles, with axes configured through `d3.axisLeft` and `d3.axisBottom`. The color scheme uses `d3.schemeCategory20` to distinguish the three mortality categories.

GGoomble

65% match

Loading thumbnail…

Reusable D3 Scatter Plot

This animated scatter plot cycles through cancer types—liver, breast, prostate, and thyroid—displaying death rates over time using the Iris Dataset-inspired structure. Built with reusable D3.js components and SVG rendering, the visualization updates every 2 seconds, transitioning between datasets while updating the title and axis labels. Symbols vary by cancer type (circle, square, star) and axes represent years and number of deaths, with smooth transitions on each refresh.

AAsrar Al Qassem

62% match

Loading thumbnail…

Untitled

This example presents a static SVG visualization inspired by Minard’s map of Napoleon’s Russian campaign, plotting the army’s path through cities like Minsk and Moscou with associated temperature annotations. The code uses D3 v7 to render custom path data for the route and temperature lines, while manually positioning city labels and survivor count text. It displays daily temperature readings and dates along the retreat, with a textured background. The visualization relies on hardcoded arrays for city coordinates, temperature points, and survivor counts, rendered entirely through SVG elements rather than interactive scales or axes.

IIshan Goyal

62% match

Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes mortality rates across ten countries, with each slice's arc length proportional to the death count from a CSV file. The chart displays country labels and uses a categorical color scale from `d3-scale-chromatic`. On hover, a tooltip appears showing the percentage of total deaths, calculated from the data. The visualization is built with D3.js using `select`, `pie`, `arc`, and `sum` from the D3 module, rendering as an SVG with custom styling for hover effects.

Aamiralitah

62% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through four cancer types in the U.S., plotting yearly death rates using D3’s reusable chart pattern. Each type—liver, breast, prostate, and thyroid cancer—is represented by a different symbol (star, square, circle, square), with the data updating every two seconds. The chart uses SVG rendering and smooth transitions, with axes labeled "Years" and "Number of Death", while a dynamic title indicates the currently displayed cancer type.

Rrobertotienonyaranga@gmail.com

61% match