Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Social Network Graph in d3.js

Public visualization

Viewing a saved revision (read-only)

34a51017d53943b2be62a54bb65d1fdf

Social Network Graph in d3.js

0 stars0🌍 Public
Bbugfree55
Last edited Jul 10, 2022
Created on Jul 10, 2022
Forked from HTML Starter

This example visualizes a small social network with five people and their connections as a force-directed graph rendered in SVG. It loads node and link data from a JSON file, drawing each person as a green circle and each relationship as a gray line. The layout is computed dynamically using d3.forceSimulation, which applies forces for pairwise repulsion (d3.forceManyBody), edge-based attraction (d3.forceLink), and centering (d3.forceCenter). As the simulation runs, a ticked callback updates the positions of the circles and lines, letting the network settle into a readable arrangement.

AI-generated description

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

See also React Starter.