Skip to main content
100%

United States of Voronoi Area Ranking

✓ Published0🌍 Public
Aalexmacy
Last edited May 10, 2018
Created on Mar 28, 2018

This example animates a transition between U.S. state shapes and a Voronoi diagram generated from state capitals, while ranking states by area. A hidden SVG renders state polygons, which are then captured via html2canvas and analyzed with Canvas `getImageData` to compute each state’s pixel area before and after the transition. The visible map uses d3.voronoi and d3.geoAlbersUsa, with d3 transitions morphing polygon points and updating a sorted list of area differences. Color scale reflects proportional area changes.

AI-generated description

An update to this block that calculates the area of each state before and after transitioning to the voronoi diagram. This is done by rendering a hidden svg element, creating a canvas snapshot of it, and then getting the image data from the canvas context.

mit Licensed

Similar vizzes

Loading thumbnail…

United States of Voronoi Tweening

This visualization animates a tween between the geographic outlines of US states and their Voronoi cell boundaries, generated from state capitals via d3.voronoi. The map uses a Mercator projection and toggles between each state's projected border and its Voronoi polygon every two seconds, with a custom shape interpolation function that redistributes points equally along each side of the destination shape to avoid rounded or skipped corners. A clip path confines the animation to the state boundaries, and capital cities are marked with small circles. The transition is built with d3.v4 SVG elements and includes a reusable shapeTween.js module with two tweening approaches, one based on side-length distribution and another on proportional path length.

Aalexmacy
85% match
Loading thumbnail…

United States of Voronoi Tweening w/ borders

This animated visualization transitions U.S. state boundaries between their geographic shapes and Voronoi cells computed from state capitals. Using d3.v4 and SVG, each state polygon tweens between its projected geographic outline and its Voronoi cell, with a second border layer appearing in red during transitions to highlight the differences. Colors, strokes, and capital points shift as the shapes morph, with a custom shape-tweening function that distributes points along each side of the destination shape to avoid rounded or skipped corners. A known rendering-order bug causes some borders, like where "New Wyoming" overlaps old Nebraska, to be hidden during the transition.

Aalexmacy
84% 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
76% match
Loading thumbnail…

Country map + voronoi.find

This visualization uses a Voronoi diagram to divide a world map into regions, each centered on a country's centroid, with the polygons dynamically re-calculated to highlight the spatial relationships between countries. The map is rendered as an SVG using D3 v4, and the Voronoi overlay is generated from the centroids of the countries. The original country shapes are filled in white with black strokes, while the Voronoi cells are drawn as semi-transparent overlays, and the graticule adds a subtle geographic grid. The animation likely involves transitioning between the original country boundaries and the Voronoi cells, or animating the centroids themselves.

PPhilippe Rivière
75% match
Loading thumbnail…

US State Map

This interactive choropleth of the United States displays synthetic data for three metrics—low, average, and high—for each state, drawn as SVG paths with hover tooltips. Clicking or hovering over a state reveals a tooltip with the three values. The map is rendered using D3 v3, with states colored via a yellow-to-red interpolated scale based on randomly generated sample values. The visualization also includes animation and is built from West Nile virus surveillance data, with tooltips showing per-state totals.

Aannalabrozzi
74% match
Loading thumbnail…

US State Map

This interactive US state map visualizes sample data for each state using an SVG-based choropleth. States are colored according to randomly generated low, average, and high values per state, using a yellow-to-dark-red interpolated color scale. Hovering over a state triggers a tooltip displaying its name and the low, average, and high values. The map is rendered with D3 v3 and includes simple hover animations that adjust fill opacity. Data is randomly generated for each state on load, with tooltips providing detailed numeric information.

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

usa map

The map displays all U.S. states as colored SVG paths, with each state assigned a distinct color from a categorical scale and a hover effect that turns it black. It uses d3.geoPath with the geoAlbersUsa projection to render state boundaries from TopoJSON data loaded via the us-atlas and geo-albers-usa-territories libraries. State names appear as tooltips through appended title elements, and the color scale is d3.scaleOrdinal with schemeCategory10.

Ssatishnarne99@gmail.com
73% match