Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Relation Graph with d3-force

Public visualization

Relation Graph with d3-force

0 stars0🌍 Public
Ttoeric
Last edited Nov 22, 2020
Created on Nov 4, 2020
Forked from Hello VizHub

A relation graph of 410 nodes and their pairwise connections, rendered as an interactive SVG force-directed diagram. The code uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position the nodes, with each node colored by its group via `schemeCategory10`. Clicking a node highlights all its connected links in red and marks the corresponding cells in an adjacent adjacency matrix, which is rendered as a grid of SVG rectangles. Users can drag nodes to reposition them and zoom into the graph.

AI-generated description

React Starter code.

Comments

Sign in to join the discussion.

MIT Licensed