cHz

@oidin5464·2 public vizzes

Fork of Organization Graph Diagram

This network diagram visualizes the connections between organizations in the Kenneth Rainin Foundation's grantee ecosystem, with four primary color-coded clusters representing Arts Web, Social Impact Commons, Community Arts Stabilization Trust, and AmbitioUS. The SVG rendering uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position nodes, while drag interaction allows manual repositioning. Each main node connects to child organizations with leaf nodes, and link colors inherit from source nodes. The data structure in data.js defines node sizes and distances, with colors generated via Paletton.

Aug 5, 2023

Loading thumbnail…

Fork of Organization Graph Diagram

This fork of an organization graph diagram uses D3 v6 to render three labeled nodes—Alice, Bob, and Carol—as gray circles with a text label at each center, connected by two black lines. The layout emerges from a `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` forces, which updates circle and line positions on each tick. Users can drag any node via D3’s `drag` interaction, which restarts the simulation with higher alpha to reposition the graph interactively. The SVG output displays static node sizes defined in the data file, while labels have pointer events disabled to keep dragging smooth.

Aug 5, 2023