Stacked Bar Chart

100%

Stacked Bar Chart

✓ Published0🌍 Public

Last edited Feb 12, 2018

Created on Feb 12, 2018

A stacked bar chart uses the D3 stack layout to visualize monthly mortality causes in the Crimean War from April 1854 to March 1856. The SVG rendering shows layers for wounds, other, and disease, with a categorical color scale and ordinal x-axis for dates. D3’s `d3.layout.stack`, `d3.svg.axis`, and `d3.time.format` handle the data transformation and axes, while the data loads from a TSV file.

AI-generated description

A recreation of a Protovis example in D3 using the stack layout.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1134768'>Stacked Bar Chart</a>

forked from <a href='http://bl.ocks.org/sivartravis/'>sivartravis</a>'s block: <a href='http://bl.ocks.org/sivartravis/9570c31758f269538746'>Stacked Bar Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Stacked Bar Chart

A stacked bar chart displays monthly mortality causes from the Crimean War, showing counts of disease, wounds, and other causes over a 23-month period. The chart uses an ordinal x-axis for dates and a linear y-axis for counts, with each bar subdivided into colored layers using the d3.layout.stack layout. D3 v3 renders the visualization as SVG, with axes generated via d3.svg.axis and categorical colors from d3.scale.category10. Data is loaded from a TSV file and parsed with d3.time.format before being passed through the stacking function.

NNikhilkuyya

97% 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

90% 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

89% match

Loading thumbnail…

Horizontal stacked bar chart implementation in d3.v4

This example shows a horizontal stacked bar chart of monthly mortality data from the Crimean War, breaking down deaths into wounds, other causes, and disease across the 1850s. The chart is rendered with SVG in D3 v4, using `d3.stack()` with an offset and keys, a linear `xScale` for values, and a band `yScale` for dates. The code draws rectangles per layer with `d3.scaleOrdinal` and `d3.schemeCategory20` for colors, and includes `d3.axisBottom` and `d3.axisLeft` with time formatting for the date labels.

TThanaporn-sk

89% match

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

86% 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

84% match

Loading thumbnail…

fresh block

A stacked bar chart displays the causes of mortality—wounds, other, and disease—among a historical population over several months in 1855–1856. The visualization uses a horizontal orientation, with each bar segmented by cause and colored via a categorical scale. Built with D3 v4, it employs `d3.stack()` to compute layer positions, `d3.scaleBand` for the time-based y-axis, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is parsed with `d3.timeParse` and rendered as SVG rectangles.

KKacieW

79% match

Loading thumbnail…

stacked bar

A stacked bar chart displays records published by month in 2015, broken into four categories: Geographic, Dataset, Application, and WebService. The chart uses D3.js (v3.5.5) to load the CSV data from `views.csv`, compute cumulative y-values for each segment, and render colored rectangles per category. An ordinal x-scale maps months, a linear y-scale encodes total counts, and a legend identifies the color-coded categories. The SVG rendering includes axes formatted with the `.2s` tick format and uses `d3.svg.axis` for the bottom and left axes.

MMbrownshoes

79% match