Fork of Organization Graph Diagram

100%

Fork of Organization Graph Diagram

✓ Published0🌍 Public

Last edited Jul 14, 2021

Created on Jul 14, 2021

A fork of the Organization Graph Diagram visualizes the network of connections between the Kenneth Rainin Foundation’s partner organizations, with four main color-coded nodes (like Arts Web and AmbitioUS) linked to child nodes and smaller leaves. Using D3.js v6, it employs `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while SVG circles, lines, and text render the graph. Dragging is enabled via D3’s `drag` interface, and the data is predefined in a JavaScript module with colors generated from Paletton.

AI-generated description

A graph diagram representing the network of connections of the Kenneth Rainin Foundation.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph maps the Kenneth Rainin Foundation's organizational network, with colored main nodes representing key partners like Arts Web, Social Impact Commons, and AmbitioUS, connected by links to smaller child and leaf nodes. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position nodes, while rendering elements as SVG circles, lines, and text labels. Node sizes vary by hierarchy level, and dragging repositions nodes via d3.drag, with data generated programmatically in data.js.

AAlex Stulov

96% match

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph visualizes the network of organizations connected to the Kenneth Rainin Foundation. Color-coded nodes represent the foundation and its partners, with larger main nodes and smaller child and leaf nodes arranged through simulation. The visualization uses D3 v6 with `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position elements, while links and circles are rendered as SVG. Node data and colors are defined in separate JavaScript modules, and the graph supports dragging to reposition nodes interactively.

YYedrup

95% match

Loading thumbnail…

Fork of Organization Graph Diagram

This fork of an organization graph diagram visualizes the network of connections among Kenneth Rainin Foundation grantees, with four main colored nodes (Arts Web, Social Impact Commons, Community Arts Stabilization Trust, and AmbitioUS) linked together and branching into child and leaf nodes. Built with D3 v6, it uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while `drag` enables interactive repositioning. The SVG rendering displays circles sized by node hierarchy and labeled lines colored by parent node, with data defined in a separate module using `export` arrays.

AAxel-Pond

95% match

Loading thumbnail…

Fork of Organization Graph Diagram

This graph diagram visualizes the network of connections within the Kenneth Rainin Foundation, using four colored main nodes with child nodes and leaf nodes to represent organizational relationships. Built with D3.js v6, it employs `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while SVG circles, lines, and text render the structure. The data is generated programmatically in `data.js` from a color palette defined in `colors.js`, with drag interactions enabled via D3's `drag` function.

SSteinarV-design

95% match

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph visualizes the Kenneth Rainin Foundation's organizational network, with colored nodes representing main entities, child organizations, and small leaves. D3's `forceSimulation` with `forceManyBody` and `forceLink` positions nodes by link distance, while SVG circles, lines, and text render the structure. Dragging nodes via `drag` updates their fixed positions and restarts the simulation. Node colors come from a generated palette in `colors.js`, and the data defines hierarchical connections between groups like Arts Web, Social Impact Commons, and AmbitioUS.

JJuanda

95% match

Loading thumbnail…

Fork of Organization Graph Diagram

This visualization uses a force-directed graph to map organizational connections within the Kenneth Rainin Foundation’s network. Nodes represent main entities, child organizations, and leaf nodes, with links showing relationships between them. The code employs `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position elements, while SVG circles, lines, and text render the data. Node colors and sizes are defined in a separate data file, and drag interactions use d3’s `drag` behavior to let users reposition nodes dynamically.

DDarren Kay

95% match

Loading thumbnail…

Fork of Organization Graph Diagram

This fork of an organization graph diagram visualizes the network of connections within the Kenneth Rainin Foundation, using a force-directed layout with colored main nodes, child nodes, and leaf nodes. The visualization employs d3.forceSimulation, forceManyBody, forceLink, and forceCenter to position nodes and links dynamically, with drag interaction enabled. Data is generated programmatically in data.js with custom node sizes and distances, while colors come from a paletton.com-generated palette. The SVG rendering updates positions on each simulation tick, with text labels for main and child nodes.

SSg2041

95% match

Loading thumbnail…

Fork of Organization Graph Diagram

This example shows a network of organizations connected to the Kenneth Rainin Foundation, with main nodes representing partner groups and smaller child nodes for their sub-organizations. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes dynamically, while SVG circles and lines render the graph. Node colors come from a generated palette in `colors.js`, and data is hardcoded in `data.js`. Users can drag nodes to reposition them, triggering simulation restart via D3’s `drag` interaction.

Rrong0102

95% match