Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Organization Graph Diagram by Draging

Public visualization

Viewing a saved revision (read-only)

f2d2138714fa4b2cb3290cf6dbb4b867

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.