Skip to main content
100%

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 description

Boilerplate 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
  • useData hook to fetch a CSV URL.
  • VizContainer component that:
    • Abstracts SVG/group container elements
    • Follows the margin convention
MIT Licensed

Similar vizzes