Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

node_link_diagrams_and_adjacency_matrix

Public visualization

Viewing a saved revision (read-only)

c7f6c4e155ad4c7caa25d953d08e8d6a

node_link_diagrams_and_adjacency_matrix

0 stars0🌍 Public
Yyixinxu2020
Last edited Nov 9, 2020
Created on Nov 9, 2020

This example combines a node-link force-directed graph with an adjacency matrix to explore network relationships. The left SVG renders a force-directed layout using `d3.forceSimulation` and `forceLink`, with nodes colored by group and sized by degree, supporting drag and zoom interactions. The right SVG displays the adjacency matrix as a grid of cells, where each cell’s fill encodes connection strength. Clicking a node in the graph or a matrix cell highlights the corresponding row and column in red, while also emphasizing linked edges, allowing users to correlate structural positions across both representations. The code uses D3 v6 with SVG rendering.

AI-generated description

React Starter code.