Ring Cutting

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Sep 2, 2013

Clicking the play button hides the control and animates the cutting of every US state polygon into its constituent rings. The animation shows red boundary segments being separated from the remaining blue paths, with cuts processed one by one and fading out over time. The visualization uses TopoJSON state data, D3’s geo path for rendering, and SVG transitions to animate the cuts.

AI-generated description

Step 3 of 4 of topology construction. From How To Infer Topology.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Ring Extraction

This example animates the extraction of individual polygon rings from the U.S. states topology. It begins with a play button that, when clicked, hides the control and sequentially extracts each ring, drawing it in red and fading it out. The animation uses D3’s `transition`, `duration`, and `remove` methods alongside TopoJSON’s `topology` and `feature` APIs. The base map is rendered as a static SVG mesh via `d3.geo.path`, while the extracted rings are appended as separate SVG paths. The underlying data is a simplified `us.json` TopoJSON file of U.S. states.

Mmbostock

89% match

Loading thumbnail…

Arc Deduplication

The animation demonstrates arc deduplication during TopoJSON topology construction, replaying each arc of U.S. state boundaries as a stroked line. Red arcs appear first, then blue arcs highlight duplicate paths shared between states. Using d3.json, d3.geo.path, and topojson.mesh, the visualization reconstructs coordinates from quantized delta-encoded arcs and animates SVG path transitions with setInterval. A play button triggers the sequence, which runs until all arcs are traced and faded.

Mmbostock

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

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

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

71% match

Loading thumbnail…

Untitled

This example presents an interactive map of the United States using d3.geo.path with an Albers USA projection, rendering state boundaries as SVG paths. Clicking a state triggers a smooth zoom animation that scales and translates the map to center on the selected region, highlighting it in orange. The map is constructed from topojson.feature and include a mesh overlay for state borders. The zoom effect is achieved by transitioning the group element's transform attribute using d3.transition over 750 milliseconds.

Ppcsong33

71% match

Loading thumbnail…

Smoother polygon transitions

A state morphs into the next in an animated sequence, with the polygon smoothly transitioning between shapes while yellow and magenta dots mark corresponding vertices. The code uses D3.js and TopoJSON to load U.S. state boundaries, then adds evenly spaced points to equalize vertex counts and finds the optimal winding by minimizing squared distances between point pairs. SVG and D3 transitions animate both the path and circles as states cycle through a shuffled order.

FFrissAnalytics

70% match

Loading thumbnail…

Untitled

This example displays a choropleth-style map of the United States using SVG paths. It renders state boundaries and fills each state as a separate path, with a hover effect that turns states red via CSS. The visualization loads TopoJSON data from a remote URL and converts it to GeoJSON using the `topojson.feature` and `topojson.mesh` APIs. It relies on `d3.geoPath` to project and draw the geographic shapes, while `d3.json` fetches the data asynchronously. State borders are drawn as a white stroke overlay for visual separation.

MMina Rezaei

70% match