US Map Polishing

100%

US Map Polishing

✓ Published1🌍 Public

Last edited Nov 5, 2025

Created on Nov 5, 2025

An interactive choropleth of FBI NICS background check counts by U.S. state animates a zoom and reset view. Built with D3.js (`geoAlbersUsa`, `geoPath`), it fetches state boundaries as TopoJSON and merges CSV data. Hovering highlights a state in red and displays its name in a tooltip; clicking a state zooms to its bounding box using D3’s `zoom` behavior.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

US Map with Zoom on Click

This interactive map of the United States displays state boundaries using the `d3.geoAlbersUsa()` projection and `d3.geoPath()`, with geographic data sourced from `us-atlas` and parsed via `topojson-client`. Users can click any state to zoom into it using the `d3.zoom` behavior, with a 750ms transition, while hovering highlights the state in red and shows a tooltip with its name. A background click or the “Reset View” button restores the original view. The visualization also supports loading external CSV data, such as the provided `nics.csv` firearm background-check statistics.

Rrpkupfer@wpi.edu

86% match

Loading thumbnail…

US State Map with Interaction

This example presents a choropleth-style map of US states with pan and zoom interaction. Built with D3 v5 and rendered as SVG, it uses `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.zoom` to display state boundaries loaded from a TopoJSON file. State names and election data come from a CSV file, though only the names appear as tooltips via appended `title` elements. Hovering highlights a state in red, while the map supports interactive zooming through event-driven transforms.

Ddanrhymes

83% match

Loading thumbnail…

Let's make an interactive US Map with D3.js!

This interactive US map uses d3.geoAlbersUsa and d3.geoPath to render state boundaries from TopoJSON data, with each state displaying its name via SVG title elements. The visualization supports zooming and panning through d3.zoom, applying transforms to the SVG group containing the state paths. States are colored light green and highlight on hover, while the surrounding ocean appears as a light blue sphere backdrop. The map loads geographic data from a CDN-hosted US atlas file and renders everything client-side using D3 v5.

KKaitlyn Trudeau

81% match

Loading thumbnail…

Untitled

An interactive choropleth of US states allows users to click a state to zoom in and highlight its boundaries, with the map rendered via d3.geo.path and TopoJSON. Wildfire data is loaded from a CSV, though the visualization primarily shows state selection and zoom animation using React state management. The albersUsa projection scales and translates to focus on selected regions, with transitions animating the zoom effect.

AAndrey Getmanov

81% match

Loading thumbnail…

Fork of ICE-8-VK-1.2

This choropleth map of U.S. states displays a custom crime-rate index, with darker blue fills representing higher values and gray indicating missing data. State labels and a gradient legend with an axis clarify the quantitative scale. Built with D3 v7 and TopoJSON, the visualization loads US Atlas states-10m data, applies a geoAlbersUsa projection via d3.geoPath, and maps values through a d3.scaleSequential with an interpolateBlues interpolator. Hover interactions highlight state boundaries, and tooltips are provided through SVG title elements.

VVinil Karmilla

81% match

Loading thumbnail…

Untitled

An interactive choropleth map displays property crime rates across U.S. states from 2009 to 2019, with dropdown menus to select the year and crime type (property crime, burglary, larceny, or motor vehicle theft). The map uses `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries from a TopoJSON file. Crime values are mapped to a red color scale using `d3.scaleThreshold`, with a legend generated via `d3.legendColor`. Hovering over a state reveals a tooltip with details, and the visualization updates dynamically through SVG transitions.

Nnellylopez2022

81% match

Loading thumbnail…

Data Visualization ICE8 - Country Map

This example displays a choropleth-style map of the United States using red-filled states with blue outlines and green hover states. Built with D3 v5 and TopoJSON, it loads US Atlas state boundaries and projects them using `geoAlbersUsa`. The `geoPath` generator renders each state as an SVG `<path>`, with a `<title>` element revealing the state name on hover. The map uses the `geo-albers-usa-territories` library for accurate territory placement.

Ppravalika.thogaru10@gmail.com

81% match

Loading thumbnail…

Geo Map

This map of the United States lets users click a state to zoom in on it and click the background to zoom back out. The visualization uses D3.js v3 with the `d3.geo.albersUsa` projection and `d3.geo.path` to draw state boundaries from TopoJSON data loaded from a GitHub gist. Clicking a state triggers a smooth `g.transition()` that adjusts the scale and translate attributes, while the active state is highlighted in orange via CSS classes.

IIgathi

80% match