Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of SVG Fundamentals

Public visualization

Viewing a saved revision (read-only)

bdc7fb6e5304436eb0803e808ee9773a

Fork of SVG Fundamentals

0 stars0🌍 Public
AAbdul Majeed
Last edited Jan 9, 2024
Created on Jan 9, 2024
Forked from SVG Fundamentals

This example shows a simple organization graph diagram with three nodes (Alice, Bob, Carol) connected by two links, rendered as circles in an SVG container. The visualization uses d3.forceSimulation to apply force-directed layout, combining forceManyBody for repulsion, forceLink for attraction along edges, and forceCenter to keep the graph centered. The simulation updates circle positions on each tick via callbacks. The code uses d3.select to target the SVG element and appends circle elements with a radius of 30, with the force simulation driving their cx and cy attributes.

AI-generated description

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

See also React Starter.