Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Node-Link Diagram

Public visualization

D3 Node-Link Diagram

0 stars2🌍 Public
Pplai1
Last edited Oct 27, 2022
Created on Oct 27, 2022
Forked from HTML Starter

This example demonstrates a node-link diagram representing social connections among 16 tribal groups, with 58 edges showing positive or negative relationships. A D3 force-directed layout positions the nodes using `d3.forceSimulation` with link, charge, and centering forces. Circles are rendered as SVG elements with dark blue fill and partial opacity, while lines represent connections. The data is loaded from a CSV file, and hover interactions trigger tooltip visibility. The code uses D3 v7 and includes the d3-legend and d3-scale-chromatic libraries, with the simulation updating node and link positions on each tick.

AI-generated description

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

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed