🌍 Public
Viewing a saved revision (read-only)
b64f8df634a64413910d8503cd6b7de8
Task Graph With Force Simulation
This example visualizes a task graph as a node-link diagram with a force-directed layout. It shows how parent-child relationships among tasks (such as “albert” and “betty”) are inferred from a data structure that records each node’s parent, then rendered as an SVG with circles and connecting paths. The code uses d3.forceSimulation with forceLink, forceManyBody, forceCenter, and forceCollide to position nodes dynamically, while tick events update the paths and node positions. Drag behavior is enabled via d3.drag, and links are styled with dashed strokes or colors based on link values.
AI-generated descriptionAn example including some commonly used features of SVG.