Force-Directed States of America

100%

Force-Directed States of America

✓ Published0🌍 Public

Last edited Sep 8, 2023

Created on Jul 9, 2011

This interactive visualization displays the lower 48 U.S. states as a force-directed graph. Each state is a filled polygon node, and the links connecting them are derived from the Delaunay triangulation of state centroids. Users can click and drag states to rearrange the map, with the layout physics responding in real time. The code uses D3 v3 with the `d3.layout.force` API for simulation, `d3.geo.path` for rendering state shapes, and `d3.geom.voronoi` to compute the links. The map data comes from a JSON file of U.S. states, with Alaska, Hawaii, and Puerto Rico excluded.

AI-generated description

Click and drag to move states around.

So, what happens when you use the Delaunay triangulation to compute links between the centroids of the lower 48 United States of America? And then you simulate the whole thing as a force-directed graph? This, it turns out! Built with D3.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force-Directed States of America

A force-directed graph rearranges the lower 48 U.S. states using links derived from a Delaunay triangulation of their centroids. Gray state polygons and connecting lines render in SVG, with the layout computed by `d3.layout.force`. The code loads TopoJSON data via `d3.json` and uses `d3.geo.path` to project state shapes. Users can click and drag any state, causing the simulation to re-position the linked nodes dynamically.

FFrissAnalytics

91% match

Loading thumbnail…

d3 force states v4

This example uses D3 v4’s force simulation to create a draggable, distorted map of the lower 48 U.S. states. It first draws the state boundaries as SVG paths using `d3.geoPath` and TopoJSON data from `us-10m.v1.json`, then computes state centroids and connects neighboring states via a Voronoi tessellation (`d3.voronoi`). The simulation applies `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter` to let users pull states apart while maintaining link distances. The view shows the map’s shapes and links shifting dynamically as the simulation runs, with drag interactions handled by `d3.drag`.

FFrissAnalytics

84% match

Loading thumbnail…

Untitled

This example uses D3.js v3 and TopoJSON to render a force-directed layout of U.S. state centroids, with Voronoi links connecting neighboring states. The code loads a U.S. map from a JSON file, filters out non-continental states, and computes centroids via `d3.geo.path().centroid()`. A `d3.layout.force()` simulation positions the nodes while maintaining link distances derived from the Voronoi cells. SVG paths draw each state’s shape, and lines represent the Voronoi links, updating on each tick. The visualization highlights geographic adjacency through network topology rather than choropleth coloring.

Tthanhtrant219

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

State-Adjacency

This force-directed graph maps the adjacency relationships between U.S. states and the District of Columbia, using a node-link layout to reveal geographic connectivity as a graph structure. Each state is represented by a node, and links indicate shared borders. The visualization makes it easy to spot Maine (ME) as the only state with a single connection, while Florida, South Carolina, DC, and Washington each connect to just two others. New York emerges as the critical hub, linking Vermont, Massachusetts, Connecticut, and other New England states, and the layout’s physical simulation pushes boundary states to the edges.

CChristosT

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

78% match

Loading thumbnail…

states.geojson

This example visualizes the boundaries of all U.S. states from a GeoJSON file. The data is rendered as a static map using D3's geographic projections and path generators (e.g., d3.geoPath), with each state's polygon colored distinctly to show its shape and relative location. The visualization relies on the coordinate geometry in states.geojson to draw the contiguous United States, Alaska, and Hawaii, enabling quick comparison of state boundaries and spatial layout.

WWill Carter

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

77% match