Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Draft2 Fork of Organization Graph Diagram

Public visualization

Viewing a saved revision (read-only)

9c28c28e27124e06ac59de64632394ae

Draft2 Fork of Organization Graph Diagram

0 stars0🌍 Public
JJediquu
Last edited May 8, 2023
Created on May 8, 2023

This interactive force-directed graph visualizes the network of connections between nodes, with circle size representing node importance and link thickness indicating connection weight. Built with React and D3 v6, the visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes dynamically. The SVG rendering displays node labels and link labels that rotate along the edge angle. Users can drag nodes to reposition them, triggering simulation restarts. The data originates from a CSV file and includes a button to add new main nodes to the diagram.

AI-generated description
<!-- A graph diagram representing the network of connections of the [Kenneth Rainin Foundation](https://krfoundation.org/). --><!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/y7DxbW9nwmo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->