Stacked-to-Grouped Police Killings

100%

Stacked-to-Grouped Police Killings

✓ Published0🌍 Public

Last edited Mar 31, 2017

Created on Mar 31, 2017

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.

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>

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/lorenzopub/'>lorenzopub</a>'s block: <a href='http://bl.ocks.org/lorenzopub/57835f17496bf298ebda0c502b59dfa8'>Stacked-to-Grouped Police Killings</a>

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

mit Licensed

Similar vizzes

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

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

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

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

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

75% match

Loading thumbnail…

hw9_1

This visualization shows how police shootings of unarmed subjects changed from 2010 to 2016 across the 50 largest US police departments, using a line chart with interactive hover. The line tracks the total number of shootings per year, while the tooltip displays the racial breakdown for each year (Latino, Black, White, Asian, Other, Unknown percentages). The chart uses D3 v4 with SVG rendering and includes axis labels, a hover interaction that reveals exact values, and a legend describing the race abbreviations. Data was collected by VICE News over a nine-month period.

HHussamHallak

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

75% match

Loading thumbnail…

Fatal Police Shootings Bar Menu

This visualization presents a stacked bar chart of fatal police shootings in the United States, with the X axis showing the victim's race and the bars color-coded by the victim's "flee" status at the time of the incident. The chart uses a count aggregation to display the total number of fatalities per race, with each segment representing a different flight behavior. Built with React and the Vega-Lite API, it loads data from the Washington Post's Fatal Police Shootings database via d3.csv, while the chart is rendered using vega and vega-tooltip for interactive details. The appearance is customized through a Vega-Lite config that adjusts font sizes and axis colors for readability.

Nneetusingla12(Neetu Singla)

75% match