Force Layout
✓ Published0🌍 Public
MMinwoo Pak
Last edited Aug 10, 2021
Created on Aug 8, 2021
This example demonstrates an interactive force-directed graph built with React and D3 v6. A hierarchical dataset is flattened into nodes and links, then rendered as circles and lines using SVG. The simulation uses `d3.forceSimulation` with center, charge, collide, and link forces. Moving the mouse dynamically adds `forceX` and `forceY` forces that pull nodes toward the pointer, with strength varying by node depth. Clicking applies a `forceRadial` orbit force around the clicked point and draws a green circle to indicate the orbit radius.
AI-generated descriptionBoilerplate code for a React + D3 visualization with:
- Example of D3 as React Component
- CDN links for React, ReactDOM, and D3
- Basic React boilerplate
- Variables for width, height and margins
useDatahook to fetch a CSV URL.VizContainercomponent that:- Abstracts SVG/group container elements
- Follows the margin convention
MIT Licensed