Skip to main content
100%

node_link_diagrams_and_adjacency_matrix

✓ Published0🌍 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.

MIT Licensed

Similar vizzes