Social Network Diagram

100%

Social Network Diagram

✓ Published0🌍 Public

Last edited Aug 12, 2023

Created on Aug 12, 2023

Forked from Fork of Fork of Organization Graph 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.

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

90% match

Loading thumbnail…

Network Diagram

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.

ZZeynep AKI

89% match

Loading thumbnail…

Fork of Organization Graph Diagram

This interactive network diagram visualizes the connections among the Kenneth Rainin Foundation’s partner organizations, showing four main nodes linked by a force-directed layout with smaller child and leaf nodes. Built using D3 v6, it leverages `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position elements. Nodes are rendered as colored circles sized by hierarchy level, with links colored by their source node. Dragging is enabled via D3’s `drag` interaction, and the color palette comes from generated data in `colors.js`.

Yyisha huang

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

87% match

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed network diagram maps connections among Kenneth Rainin Foundation partners, with colored nodes and links grouping related organizations. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, and renders SVG circles and lines with drag interaction enabled. Data is generated procedurally in `data.js`, with node sizes and link distances varying by hierarchy level, and colors defined in a separate `colors.js` module from paletton.com. The network highlights clusters like Arts Web, Social Impact Commons, and other foundation grantee communities.

Ttkcj0912

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

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

86% match

Loading thumbnail…

Fork of Organization Graph Diagram

This example visualizes the connection network of the Kenneth Rainin Foundation as an interactive force-directed graph. Node positions result from a physical simulation combining repulsive forces between all nodes, attractive forces along links, and gravity toward the center; users can drag any node to pin it and restart the simulation. The SVG rendering uses the D3 version 6 API, including `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, `d3.forceCenter`, and `d3.drag`. Node colors, link colors, and node sizes are predefined in JavaScript, with a static color palette generated by Paletton applied in the visualization.

TTaro

86% match