Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Organization Graph Diagram

✓ Published0🌍 Public
DDarren Kay
Last edited Aug 14, 2023
Created on Aug 14, 2023

This interactive graph illustrates the network of connections between the Kenneth Rainin Foundation and its related organizations. Using D3.js v6, it constructs a force-directed layout with `d3.forceSimulation` and applies `forceLink` and `forceManyBody` physics to position nodes. Nodes are sized by hierarchy level (main, child, leaf) and colored by sector from a predefined palette. The data comes from a local `companies.json` file, which is loaded via `d3.json`, and includes company names, sectors, and optional icon URLs. The visualization renders as SVG, with lines representing links and circles for nodes.

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

This visualization shows the network of organizations connected to the Kenneth Rainin Foundation, using a force-directed graph with colored nodes and links. D3’s `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` arrange the nodes, while a drag interaction lets users reposition them. The SVG rendering uses circles for nodes, lines for links, and text labels, with node size distinguishing main organizations, child nodes, and leaves. The data is defined in a separate `data.js` file, and colors are generated from Palette.

YYing-Liu21
94% 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
93% match
Loading thumbnail…

Fork of Organization Graph Diagram

This graph diagram visualizes the network of connections for the Kenneth Rainin Foundation, with nodes representing individuals and links showing their relationships. The visualization uses D3.js version 6.2.0, specifically leveraging the `d3.forceSimulation` API to drive a physics-based layout with force-directed algorithms including `forceManyBody`, `forceLink`, and `forceCenter`. The SVG rendering displays the graph on a 960x960 canvas. Color schemes are defined in a separate module generated with Paletton, providing distinct palettes for different categories.

DDaniel Tkach
93% match
Loading thumbnail…

Fork of Fork of Organization Graph Diagram

A network graph maps the organizational connections of the Kenneth Rainin Foundation, with large main nodes linked to smaller child nodes and leaf nodes. The visualization uses a force-directed simulation via `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while SVG circles, lines, and text render the structure. Node colors come from a generated palette, and drag interactions are enabled with D3's `drag` behavior. Data is defined programmatically in `data.js` with links styled by source node color.

SSudheesh-dev
93% match
Loading thumbnail…

Fork of Organization Graph Diagram

This graph diagram visualizes the interconnected organizations within the Kenneth Rainin Foundation, using colored nodes and links to distinguish four main groups and their sub-entities. It employs D3's force-directed layout, combining `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes dynamically. Links are drawn as SVG lines, while nodes are circles with labels, all rendered in an SVG container. The network is built from a custom dataset, with node sizes varying by hierarchy, and users can drag nodes to interact with the simulation.

GGeolffrey S Mena
93% match
Loading thumbnail…

Fork of Fork of Organization Graph Diagram

This D3.js force-directed graph visualizes the network of connections among organizations linked to the Kenneth Rainin Foundation, with a central cluster of main nodes (Arts Web, Social Impact Commons, Community Arts Stabilization Trust, AmbitioUS) connected by colored links and surrounded by smaller child nodes and leaf nodes. It demonstrates the `d3.forceSimulation` API with `forceManyBody`, `forceLink`, and `forceCenter` forces, rendering nodes as SVG circles with varying sizes and labels. Interactive dragging via `d3.drag` lets viewers reposition nodes, while link distances and node colors are preconfigured in a data file. The example uses data from the foundation’s network and generates a structured hierarchy through explicit parent-child relationships.

MMariusPaulRichter
93% match
Loading thumbnail…

Fork of Fork of Organization Graph Diagram

This D3.js force-directed graph visualizes the network of connections among organizations linked to the Kenneth Rainin Foundation, with a central cluster of main nodes (Arts Web, Social Impact Commons, Community Arts Stabilization Trust, AmbitioUS) connected by colored links and surrounded by smaller child nodes and leaf nodes. It demonstrates the `d3.forceSimulation` API with `forceManyBody`, `forceLink`, and `forceCenter` forces, rendering nodes as SVG circles with varying sizes and labels. Interactive dragging via `d3.drag` lets viewers reposition nodes, while link distances and node colors are preconfigured in a data file. The example uses data from the foundation’s network and generates a structured hierarchy through explicit parent-child relationships.

MMariusPaulRichter
93% 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
93% match