Skip to main content
SimilarExport ZIP
100%

Network Diagram

✓ Published1🌍 Public
ZZeynep AKI
Last edited Mar 16, 2022
Created on Mar 16, 2022

This network diagram visualizes the connections within the Kenneth Rainin Foundation's arts program, showing main nodes, child nodes, and leaf nodes with varying sizes and colors. Built with D3 v6, it uses `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to compute a physics-based layout. The SVG rendering updates node positions and link lines on each simulation tick. Colors come from a generated palette in `colors.js`, and the interactive drag interaction allows repositioning nodes, which restarts the simulation.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Network Graph Diagram

This example uses a network graph diagram to visualize connections within the Kenneth Rainin Foundation, displaying both main nodes and child nodes. Built with D3.js v6, it uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes that are rendered as SVG circles, with text labels for names. Links are drawn as lines, and the graph is interactive, supporting drag-and-drop via the `drag()` behavior and zooming through the `zoom()` handler. The data is defined in JavaScript, with node colors indicating checked status.

Ssrivalliwuyyuru
91% match
Loading thumbnail…

Fork of Organization Graph Diagram

This graph diagram visualizes the network of connections among the Kenneth Rainin Foundation's programs and partner organizations, such as Arts Web and Social Impact Commons. Built with D3 v6's `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter`, the SVG shows nodes sized by hierarchy level, with colored links indicating relationships. Data is defined in `data.js` with nodes and links, while `colors.js` provides the palette. The simulation runs dynamically, updating circle and line positions on each tick, and supports dragging nodes via the `drag` interaction.

LLTine8
90% match
Loading thumbnail…

Social Network Diagram

A social network diagram visualizes connections among Kenneth Rainin Foundation affiliates, with node size and color distinguishing center, home, and DSI nodes. Built with D3 v6, it uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while `drag` enables interactive repositioning. Links and circles render as SVG elements, with colors from a generated palette in `colors.js`. Node positions update per simulation tick, and drag interactions restart the simulation for continuous layout adjustment.

PPekingWaldo
89% 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
89% match
Loading thumbnail…

Fork of Organization Graph Diagram

This network graph diagrams the connections among four main organizations in the Kenneth Rainin Foundation’s arts ecosystem, with colored child nodes and leaf nodes representing partner groups. Using d3.forceSimulation with forceManyBody, forceLink, and forceCenter, the layout positions nodes dynamically, while drag interaction lets users manually reposition them. Node size encodes hierarchy—main nodes are largest, leaves smallest—and link distances vary by relationship type. The visualization renders as an SVG with circles for nodes, lines for links, and text labels, with colors defined in a separate palette module.

Zzyniax
88% 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
88% 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
88% match
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
88% match