Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Task Graph With Force Simulation

Public visualization

Task Graph With Force Simulation

0 stars0🌍 Public
Aantoniojl@gmail.com
Last edited May 31, 2022
Created on May 28, 2022

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 description

An example including some commonly used features of SVG.

Comments

Sign in to join the discussion.

MIT Licensed