Force-Directed States of America

100%

Force-Directed States of America

✓ Published0🌍 Public

Last edited Sep 5, 2018

Created on Jan 5, 2017

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.

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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1073373'>Force-Directed States of America</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Force-Directed States of America

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.

Mmbostock

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

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

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

76% match

Loading thumbnail…

Force-Directed Graph

This example shows a force-directed graph of a small network with three nodes representing locations in Missouri and Illinois, connected by undirected links. The visualization uses D3’s `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute a layout, rendering nodes as steelblue circles and links as black lines in SVG. Data comes from a local `data.json` file fetched via `fetch()`, and the simulation updates node and link positions through a `"tick"` event. The page is built as a single HTML document with embedded CSS and JavaScript, run within the React starter environment on VizHub.

Ttkcj0912

76% match

Loading thumbnail…

State Graph

This example displays a choropleth-style map of the United States, with each state rendered as a light gray polygon and white borders separating them. It loads the US TopoJSON data from `us-10m.v1.json` and uses `d3.geoPath` to project the state features. The code applies a scale transform to the SVG to adjust the map’s size and vertical position. The visualization uses D3 v4 and TopoJSON v2, with the map drawn as SVG paths.

SSelena Ding

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

74% match

Loading thumbnail…

Let's make an interactive US Map with D3.js!

An interactive SVG map of the United States renders state boundaries with basic hover styling. Using the D3.js and TopoJSON libraries, it loads a `states-10m.json` TopoJSON file, converts the topology into GeoJSON features, and projects them with an Albers equal-area conic projection via `d3.geoAlbersUsa()`. A zoom interaction updates the map's SVG transform, while each state path gains a tooltip showing its name.

Aacrasto-tibco

74% match