Matrix View

100%

✓ Published0🌍 Public

Last edited Mar 16, 2016

Created on Mar 16, 2016

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.

AI-generated description

Rajyalakshmi Mukkamala

Matrix View

Insight

When ordered by region, states which are in the same region, the cells are colored closely.For example, New York ,New Jersey and Pennsylvania are in same region and colored with orange closely.
When ordered by connections, states are displayedfrom maximum to minimum number of adjacent states to a respective state are displayed
When ordered by name,we can find out the states which are adjacent to each other

Similar vizzes

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

83% match

Loading thumbnail…

Contigious States of US

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.

CChristosT

83% match

Loading thumbnail…

Assignment 7 -- Adjacency Matrix

This example pairs a force-directed node-link diagram with an adjacency matrix to explore connections between U.S. states. The matrix encodes link strength with color opacity and groups states by region, with cells colored by group membership. Users can reorder matrix rows and columns by link count or name via a dropdown, triggering animated transitions. The visualization uses d3.v3 with `d3.layout.force` for the node-link view and ordinal/linear scales for the matrix, rendering in SVG. Data comes from a custom `miserables.json` file.

Vvishusikka

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

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

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

77% match

Loading thumbnail…

Adjacency Matrix

This example visualizes the adjacency relationships in a network as a matrix, where rows and columns correspond to nodes and colored cells indicate the presence of a link. The code uses D3.js v6 to load CSV data from a GitHub gist, constructs a square grid of rectangles sized 17x17 pixels, and encodes edge weights via fill opacity. Interactive mouseover events highlight the entire row and column of a hovered cell and display a tooltip with the link ID. Node labels are rendered as text along both axes.

PPranay Matalia

74% match

Loading thumbnail…

Matrix

This example presents two coordinated views of the same graph data: a force-directed node-link diagram rendered with d3.forceSimulation, and an adjacency matrix using reorder.js for layout. Clicking a node in the network highlights the corresponding row and column in the matrix, while clicking a matrix cell highlights its associated link. The matrix uses SVG rectangles with fill-opacity representing connection strength, and both views support zooming and dragging. The code imports d3 v6, d3-force, and reorder.js libraries.

Aannie520143

73% match