Skip to main content
SimilarExport ZIP
100%

Fatal Police Shootings Chart Working Copy

✓ Published0🌍 Public
MMartin Blatz
Last edited Nov 3, 2020
Created on Oct 30, 2020

This interactive bar chart visualizes fatal police shootings in the United States, allowing users to explore how incidents distribute across categories such as race, gender, and armed status. The chart dynamically aggregates counts from the Washington Post dataset using d3.nest() and presents results through React components with SVG rendering. Users select a variable from a dropdown menu, triggering the x-axis to update via React's state management. The implementation uses d3.scaleBand and d3.scaleLinear for axes, with native SVG `<title>` tooltips embedded in each bar.

AI-generated description

A program that loads and parses some CSV data from the Fatal Police Shootings Database compiled by the Washington Post

The intent is to map each event to it's location within the U.S. with a semitransparent circle to show darker regions as the areas with higher event density. This helps to answer the question "are there more fatal police shootings in certain parts of the country?" There are clearly areas with more events, though at a glance they appear to be in population centers.

I realized that my project timeline for this week involves cleaning up the charts, but next week I have adding additional menu functionality to the charts. That seemed backwards, so I focused on building a menu to select a variable and the functionality to dynamically regroup and count the data based on the selected value. For now the data is in a bar chart, but I'd like to try to put it into a pie chart.

I borrowed heavily from the Polished Scatter Plot with Menus posted by the professor.

To do:

  • Build a menu based on interesting data fields
  • write the code to group and aggregate the data based on the dynamic selection
  • reintroduce aggregation of data per state in addition to the new functionality
  • adjust to build a pie chart with this data
  • develop a module to plot pie charts in the center of each state
  • use the path.centroid() function to plot aggregated data
MIT Licensed

Similar vizzes

Loading thumbnail…

Fatal Police Shootings Charting

An interactive React dashboard charts fatal police shootings in the United States, using a dropdown menu to dynamically regroup counts by attributes like race, gender, or armed status. The bar chart updates through d3.nest() aggregation, with scales from d3.scaleBand and d3.scaleLinear rendering SVG rects. Data comes from the Washington Post’s Fatal Police Shootings Database, parsed via d3.csv. Tooltips display exact counts on hover.

MMartin Blatz
96% 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
93% match
Loading thumbnail…

Fatal Police Shootings Working Copy

This interactive map visualizes fatal police shootings across the United States, using a geoAlbersUsa projection and d3.geoPath to render state boundaries. Users can select an attribute from a dropdown menu—such as race, gender, or threat level—to color-code incident locations, with a color legend that supports hover highlighting to isolate specific categories. A bar chart shows the count of events per selected category. Data comes from the Washington Post's CSV dataset, rendered as SVG circles, with d3.nest and scaleBand/scaleLinear for aggregation and the chart layout.

MMartin Blatz
91% match
Loading thumbnail…

Shooting Data Working Copy

This interactive scatterplot visualizes fatal police shootings in the United States, plotting individual incidents by rank along both axes while allowing users to filter by flee status through a dropdown menu. The visualization loads CSV data from the Washington Post’s Fatal Police Shootings Database, using React hooks for state management and dropdown interactions. D3’s scaleBand and scaleLinear map the racial categories and data points, while custom React components render SVG axes and circles with tooltips, all styled with the Poppins font.

MMartin Blatz
90% match
Loading thumbnail…

Fatal Police Shootings Bar Menu

This interactive visualization presents fatal police shooting counts from the Washington Post database, using a stacked bar chart where each bar represents a racial category and each segment is color-coded by the victim’s flee status. Built with React, it leverages the vega-lite API (vl) to define the bar mark and encodings, while D3’s csv loader fetches the remote dataset. The chart renders as a full-window SVG via Vega, with tooltip support handled by vega-tooltip.

Nneetusingla12(Neetu Singla)
90% 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
90% 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)
89% match
Loading thumbnail…

Fatal Police Shootings In the U.S. Since 2015

This interactive visualization maps fatal police shootings in the U.S. since 2015, using data from the Washington Post. Users can colorize the geospatial points by attributes like race, gender, or flee status via a dropdown menu. A bar chart in the corner displays counts per category, while hovering over the color legend highlights the geographic distribution of a specific value. The map uses `d3.geoAlbersUsa` and `d3.geoPath` for projection, with points rendered as SVG circles and interactivity managed through React state.

MMartin Blatz
89% match