Skip to main content
SimilarExport ZIP
100%

Fork of Fork of SiteBulb Graph

✓ Published0🌍 Public
DDonald Bagwell
Last edited Jan 17, 2024
Created on Jan 17, 2024

A force-directed graph maps the network of connections from the Kenneth Rainin Foundation's website, using node size to distinguish main hub nodes from child and leaf nodes. Built with D3 v6, the visualization uses `d3.forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position elements, while `d3.drag` and `d3.zoom` enable interaction. Node colors are defined in an exported palette from `colors.js`, and all SVG elements render in an HTML page.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SiteBulb Graph

This force-directed graph visualizes the network of connections from the Kenneth Rainin Foundation, with main nodes, child nodes, and leaf nodes sized and colored by hierarchy. Using D3.js v6, it employs `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while SVG `circle` and `line` elements render the structure. The graph supports dragging, zooming, and hover tooltips, with data generated from a `colors.js` palette and explicit node/link definitions.

AAbdul Majeed
95% match
Loading thumbnail…

Fork of SiteBulb Graph

This example visualizes a site graph for ScreenBinge, showing a main hub node connected to multiple child nodes, each with a cluster of small leaf nodes. The data structure is programmatically built in the `data.js` file, assigning sizes and colors to nodes from a palette, with links defined between connected nodes. It uses D3 v6’s `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to run a physics-based layout, while the `drag` and `zoom` interactions let users reposition nodes and pan the SVG view.

KKamran Nawaz
89% match
Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph maps the Kenneth Rainin Foundation's organizational network, with colored main nodes representing key partners like Arts Web, Social Impact Commons, and AmbitioUS, connected by links to smaller child and leaf nodes. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position nodes, while rendering elements as SVG circles, lines, and text labels. Node sizes vary by hierarchy level, and dragging repositions nodes via d3.drag, with data generated programmatically in data.js.

AAlex Stulov
85% 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
85% 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
85% match
Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph diagram maps connections within the Kenneth Rainin Foundation network, using colored nodes and links to show relationships between a central hub and numerous child nodes representing Hulu-related URLs. Built with D3 v6's `forceSimulation`, the visualization applies `forceManyBody` charge, `forceLink` distance constraints, and `forceCenter` attraction to position elements, while supporting drag interactions. Nodes are rendered as SVG circles with distinct sizes and colors defined in a separate palette, with the data structured through helper functions that assemble parent-child leaf clusters.

AAbdul Majeed
85% 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
85% 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
85% match