Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Force-directed layout

Public visualization

Viewing a saved revision (read-only)

8cb0bdf4d97a41858afb6aeaa4293bb1

Force-directed layout

0 stars0🌍 Public
AAlark Joshi
Last edited Mar 12, 2026
Created on Mar 12, 2026
Forked from React & D3 Starter

This interactive force-directed layout visualizes the network of characters from the novel *Les Misérables*, loaded as JSON data. Using D3.js v4's `d3.forceSimulation` API, it renders nodes as SVG circles and edges as lines, with forces for charge (repulsion/attraction), collision, centering, and links. A control panel exposes sliders and checkboxes to adjust simulation parameters like alpha, charge strength, and link distance in real time, allowing users to explore how these forces shape the graph’s arrangement.

AI-generated description

Steve Haroz's force directed layout example from https://gist.github.com/steveharoz/8c3e2524079a8c440df60c1ab72b5d03