Mapped Data AlbersUsa
This example combines a U.S. state boundary map with data points from the Washington Post’s Fatal Police Shootings database, showing geographic patterns in the data through semi-transparent circles. It uses D3 v5’s `geoAlbersUsa` projection via `d3.geoPath` in a React framework, with the map sourced from `us-atlas` topojson and the data loaded from CSV using `d3.csv`. The visualization adjusts the projection’s fit to the state boundaries, and renders circles at lat/long coordinates, avoiding null values from the projection.
AI-generated descriptionA 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. There are clearly areas with more events, though at a glance they appear to be in population centers.
To do:
- Improve zoom level for better visibility
- 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