Contigious States of US

100%

Contigious States of US

✓ Published0🌍 Public

Last edited Mar 16, 2016

Created on Mar 13, 2016

This visualization uses an adjacency matrix to display the contiguity of the 48 contiguous US states (plus Washington, D.C.). Each cell in the matrix is colored to indicate whether two states share a border (dark) or are connected via a path of length two (lighter), with state ordering toggleable alphabetically or by neighbor count using D3's ordinal scale. Built with D3 v3, it renders as an SVG with mouseover highlighting of rows and columns, and includes interactive controls to reorder rows and columns and to toggle display of two-hop connections.

AI-generated description

Built with blockbuilder.org

Live at http://bl.ocks.org/ChristosT/raw/31f947147d5191a179fb/

Similar vizzes

Loading thumbnail…

Matrix View

This matrix view shows the adjacency relationships among U.S. states, with rows and columns representing individual states and colored cells indicating shared borders. The visualization supports reordering the matrix by state name, by connection count, or by geographic region, with animated transitions between these orderings. Hovering over a cell highlights the corresponding row and column labels. The code uses D3.js v2 with an ordinal scale for positioning, a linear scale for opacity, and SVG transitions to animate the reordering.

MMrajyalakshmi

83% match

Loading thumbnail…

John Berlin CS725 Information Visualization

This visualization compares two views of the adjacency graph of the contiguous United States. An animated matrix view reorders states alphabetically and then by the number of neighboring states, highlighting how interior states like Tennessee have more connections than coastal ones. A node-link diagram shows the same graph, with hover tooltips revealing state names. Both views are rendered as SVG using D3 version 3, with data generated by the Python NetworkX library.

NN0taN3rd

80% match

Loading thumbnail…

Untitled

This example shows an interactive adjacency matrix of U.S. state connections, where cell opacity encodes link strength and color indicates whether states share a region. Users can reorder the matrix by name, link count, or region using a dropdown, with smooth animated transitions via `d3.transition`. The visualization uses `d3.scale.ordinal` and `d3.scale.linear`, and renders SVG rectangles. A custom legend built with `d3.svg.legend` maps regional colors. The data comes from a local `miserables.json` file containing states and their links.

TTimStapert

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

79% match

Loading thumbnail…

James Eanes - VI7 - Matrix View

This interactive adjacency matrix visualizes network connections between U.S. states, with each cell colored by the connected state's degree count. The SVG rendering uses D3 scales and ordinal bands to position rows and columns, while an animation transitions between sort orders (name, count, group) over 2.5 seconds. Hovering highlights the corresponding row and column labels. The data comes from the contiguous-usa.json file, containing 49 nodes and links defining state boundaries.

JJamestiberiuseanes

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

Untitled

This example presents two linked views of the same network of U.S. states: a node-link force-directed diagram and an adjacency matrix. The matrix cells are colored by the states’ regional group, and the visualization animates reordering between sorted and categorical arrangements. Built with D3 v3, it uses `d3.layout.force` for the node layout, while the matrix uses `d3.scale.ordinal` for axes and `transition.attr` for smooth reordering.

Pprateekvasi

76% match

Loading thumbnail…

VI 7 Node Link

A force-directed node-link diagram displays the 48 contiguous U.S. states and the District of Columbia, with nodes colored by census region and links connecting states within the same region. Hovering over a node reveals its full name, while highlight interactions emphasize regional groupings. The visualization uses d3.layout.force, d3.scale.category10 for color encoding, and SVG rendering, with node and link elements positioned via tick event updates.

MMrajyalakshmi

75% match