Olympics performance graph

100%

Olympics performance graph

✓ Published0🌍 Public

Last edited Aug 17, 2024

Created on Aug 17, 2024

This interactive map of the United States lets users zoom and pan across states, with hover highlighting and click-to-zoom on individual regions. Built with D3.js and TopoJSON, it loads US state boundaries from the d3js.org us-10m.v1.json dataset. The visualization uses d3.zoom for scaling between 1x and 8x, d3.geoPath for rendering the shapes, and transitions to smoothly animate color changes and zoom operations. A tooltip displays state names on hover, while clicking a state zooms in and colors it red, with a background click resetting the view.

AI-generated description

Zoomable US Map from D3 examples

MIT Licensed

Similar vizzes

Loading thumbnail…

Zoomable US Map

This interactive map of the United States allows users to zoom into individual states by clicking, with smooth animated transitions and hover highlighting. Built with D3.js v6 and TopoJSON, it loads US state boundaries from the `us-10m.v1.json` dataset and renders them using `d3.geoPath` within an SVG. The `d3.zoom` API handles pan and zoom gestures, while `transition` calls animate the viewport and state fill colors between default, hover, and clicked states. A tooltip displays each state’s name on mouseover.

LLuca Liverani

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

79% 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

78% 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

78% 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

77% 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

77% match

Loading thumbnail…

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

CChase Hall

77% match

Loading thumbnail…

us test

This interactive map of the United States displays the 10-meter resolution state boundaries from the us-atlas package, with states shown in blue and territories outlined in gray. The visualization supports panning and zooming through d3.zoom, which applies affine transforms to the SVG group containing the map. The code builds the geographic paths using d3.geoPath with a null projection, and includes a graticule generated by d3.geoGraticule for reference. State boundaries are processed from the TopoJSON data using the topojson library's feature function.

AAndre J Denais

77% match