Stacked-to-Grouped Police Killings with D3 v4

100%

Stacked-to-Grouped Police Killings with D3 v4

✓ Published0🌍 Public

Last edited Mar 15, 2017

Created on Mar 15, 2017

An interactive bar chart displays police killings from January to June 2015, broken down by race. Users can toggle between stacked and grouped views using radio buttons. The visualization uses D3 v4's `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and the ordinal color scheme `d3.schemeCategory20c`. Rectangles animate between layouts via a sequenced `transition()`, preserving object constancy as described by Heer and Robertson. Data comes from a CSV file provided by FiveThirtyEight.

AI-generated description

D3 Version 4 implementation of the stacked to grouped bar chart.

Switch between stacked and grouped layouts using sequenced transitions! Animations preserve object constancy and allow the user to follow the data across views. Animation design by Heer and Robertson. Colors and data generation inspired by Byron and Wattenberg.

Police killings data for 2015 (up to June) downloaded from FiveThirtyEight

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3943967'>Stacked-to-Grouped Bars</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/2b1446f496c3968f6ecd'>Stacked-to-Grouped Police Killings</a>

forked from <a href='http://bl.ocks.org/Nastasi7/'>Nastasi7</a>'s block: <a href='http://bl.ocks.org/Nastasi7/8e4b032ce21ee9291ee8'>Stacked-to-Grouped Police Killings</a>

forked from <a href='http://bl.ocks.org/mashehu/'>mashehu</a>'s block: <a href='http://bl.ocks.org/mashehu/de923d763a53d523596ba81c6d1f3233'>Stacked-to-Grouped Police Killings with D3 v4</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Stacked-to-Grouped Police Killings

This visualization displays police killings from 2015 (January through June) using data from FiveThirtyEight, with the x-axis showing months and bar segments representing different racial categories. A radio-button control lets users switch between stacked and grouped bar layouts, with sequenced transitions that animate the bars smoothly between the two configurations to maintain visual continuity. The implementation uses D3.js version 3.5.5 with the `d3.layout.stack` API to compute stacked positions and SVG rect transitions to update positions and heights.

LLucyI

92% match

Loading thumbnail…

Stacked-to-Grouped Police Killings

This example visualizes police killings in 2015 (through June) as a bar chart broken down by race and month. Users can toggle between stacked and grouped layouts, with animated transitions that preserve object constancy across views. The code uses D3.js (v3) for data binding, scales, axes, and transitions, processing data from a CSV file. The visualization includes a legend and radio buttons to switch between the two layout modes.

NNastasi7

92% match

Loading thumbnail…

TEST

A stacked and grouped bar chart compares police killings by race across six months, with radio buttons letting viewers toggle between the two layouts. The data is loaded from a CSV and pivoted in JavaScript into per-race monthly counts. Built with D3.js (version 3.5), the visualization uses `d3.layout.stack` for the stacked arrangement, ordinal and linear scales, and animated transitions—including a delayed bar growth and a timed automatic switch from stacked to grouped after two seconds—to smoothly shift between modes.

LLGBY4

87% match

Loading thumbnail…

bar + scatter

A linked bar chart and scatter plot visualize the age and race/ethnicity of individuals killed by law enforcement. The bar chart shows the count of deaths per racial category, and hovering over a bar filters the scatter plot to show the age distribution of deaths for that group. The visualization uses D3.v4, Vue, and crossfilter to link the two SVG charts with animated transitions. Data is from a CSV of police killings in 2015.

TThanaporn-sk

80% match

Loading thumbnail…

A4 Bar Chart in D3

This visualization displays the number of police shootings recorded by racial category, using a bar chart where bar heights correspond to aggregated counts from a CSV dataset. The chart is rendered in SVG via D3.js v7, using `d3.csv` for data loading, `d3.rollup` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for positioning. CSS hover effects change bars from steelblue to orange, while axis labels are added via `d3.axisBottom` and `d3.axisLeft`.

Nnathanjmuljadi@gmail.com

78% match

Loading thumbnail…

A6 Sequential Color Scale

This visualization shows police shooting counts by race and gender as grouped bar charts, with a sequential red color scale encoding the magnitude of each count. It uses D3 v7 with SVG rendering, loading data from a CSV file. The code aggregates records by race and gender, then employs `d3.scaleBand` for categorical axes, `d3.scaleLinear`, and `d3.scaleSequential` with `d3.interpolateReds` for the color fill. It also includes gender labels and axes styled with CSS.

Nnathanjmuljadi@gmail.com

77% match

Loading thumbnail…

Fatal Police Shootings stacked Bar

This stacked bar chart visualizes fatal police shootings by race, with each bar segmented by the victim's fleeing behavior. The chart uses Vega-Lite's API to encode race on the x-axis, count on the y-axis, and flee status as color. The data is loaded via D3's `csv` function from a GitHub Gist, and the visualization is rendered using the `vega-lite-api` with React and a custom tooltip handler.

Mmandadi1999

77% match

Loading thumbnail…

Fork of Fatal Police Shootings In the U.S. Since 2015

This interactive visualization maps fatal police shootings in the U.S. since 2015, overlaid on state boundaries projected with `d3.geoAlbersUsa` and rendered as SVG paths. Users can colorize the points by attributes like race, gender, or threat level via a React dropdown, and hover over the ordinal color legend to fade unrelated points. A bar chart using `d3.scaleBand` and `d3.scaleLinear` shows event counts per selected category. Data comes from the Washington Post’s CSV, parsed with `d3.csv`, while state geometries load via `d3.json` and `topojson.feature`.

CChris Fritz

76% match