Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Force-Directed Graph

Public visualization

D3 Force-Directed Graph

0 stars0🌍 Public
KKhanin Sisaengsuwanchai
Last edited Jul 28, 2023
Created on Jul 27, 2023

This example demonstrates a force-directed network layout, visualizing a small set of nodes and their connections with interactive dragging. The graph dynamically arranges connected circles using a physics simulation, cleanly separating linked nodes while repelling them from one another. The visualization is built with D3 v7, using `d3.forceSimulation` together with its `forceLink`, `forceManyBody`, and `forceCenter` components. The SVG output renders nodes as circles with labels and edges as straight lines, with positions updated on each simulation tick. The code also includes a guard that filters out any edges referencing non-existent nodes, ensuring the structure remains valid.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed