Skip to main content
๐ŸŒ Public

Share visualization

Send this visualization to others.

Organization Graph Diagram by Draging

Public visualization

Organization Graph Diagram by Draging

0 stars0๐ŸŒ Public
AAmir
Last edited Mar 29, 2021
Created on Mar 28, 2021

This example shows an organization graph as a force-directed network of colored nodes and links, with a few large labeled main nodes connected to smaller child nodes and tiny leaf nodes. Users can drag any node to reposition it, which restarts the simulation and applies forces to the rest of the network. The code uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter`, and renders with SVG circles, lines, and text. Node colors and link distances are defined in a separate data module, while drag behavior is handled via `d3.drag`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed