Stacked-to-Grouped Police Killings

100%

Stacked-to-Grouped Police Killings

✓ Published0🌍 Public

Last edited Sep 18, 2015

Created on Sep 18, 2015

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.

AI-generated description

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>

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

94% 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…

USA police shootings

A stacked bar chart displays the total number of police shootings per state, with each bar segmented by race to show demographic distribution. The visualization uses the vega-lite-api, building a bar mark with grouped aggregation via `vl.groupby` on state and race, and encodes counts as the y-axis. Data is loaded as CSV from a Kaggle-hosted gist using `d3.csv`. The chart is rendered with Vega-Lite, styled with custom axis and label configuration, and includes tooltips for count and race details.

ZZG

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

79% match

Loading thumbnail…

US Police Shootings Visialization

A bar chart visualizes the frequency of US police shootings, grouped by the type of arms involved and colored by the victim's race, with tooltips showing exact counts. The visualization is built using the vega-lite-api to define the bar marks and encodings, while d3.csv loads the shootings dataset from a gist repository. Vega and Vega-Lite render the chart, with vega-tooltip providing interactive details, and a custom config adjusts font sizes and axis styles for readability. The chart fills the entire browser window, using the dataset's categorical and quantitative fields directly.

Llintonylin

77% match

Loading thumbnail…

Fatal Police Shootings Grouped Bar Chart

This grouped bar chart visualizes fatal police shootings from the Washington Post database, counting victims by age range along the x-axis and race as color-coded grouped bars. The visualization reveals that Black non-Hispanic and Hispanic individuals account for disproportionately more shooting victims under age 40 compared to U.S. Census demographics. Built with d3.v5 and Vega-Lite, the code loads CSV data via `d3.csv` and renders the chart using `vl.markBar()` with column and x field encodings for binning, y-axis count aggregation, and tooltip interactions. The interface uses Vega-Lite API methods like `vl.column().fieldN()` and `vl.color().fieldN()` to construct the visual encoding programmatically.

MMartin Blatz

76% match

Loading thumbnail…

Fatal Police Shootings Bar Menu

This stacked bar chart displays the count of fatal police shootings, with each bar representing a racial category along the x-axis and color-coded segments indicating the victim's "flee" status. Built with React and the Vega-Lite API, it loads CSV data from the Washington Post's Fatal Police Shootings Database via `d3.csv`, aggregates counts with `.count()` aggregation, and renders with custom tooltips. The visualization uses Vega-Lite's mark configuration, D3's CSV parser, and the vega-tooltip handler for interactive exploration.

MMartin Blatz

76% match

Loading thumbnail…

Fatal Police Shootings Pie Chart Working Copy

This interactive visualization explores fatal police shootings in the U.S. using a dynamic bar chart that groups and counts incidents by selected attributes like race, gender, or flee status. Users select a variable from a dropdown menu, and the chart updates to show the distribution of events across categories. The application loads CSV data from the Washington Post database and uses React with D3 v5 APIs including d3.nest, d3.scaleOrdinal, d3.scaleLinear, and d3.pie to aggregate and prepare the data. The included Pie Chart working copy renders SVG elements but does not yet display the pie chart visualization.

MMartin Blatz

76% match