Graph

100%

✓ Published0🌍 Public

Last edited Feb 17, 2023

Created on Feb 17, 2023

A network graph displays an organizational chart for the Kenneth Rainin Foundation, with colored circular nodes representing departments like Coordinacion, Comercial, and IT, connected by colored links. Node size indicates hierarchy, from large main nodes to small leaf nodes. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position elements. Users can drag nodes via d3.drag, which updates their fixed positions and restarts the simulation. Data is defined in external JavaScript modules, with colors sourced from Paletton.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Graph network reference

A force-directed graph shows the network of organizations connected to the Kenneth Rainin Foundation, with four main nodes branching into smaller child nodes and leaf nodes. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position elements, rendered as SVG circles and lines with labels. Dragging nodes via the `drag` interaction updates their fixed positions. Node colors are sourced from a palette in `colors.js`, and link distances vary by hierarchy level.

MMax Davydenko

91% match

Loading thumbnail…

Organization Graph Diagram

This interactive network diagram visualizes the organizational connections within the Kenneth Rainin Foundation, using a force-directed layout to show relationships between four main entities and their associated sub-organizations. The SVG renders nodes as colored circles sized by hierarchy level—large main nodes, medium children, and small leaves—with connecting lines colored to match their parent node. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute the physics-based layout, while a custom drag interaction allows users to reposition nodes with the simulation restarting automatically. Data comes from a hardcoded JavaScript file defining the node hierarchy and link distances.

CCurran Kelleher

90% 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

89% match

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph shows the organizational network of the Kenneth Rainin Foundation, with four main color-coded nodes representing major programs and smaller linked nodes for partner organizations. Each main node connects to child nodes with attached leaf nodes, and the main nodes interconnect through additional links. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position elements, rendered as SVG circles and lines in a 960x960 viewport. Node and link colors come from a palette defined in colors.js, and the data structure is assembled programmatically in data.js with configurable node sizes and link distances.

SSudheesh-dev

89% match

Loading thumbnail…

Fork of Organization Graph Diagram

This visualization shows the organizational network of the Kenneth Rainin Foundation, using a force-directed graph with four main nodes connected to child nodes and leaf nodes. The d3.forceSimulation API positions the nodes, while d3.forceLink handles the connections, and the drag interaction allows users to reposition elements. Data generates from a hardcoded structure in data.js, with node colors and sizes defined programmatically. The SVG rendering displays circles for nodes, lines for links, and text labels for entity names.

Eevers-codeshop-ai

89% match

Loading thumbnail…

Fork of Organization Graph Diagram

This network diagram visualizes the organizational structure of the Kenneth Rainin Foundation, depicting nodes as academic departments, research centers, and administrative offices, with links indicating interconnections. The visualization uses a force-directed layout implemented with d3.forceSimulation, d3.forceManyBody, d3.forceLink, and d3.forceCenter, rendered as an SVG with draggable circles. Node colors are defined via a Paletton-generated palette, and the graph is built from hardcoded JavaScript data representing Columbia University entities. The layout separates research and home nodes into two coordinated simulations, with labels truncated to eight characters.

Ttracy3057

89% match

Loading thumbnail…

Fork of Organization Graph Diagram

This interactive visualization depicts the organizational structure of the Kenneth Rainin Foundation, showing main nodes like 'Arts web' connected to subsidiary nodes and numerous leaf nodes. The network is rendered as an SVG using d3.forceSimulation, with forceManyBody, forceLink, and forceCenter forces controlling the physics-based layout. Nodes are colored using a palette from colors.js, with node sizes varying by hierarchy level. Links display connecting lines, and users can drag nodes to manipulate the simulation in real time.

Ssandeep303

89% 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

89% match