Skip to main content
100%

Flipping and Spinning the Unites States

✓ Published0🌍 Public
Aalexmacy
Last edited Sep 12, 2016
Created on Sep 12, 2016

Hover over a US state to flip it horizontally, and press the Reset button to spin all states at once. Built with D3 v4, this SVG animation applies a custom flip effect by mirroring polygon coordinates and animating rotations and scaling transitions, using GeoJSON state data from a gist. Inspired by a Guardian map of swing states.

AI-generated description

Having some fun with the flipping states idea from <a href="https://www.theguardian.com/us-news/2016/aug/28/swing-states-donald-trump-republican-democrat-polarization?CMP=share_btn_tw&utm_content=buffere8872&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer">this map</a> by <a href="https://twitter.com/LaurenLeatherby">@LaurenLeatherby</a> & <a href="https://twitter.com/Rich_Harris">@Rich_Harris</a>.

mit Licensed

Similar vizzes

Loading thumbnail…

Gist ca516940263ea0b1137a

This example shows a zoomable map of U.S. states, where clicking a state animates the viewport to focus on that state’s bounding box, and clicking the background or the active state resets the view. It uses D3 v3 with TopoJSON to load state boundaries, renders them as SVG paths via `d3.geo.path`, and applies `transition` with a computed translate and scale to smoothly change the projection’s viewport. The active state is highlighted in orange, and stroke width adjusts inversely to the zoom scale.

Aac1714
75% match
Loading thumbnail…

Triangulation morphing #2

This animation morphs between U.S. state polygons using triangulation, cycling through all 48 contiguous states in a continuous sequence. It starts by showing a single state, then gradually subdivides it into many smaller polygons before merging them into the next state. The process uses the earcut library to triangulate polygons and TopoJSON for topology operations, while d3’s `transition.attrTween` and `interpolateString` handle the smooth path interpolation. Each state’s fill color shifts through a cool color palette during the transition.

FFrissAnalytics
74% 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
74% match
Loading thumbnail…

click-to-zoom via transform

Clicking a US state smoothly zooms the map to that state, centering it and enlarging it fourfold; clicking again restores the full national view. The example builds an interactive state map with D3, using `d3.geo.albersUsa` for the projection and `topojson` to process geographic data. Zoom animation is driven by D3 transitions, which update an SVG `g` element’s `transform` attribute and adjust the stroke width to maintain visual consistency. State borders and a clickable background rect facilitate the interaction, with active states highlighted in orange.

FFrissAnalytics
73% match
Loading thumbnail…

D3 + Leaflet

This example combines D3.js and Leaflet to create an interactive map of U.S. states with a hover effect. It uses a Leaflet tile layer from OpenStreetMap as the base, with D3 rendering state boundaries as SVG paths overlaid on the map. The code loads GeoJSON data from a gist and projects it using a custom `d3.geo.transform` that converts coordinates to Leaflet’s layer points. The `d3.geo.path` draws the states, and hover fills them brown. The map’s `viewreset` event triggers a reset function to reposition and rescale the SVG overlay.

JJn1532
73% match
Loading thumbnail…

uncurl-state

US states sequentially uncurl into smooth, straight-line paths before re-forming as polygons. An animated SVG path traces each state's boundary, which is computed from TopoJSON data and projected with `d3.geoAlbersUsa`. The animation interpolates the angle changes between line segments toward zero, scaling and re-centering each uncurled outline to fit the viewport before transitioning to the next state.

11wheel
73% 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
72% match
Loading thumbnail…

Fork of State Zoom

This interactive map of the United States allows users to click on individual states to zoom in, using the Albers USA projection via `d3.geo.albersUsa()` and rendering state boundaries as SVG paths from TopoJSON data. Clicking a state triggers an animated transition that scales and translates the view, while toggling an “active” state class; clicking Colorado, identified by its ID, removes the entire SVG as a special case. The map distinguishes certain states with a green color, and uses `d3.json()` to load geographic data.

Ss_cural@coloradocollege.edu
72% match