Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Network tree

Public visualization

Viewing a saved revision (read-only)

c744ccb0596244e29e72c83cbc24914d

Network tree

0 stars3🌍 Public
Uubl2
Last edited Mar 31, 2022
Created on Mar 31, 2022

This example shows a force-directed network tree with six nodes and five weighted links, rendered as draggable orange circles with text labels. The code uses d3.layout.force (v4) to simulate gravity, charge, and link distance, while rendering SVG lines and groups. Node weights set stroke-width via Math.sqrt(d.weight), and data loads from an external graphFile.json containing name, group, and link target/source arrays. The visualization updates node positions on each tick using the force layout’s tick event.

AI-generated description

See also React Starter.