Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Forces - ZOOM

Public visualization

Viewing a saved revision (read-only)

4723379b654441cbbc555d8ca663dab4

D3 Forces - ZOOM

1 star4🌍 Public
WWRCIECH
Last edited May 23, 2023
Created on Jan 9, 2023

This example shows an interactive node-link diagram of personal goals, where each node is a symbol and each link represents a connection between topics like health, programming, and Netflix. The graph uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the nodes, while `d3.drag` allows users to move nodes and `d3.zoom` enables panning and scaling with a scale extent from 0.1 to 16. Nodes are rendered as SVG paths using `d3.symbol`, with text labels displayed alongside.

AI-generated description

D3 Forces.

TODO

  • Working Zoom
  • Rectangles as nodes
  • Define transitions
  • Setup of link/node forces
  • Tooltips