Skip to main content
SimilarExport ZIP
100%

US Map With State Borders, Pop Up, and Red Fill on Hover

✓ Published1🌍 Public
Rrpkupfer@wpi.edu
Last edited Oct 9, 2025
Created on Oct 9, 2025

This interactive US map displays state boundaries, hovering states highlight in red with a tooltip revealing the state name. The visualization loads geographic data as TopoJSON from the us-atlas and visionscarto-world-atlas packages, projecting it with d3.geoAlbersUsa and d3.geoPath. The tooltip is implemented as an HTML div, and mouseenter/mouseleave events trigger the red fill and tooltip visibility.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

US States with Hover

This example displays a map of US states with hover interactions. When hovering over a state, it highlights in blue, displays the state name, and outlines the border. The visualization uses a Voronoi diagram to detect hover events across small or irregular state boundaries, ensuring accurate interaction. Built with D3 v7 and d3-rosetta utilities, it projects geographic data using geoAlbersUsa and geoPath, with state and county boundaries sourced from the us-atlas TopoJSON dataset.

CCurran Kelleher
83% match
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
83% match
Loading thumbnail…

US Map

This example displays a map of the 50 US states, with each state filled in red and white borders separating them. The visualization uses the `geoAlbersUsaTerritories` projection and the `d3.geoPath` API to render geographic shapes as SVG paths. The map is generated from TopoJSON data loaded from a remote US atlas source, and it enhances interactivity by changing each state’s color to green when the pointer hovers over it.

Fferneyhoughedward@gmail.com
83% 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
82% match
Loading thumbnail…

Country Map

This interactive map visualizes the fifty United States using a pink fill for each state and black borders, with a hover effect that changes the fill color to purple. Built with React and D3 v5, it renders geographic data as SVG paths using `d3.geoPath()` with the `geoAlbersUsaTerritories` projection. The code loads US state boundaries from a TopoJSON file via `us-atlas@3.0.0`, applying `feature()` and `mesh()` from TopoJSON to extract land polygons and interior borders.

TTejucmandava
81% match
Loading thumbnail…

US Map With State Borders

This visualization displays a map of the United States with state borders and an outline of the country. It uses the `d3.geoPath` projection and renders geographic features as SVG paths, with a graticule outline drawn around the map. The map data is loaded from the `us-atlas` package as TopoJSON and converted using the `topojson-client` library. The states are filled in white with black borders, while the outer outline uses a thicker stroke to differentiate it from the internal boundaries.

Rrpkupfer@wpi.edu
81% match
Loading thumbnail…

US State Map

This interactive map of the United States uses D3 v3 to render state boundaries as SVG paths from the included `uStates.js` data file. Each state is colored according to randomly generated sample statistics—low, average, and high values—using an interpolated color scale from light yellow to dark red. Hovering over a state triggers a CSS-based tooltip that displays the state's name and its low, average, and high values in a styled HTML table. The map animates state fills on hover with a subtle opacity change, while the tooltip follows the cursor, providing a clean and informative way to explore the data.

CCoola85
81% match
Loading thumbnail…

US States

This visualization displays a map of the contiguous United States, with each state rendered as a blue SVG path. Hovering over a state turns it red and updates a text overlay near the cursor, showing the state’s name and population from the GeoJSON data. The map uses `d3.geoAlbersUsa()` for projection and `d3.geoPath()` to draw shapes, while mouseover events trigger the text and resize a separate red circle in a second SVG, scaled by population. The data comes from the contiguous-usa.geojson source, and the interaction is built with React and D3 v6.

Ookahne@gmail.com
81% match