Fork of Organization Graph Diagram

100%

Fork of Organization Graph Diagram

✓ Published0🌍 Public

Last edited Jun 15, 2021

Created on Jun 14, 2021

This visualization shows the organizational network of Columbia University’s DSI Department, with a central node connected to dozens of labeled department clusters, each surrounded by small leaf nodes. It uses D3’s force simulation (`d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, `d3.forceCenter`) to layout the graph, with drag interaction enabled. Nodes are rendered as SVG circles and links as lines, with data defined in separate modules for node/link generation and a color palette. The example adapts a pre-existing graph structure to display academic department connections.

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 fork of an organization graph diagram maps institutional relationships from a dataset of Columbia University departments, centers, and labs. The visualization uses a force-directed layout, grouping entities by their administrative affinity while displaying each unit's name as a label. Built with the D3 v6 API, it calls `forceSimulation` alongside `forceManyBody`, `forceLink`, and `forceCenter` to compute node positions, with `drag` enabling interactive repositioning. SVG circles and lines render the network, pulling data from the `nodes` and `links` arrays, and the color palette comes from the Paletton-generated `colors.js` module.

Ttracy3057

93% match

Loading thumbnail…

Fork of Organization Graph Diagram

This network diagram visualizes the organizational structure of the Kenneth Rainin Foundation, depicting nodes as academic departments, research centers, and administrative offices, with links indicating interconnections. The visualization uses a force-directed layout implemented with d3.forceSimulation, d3.forceManyBody, d3.forceLink, and d3.forceCenter, rendered as an SVG with draggable circles. Node colors are defined via a Paletton-generated palette, and the graph is built from hardcoded JavaScript data representing Columbia University entities. The layout separates research and home nodes into two coordinated simulations, with labels truncated to eight characters.

Ttracy3057

86% match

Loading thumbnail…

Fork of Fork of Organization Graph Diagram

This network graph maps organizational connections from the Kenneth Rainin Foundation, with nodes representing departments and programs such as “ENG Computer Science” and “A&S Chemistry.” The visualization uses d3.forceSimulation with forceManyBody and forceLink to position nodes, while SVG circles and lines render the structure. Node sizes distinguish categories—large red centers, medium blue DSI nodes, and small gray home nodes—and links inherit source colors. Data is defined in separate data.js and colors.js modules, with drag interaction allowing manual node repositioning.

Ttracy3057

85% match

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph shows the network of connections between a central organization and its associated categories, such as Development, Policy, Media, and Politics. Each main node branches into child nodes with labeled leaf nodes. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position nodes and links, rendered as SVG circles and lines. Data is defined in a separate data.js file, with node sizes and colors assigned based on hierarchy level.

Mmattthescientist

84% match

Loading thumbnail…

Fork of Organization Graph Diagram

This example visualizes a branching network of organization connections using a force-directed graph. Green and red circles represent main nodes, each connected to smaller leaf nodes and linked by grey lines, with node sizes and distances varying to suggest hierarchy. The visualization uses d3.forceSimulation, d3.forceManyBody, d3.forceLink, and d3.forceCenter to compute the layout, rendering nodes and links as SVG circles, lines, and labels. Data is generated from a nested JavaScript object describing connected rooms, which is recursively parsed into node and link arrays. The graph supports drag interactions via d3.drag, zooming via d3.zoom, and click events that alert a VK profile URL.

KKirill

84% match

Loading thumbnail…

Organization Graph Diagram

An interactive organization graph rendered in SVG with D3's force-directed layout. The visualization shows four main nodes connected by links, with child nodes and small leaf nodes branching from each main node, all colored using a palette from a generated colors module. The code uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, with node sizes and link distances defined in the data. As the simulation ticks, circles, lines, and text labels update their positions dynamically.

CCurran Kelleher

84% match

Loading thumbnail…

Fork of Organization Graph Diagram

This visualization shows a force-directed organization graph of arts and social impact organizations, with four colored main nodes connected by links and surrounded by smaller child and leaf nodes. The code uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute the layout, and renders the result as SVG circles and lines. Each main node and its children share a color from a generated palette, and users can drag nodes to reposition them, triggering the simulation to restart.

WWilson Wang

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

83% match