Skip to main content
SimilarExport ZIP
100%

TEST

✓ Published0🌍 Public
LLGBY4
Last edited Jun 20, 2017
Created on Jun 20, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
87% match
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
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
77% 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
77% match
Loading thumbnail…

A2 Bar Chart

This A2 Bar Chart visualizes counts of police shooting victims by race, using a logarithmic scale on the y-axis to accommodate wide disparities in the data. The chart loads a CSV from a GitHub gist using p5.js’s `loadTable()` function, aggregates race counts in `preload()`, and renders the bars with `rect()` on a 3000x3000 `createCanvas()`. Axis labels, tick marks, and bar values are drawn with custom mapping logic inside the `draw()` loop.

Nnathanjmuljadi@gmail.com
76% 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
76% 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
75% match
Loading thumbnail…

Test Plot

This stacked bar chart visualizes health condition counts across racial groups using CSV data from health_indicators_2019.csv. The d3.stack() function layers conditions as colored segments, with d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal handling positioning and colors. Rectangles are appended to SVG groups, while mouseover, mousemove, and mouseleave events trigger a simple HTML tooltip displaying each segment’s count.

Aaveryfairbanks
75% match