Skip to main content
SimilarExport ZIP
100%

Assignment 7 -- Adjacency Matrix

✓ Published0🌍 Public
Vvishusikka
Last edited Mar 29, 2022
Created on Mar 29, 2022
Forked from Hello VizHub

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.

AI-generated description
MIT Licensed

Similar vizzes

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
84% 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
83% match
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
82% match
Loading thumbnail…

Assignment 7 -- Force-Directed Graph & Adjacency Matrix

This example presents a food-related dataset as both an interactive force-directed graph and an adjacency matrix. The force-directed layout uses `d3.forceSimulation` to position nodes and links, with drag behavior and animated tick updates. The adjacency matrix encodes edge weights through square opacity levels, rendered as SVG rectangles, with tooltips showing source and target IDs. Both visualizations are built with D3 v6, using SVG and animation, drawing from a CSV file.

Vvishusikka
80% 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
79% match
Loading thumbnail…

Matrix

This example combines a force-directed node-link diagram with an adjacency matrix visualization of the same dataset. Clicking a node in the force diagram highlights its corresponding row and column in the matrix, while clicking a matrix cell identifies a specific connection. The code uses `d3.forceSimulation`, `forceLink`, and `forceManyBody` for the graph layout, and renders both views as SVG with `d3.drag` for interaction and `d3.zoom` for panning and scaling.

Aannie520143
78% match
Loading thumbnail…

111

This example pairs a force-directed graph with an adjacency matrix to visualize network relationships. Clicking a node in the graph highlights its corresponding row and column in the matrix, while clicking a matrix cell identifies the linked nodes or notes the absence of a link. The graph uses d3.forceSimulation with forceLink and forceManyBody for layout, and the matrix applies fill opacity based on edge weight. Both views support zooming via d3.zoom and dragging via d3.drag, with data rendered as SVG elements.

Aannie520143
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
76% match