Skip to main content
100%

ICE-8: Social Network

✓ Published1🌍 Public
RRebecca Moore
Last edited Apr 10, 2023
Created on Apr 10, 2023
Forked from ICE-8: Family Tree

This example visualizes a social network as an interactive force-directed graph, showing connections among ten individuals grouped into four clusters. The SVG rendering uses D3 v4’s `d3.layout.force` (a predecessor to `d3.forceSimulation`) to simulate physical forces—gravity, charge, and link distance—that arrange nodes and edges dynamically. Node positions update on each “tick” event, while link stroke widths scale with the `weight` value from the `network.json` data. Users can drag and drop nodes via the force drag handler, with text labels and colored circles distinguishing each person.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes