Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of arrow

Public visualization

Viewing a saved revision (read-only)

03997b9f8f8246fcb1f35f874062a94d

Fork of arrow

2 stars0🌍 Public
Xxie ming better
Last edited Aug 3, 2023
Created on Sep 22, 2022
Forked from arrow

This interactive network graph visualizes trade relationships between countries, showing nodes sized by country group and colored by category. The visualization uses d3.forceSimulation with link, charge, collision, and center forces to position connected nodes dynamically. Links are displayed with arrowheads and stroke widths proportional to trade weight, while node labels show country names. Users can drag nodes to rearrange the layout, triggering the simulation to recalculate positions. The example loads JSON data containing node attributes and weighted links rendered as SVG lines and circles via D3 v6.

AI-generated description

Force Network chart using D3 v6

Still to be done -

  link text
  node text
  link arrow heads (currently appear behind node)