Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
BBhasuri
Last edited May 26, 2024
Created on May 26, 2024
Forked from HTML Starter

This interactive network diagram visualizes the connections among organizations linked to the Kenneth Rainin Foundation, using a force-directed layout with node sizes distinguishing main, child, and leaf entities. The D3.js implementation employs `d3.forceSimulation`, `forceManyBody`, `forceLink`, `forceCenter`, and `forceCollide` to position nodes, while dragging is enabled via d3’s `drag` behavior. Data is loaded from a JSON file, and the SVG rendering includes labeled circles and links, with colors sourced from a generated palette.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter

A force-directed network diagram visualizes relationships between arts and community organizations. Nodes are color-coded by parent category and sized by hierarchy level. The D3 v7 simulation applies many-body forces, distance-based link springs, and a centering force. The code uses `forceSimulation`, `forceManyBody`, `forceLink`, `forceCenter`, and `drag` APIs to create an interactive, draggable SVG graph.

Ddragan.gorgiev@gmail.com
91% match
Loading thumbnail…

Fork of Organization Graph Diagram

This fork of an organization graph diagram displays the network of connections between Kenneth Rainin Foundation programs and their associated organizations. It uses a force-directed layout with `d3.forceSimulation`, `forceManyBody`, `forceLink`, `forceCenter`, and `forceCollide` to position nodes and links. The SVG rendering shows four color-coded main nodes, child nodes with labels, and small unlabeled leaf nodes, while drag interactions let users reposition nodes and restart the simulation.

Aaajajayjoshua@gmail.com
90% 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
89% match
Loading thumbnail…

Fork of Organization Graph Diagram

This fork of an organization graph diagram visualizes the network of connections between the Kenneth Rainin Foundation and its partner organizations, such as the Arts Web and Community Arts Stabilization Trust. It uses d3.forceSimulation with forceManyBody and forceLink to position nodes and links, with node sizes indicating hierarchy level. The SVG rendering includes circles, text labels, and colored links, with drag interaction via d3.drag. Data is defined programmatically in data.js, with colors generated via Paletton.

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

Fork of Organization Graph Diagram

This fork of an organization graph diagram visualizes the network of connections within the Kenneth Rainin Foundation, using a force-directed layout with colored main nodes, child nodes, and leaf nodes. The visualization employs d3.forceSimulation, forceManyBody, forceLink, and forceCenter to position nodes and links dynamically, with drag interaction enabled. Data is generated programmatically in data.js with custom node sizes and distances, while colors come from a paletton.com-generated palette. The SVG rendering updates positions on each simulation tick, with text labels for main and child nodes.

SSg2041
89% match
Loading thumbnail…

Fork of Organization Graph Diagram

This fork of an organization graph diagram visualizes the network of connections for the Kenneth Rainin Foundation, showing how main entities like Arts Web and AmbitioUS link to child nodes and leaves. Using D3 v6, the SVG rendering relies on `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position elements, while `d3.drag` enables interactive manipulation. Node colors are defined in a separate module, and the data structure is built programmatically with predefined sizes and distances.

Iitsmajidnaeem@gmail.com
89% match