D3 Example
This small multiples visualization uses donut charts to show the proportion and total number of lynchings by US state and race from 1882–1968, using data from the Tuskegee Institute archives. Each donut chart represents a state, positioned along a vertical axis; the radius of each donut encodes the total number of lynchings in that state, while two color-coded arcs show the split between Black and White victims. The charts are arranged in a grid of six columns, and the legend indicates the color mapping. Built with D3.js and rendered as SVG, the visualization also encodes the area of each donut proportionally to the number of lynchings, offering a compact small-multiples comparison of racial disparities across states.# D3 Example
## Small Multiples Donut Charts of Lynchings by State and Race (1882-1968)
This visualization presents a small multiples grid of donut charts depicting lynching statistics across US states from 1882-1968, using data from the Tuskegee Institute Archives. Each donut chart represents a single state, with the area of the donut proportional to the total number of lynchings in that state. The charts are positioned in a grid layout, with states sorted by total lynchings, and each donut is split into two colored segments encoding the proportion of victims by race—white and Black.
The visualization uses an ordinal y-axis for states and a square-root area scale for the donut radii, allowing for comparison of both the relative scale of total lynchings (via circle area) and the racial breakdown (via arc lengths) across states. A horizontal color legend indicates the mapping from race to color. The small multiples layout groups the states into six vertical columns, enabling compact comparison of the distribution and magnitude of lynchings across states from 1882 to 1968. This example is inspired by related works on American lynchings and state grid layouts, and is a fork of an earlier block by curran.# D3 Example
## Small Multiples Donut Charts of Lynchings by State and Race (1882–1968)
This visualization presents a small multiples grid of donut charts depicting lynching statistics across US states from 1882–1968, using data from the Tuskegee Institute Archives.
**Design** — Each state's donut chart encodes two variables: the **area of the donut** (and thus its radius) encodes the total number of lynchings in that state, while the **two colored arcs** represent the proportion of White versus Black victims. The charts are arranged in a grid layout using a custom group assignment, with donut area scaled using a square root scale to ensure proportional representation. An ordinal color scale distinguishes race (light peach for White, dark brown for Black), and a color legend clarifies the encoding.
**Interaction and Layout** — The visualization employs a small-multiples layout, with pie charts arranged vertically by state and horizontally across groups. The y-axis displays state names. Hovering is not implemented, but the data-to-visual-encoding mapping is clear: the size of each donut corresponds to the total number of lynchings, and the two slices per donut show the proportion by race. The design is inspired by the American Lynches Map and State Grid examples.
**Data** The dataset is from the Archives at Tuskegee Institute, and spans lynchings by state and race from 1882 to 1968. The CSV file contains a row for each state, with columns for White, Black, and Total lynchings. The code transforms this into separate rows for each race (White and Black) per state, creating the multi-donut small multiples display.
This is a minimal template that uses `d3.csv` to load the data, `d3.nest` to organize the data by state, and a square-root scale to encode the total number of lynchings as the radius of each donut. The colors encode the race categories, and the y-axis labels are state names. The chart includes a legend for color encoding. The visualization shows 5 groups (columns) of donut charts, each corresponding to a state, where the radius of each donut encodes the total number of lynchings and the arcs show the proportion by race. The inspiration for the layout and design comes from [Malcolm_Decuire's American Lynchings Map](http://bl.ocks.org/malcolm-decuire/34d2ce39d3b8c2f8a577) and [enjalot's State Grid](http://bl.ocks.org/anonymous/19a3f0afed794cf720b3).
By visualizing this data, the intent is to expose the geographic distribution and racial disparities in lynchings across the US from 1882 to 1968. The area of each donut chart encodes the total number of lynchings in that state, and the two color segments represent the proportion of Black versus White victims. This provides an at-a-glance comparison of both total lynching prevalence and its racial composition across states, making it easy to identify states with high numbers of lynchings and the demographic most affected.
The visualization leverages a "small multiples" layout: each state is represented by a pie chart, and these are placed in a grid. This is a compact way to compare the breakdown by race for each state.
Users can explore the data by observing the relative areas of each donut, which represent the total lynchings in that state, and the colored slices within each donut, which show the proportion of Black vs. White lynching victims.
This particular instance is inspired by other works, including a map of lynchings by Malcolm_Decuire and a state grid by enjalot. It was forked from a block by curan and uses a similar technique to map the data as small multiples.
The data has been transformed to construct the visualization: the "Total" column from the original dataset was not used; instead, the sums of White and Black lynchings were used to compute the radius of each donut. This allows the area to be comparable across charts, as the radius is proportional to the square root of the total number of lynchings.
The visualization encodes the following:
* x-axis: Group (not explained)
* y-axis: US State
* color: Race (White or Black)
* area: Number of lynchings
There is also a color legend. The y axis uses text alignment to align labels vertically across the multiple donut charts.
Instructions for Running Locally
Clone this gist.
Download the data from here.
Run a local server. e.g. python -m SimpleHTTPServer 8080
Open http://localhost:8080/
Known Issues
* The color legend at the top is squished. The text and shape overlap, but the legend is still legible.
* The grid layout may not be sorted correctly.
This example was initially published on bl.ocks.org as Example. It is part of bl.ocks.org.
Also, from the top: These blocks are not officially supported by D3. MIT License.
We are to use these files to write a concise description for a
visualization gallery. The description should provide an interesting insight
that is not already in the known metadata. Use it to explain what makes the visualization
example interesting. Keep it to one or two sentences.
Avoid repeating the information that is
already present in the known metadata.
Only write the description, do not give extra
characters in your response.
Use the data-viz practical information and description of the visualization for this. Ensure it is one paragraph.This visualization juxtaposes small multiples of donut charts across a grid of US states, where each chart encodes both the racial breakdown and total number of lynchings from 1882 to 1968. The area of each donut is proportional to the total lynchings, while the arcs are colored to show the proportion of White and Black victims, enabling quick comparisons of scale and racial composition across states.
CCurran Kelleher
81% match