Skip to main content
SimilarExport ZIP
100%

Fatal Police Shootings Working Copy

✓ Published0🌍 Public
AAbdul Salam Almadani
Last edited Oct 20, 2020
Created on Oct 20, 2020

This interactive visualization maps fatal police shootings across the United States, using semitransparent red circles to reveal clusters of incidents and highlight regions with higher event density. The application loads CSV data from the Washington Post’s Fatal Police Shootings database and renders it atop state boundaries from a TopoJSON atlas. Built with React and D3 v5, it uses d3.geoAlbersUsa for projection and d3.geoPath to draw the geographic features, encoding each shooting as a small circle positioned by its longitude and latitude.

AI-generated description

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

I used the U.S. Geo Map of State Boundaries for the underlying map. In this iteration, I used the geoAlbersUsa projection to clean up and zoom in on the map. While other projection types appear to gracefully handle a lat/long input of 0, it returns null with this projection, which causes a fatal error when you reference the scaled pixel locations.

Adapted from Mass School District Boundaries from the DataVis class.

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.

What you can't see yet is that I've also improved the useData.js file to clean null data from fields I'll be using in future work. Blank data entries are now populated with "unknown" for the gender, race, flee, and armed fields. The age field is populated with a -1 for any blank entries. I've also placed a data aggregation prototype in the index.js file using the nest() and rollup() functions to create a new data array where each element contains a state key and a count. I hope to be able to utilize this framework with a menu to allow the user to select a grouping field to interact dynamically.

To do:

  • Improve zoom level for better visibility
  • clean nulls in data (changed blanks to "unknown")
  • aggregate data per state
  • develop a module to build a pie chart
  • 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 Working Copy

This visualization maps fatal police shootings across the United States, with semi-transparent red circles indicating the density of incidents. It overlays these points on a map of state boundaries using the `geoAlbersUsa` projection and `d3.geoPath`. The data comes from the Washington Post’s Fatal Police Shootings database, loaded via `d3.csv`, while the map uses TopoJSON from the us-atlas package. React manages the rendering, with the `useData` and `useUSGeo` hooks fetching the datasets.

MMartin Blatz
95% match
Loading thumbnail…

Fatal Police Shootings Mapped Across the U.S.

This example maps fatal police shootings across the United States as semi-transparent blue circles over a geographic outline of state boundaries. The visualization uses a d3.geoAlbers projection with d3.geoPath to render the map, while each incident’s coordinates are projected and drawn as SVG circles with opacity to reveal density clusters near population centers. Data comes from the Washington Post’s Fatal Police Shootings Database, parsed via d3.csv, and the map geometry is loaded from the us-atlas TopoJSON file using topojson.feature. The React-based component structure separates map rendering and data loading hooks.

MMartin Blatz
94% match
Loading thumbnail…

Fatal Police Shootings Mapped with Data Cleaned

This interactive map displays fatal police shootings across the United States, with red semi-transparent circles marking each event to reveal density clusters in population centers. The visualization uses the react framework with d3.geoAlbersUsa projection and d3.geoPath to render state boundaries from the us-atlas TopoJSON, while plotting incident coordinates from the Washington Post’s Fatal Police Shootings database. The code also cleans null data entries, converting blanks to “Unknown” for categorical fields and -1 for missing ages, and aggregates incident counts per state using d3.nest() for future analysis.

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

Fatal Police Shootings Fully Interactive

This interactive map displays fatal police shootings across the United States, with each incident as a colored circle positioned using a geoAlbersUsa projection and d3.geoPath for state boundaries. Users select an attribute from a dropdown to colorize incidents by categories such as race, gender, or threat level, with an ordinal color scale and interactive legend that fades non-hovered points. The data comes from the Washington Post’s Fatal Police Shootings Database, cleaned and parsed via d3.csv in React, while hover states filter points dynamically.

MMartin Blatz
92% match
Loading thumbnail…

Fatal Police Shootings Category Selection

This interactive map displays fatal police shootings across the United States, allowing users to color-code incidents by attributes such as race, gender, or flee status via a dropdown menu. The visualization uses d3.geoPath with a geoAlbersUsa projection to render state boundaries from TopoJSON data, while circles representing incidents are positioned using the same projection. A d3.scaleOrdinal color scale maps categorical values, with a React-based ColorLegend component showing the corresponding categories. Data comes from the Washington Post’s Fatal Police Shootings database, loaded and cleaned via d3.csv.

MMartin Blatz
90% match
Loading thumbnail…

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

A map of the United States displays fatal police shootings since 2015, with each incident plotted as a colored circle based on a selected attribute such as race, gender, or flee status. A bar chart in the corner shows the count of events per category, and an interactive legend highlights the geographic distribution of a specific value on hover. The visualization uses React with D3 v5, including `geoAlbersUsa`, `geoPath`, `scaleOrdinal`, and `scaleBand`, loading data from the Washington Post’s Fatal Police Shootings database and state boundaries from a TopoJSON atlas.

Ddr-rompecabezas
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