Fork of Organization Graph Diagram

100%

Fork of Organization Graph Diagram

✓ Published0🌍 Public

Last edited May 22, 2023

Created on May 22, 2023

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.

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

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

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

96% match

Loading thumbnail…

Fork of Fork of Organization Graph Diagram

A force-directed graph shows the network of connections among four main organizations supported by the Kenneth Rainin Foundation, with linked child nodes and leaf nodes representing smaller partners. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while SVG circles, lines, and text labels are rendered and updated on each tick. Colors are assigned per organization from a generated palette, and nodes are draggable via `d3.drag`, which fixes their position and restarts the simulation. Data is defined programmatically in `data.js`, and the graph is rendered entirely with SVG elements.

AAxel-Pond

95% match

Loading thumbnail…

Fork of Fork of Organization Graph Diagram

This example shows a network of organizations connected by the Kenneth Rainin Foundation, with larger color-coded main nodes linked to smaller child nodes and leaf circles. The data is assembled in a JavaScript module that defines node sizes, colors, and link distances. The visualization uses d3.forceSimulation with forceManyBody and forceLink to position elements, rendering as SVG circles, lines, and text labels in an HTML page. Nodes can be dragged, which sets fixed positions and restarts the simulation.

SSg2041

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

95% match

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph shows the network of organizations connected to the Kenneth Rainin Foundation, with nodes sized by hierarchy level and colored by their parent organization. D3’s `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` arrange the nodes and links, while drag interaction lets users reposition them. Data is defined in `data.js` using the supplied `colors` palette, and the SVG rendering updates on each tick to reposition circles, lines, and labels.

Aape-ape-ape

95% match

Loading thumbnail…

Fork of Organization Graph Diagram

This visualization displays a network of connections between organizations funded by the Kenneth Rainin Foundation, with nodes representing main entities, child nodes, and unlabeled leaf nodes. The graph uses d3.forceSimulation with forceManyBody and forceLink to position nodes dynamically, while links are colored to match their source nodes. Node colors are generated from a palette in colors.js, and the SVG rendering updates positions on each simulation tick. Users can drag circles to interact with the graph, and clicking a node triggers the addition of a new main node.

Ccaitlin-woods

95% match