Diagram of Stuff

100%

Diagram of Stuff

✓ Published0🌍 Public

Last edited Aug 2, 2021

Created on Aug 2, 2021

This diagram maps relationships between arts organizations and their affiliated projects as an interactive force-directed network. Four color-coded main nodes represent umbrella organizations, with smaller linked circles for child initiatives and leaf nodes. Using D3.js v7, the visualization employs d3.forceSimulation with forceLink and forceManyBody to position elements, while dragInteraction enables users to move nodes. SVG circles, lines, and text labels render the interconnected structure derived from the custom data.js assembly logic.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Organization Graph Diagram

This example visualizes the relationships between arts organizations and their affiliated projects using a force-directed graph. It shows four main parent nodes connected by links, each with child nodes and leaf nodes that represent smaller entities. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute layout positions, and renders circles and lines as SVG elements. Node colors and sizes are defined in a separate data module, and nodes can be dragged interactively using d3.drag.

BBen Brophy

89% match

Loading thumbnail…

Organization Graph Diagram

This organization graph diagram visualizes relationships between arts and community organizations using a force-directed layout. Nodes are sized by hierarchy level—main organizations appear largest, followed by child nodes and small leaf nodes—with color groups distinguishing distinct clusters. The network interconnects four primary organizations through links while each main node branches to its affiliated sub-organizations and leaves. Implemented with d3-force simulation including forceSimulation, forceManyBody, forceLink, and forceCenter, the SVG rendering updates positions each tick while supporting drag interactions. Data originates from a hardcoded JavaScript structure defining nodes, links, distances, and color palettes from a separate color module.

TThomas Cormican

88% match

Loading thumbnail…

organizational graph

This example visualizes an organizational network of arts and social impact organizations, with main nodes (large colored circles) representing umbrella groups and child nodes representing affiliated projects. Force-directed layout in d3.v7, using `forceSimulation`, `forceManyBody`, and `forceLink`, positions nodes based on link distances, while `forceCenter` pulls them toward the canvas center. The SVG rendering shows colored links and node labels. Users can drag nodes via the `drag` interaction, which restarts the simulation. Data is defined procedurally in `data.js` with a palette from `colors.js`.

Ccynichole

86% match

Loading thumbnail…

Organisation Graph Diagram

This interactive force-directed graph visualizes the connections between organizations in an arts network, with four major nodes branching into child nodes and leaves. The SVG rendering uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position circles and links, while dragInteraction lets users reposition nodes with fixed coordinates. Node sizes and colors are defined in a data module using palleton.com palettes.

CChris Briggs

86% match

Loading thumbnail…

Trying

A force-directed network diagram shows four main nodes—Arts Web, Social Impact Commons, Community Arts Stabilization Trust, and AmbitioUS—connected by links, with child nodes and smaller leaf nodes radiating from each. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter, rendering circles, lines, and text labels in SVG. Nodes are draggable, and colors come from a generated palette in colors.js. Data represents organizational connections from the Kenneth Rainin Foundation.

Mmalipieroproject

86% match

Loading thumbnail…

Organization Graph Diagram

A network graph shows the relationships between arts organizations and their affiliated programs. Four main nodes, each with a distinct color, connect to smaller child nodes representing partner groups, with leaf nodes indicating sub-projects. Three.js renders the SVG visualization, while D3's `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` compute the layout. Links are drawn as lines with colors matching their source, and nodes are draggable through D3's `drag` behavior. The data, including node sizes, colors, and link distances, is predefined in external JavaScript modules.

AAndre J Denais

86% match

Loading thumbnail…

Network Graph Diagram with Data

A network graph diagram with data maps interconnected organizations across an arts and community landscape. The visualization shows a hierarchical structure of main nodes, child nodes, and leaf nodes, with larger central hubs like 'Arts Web' and 'Social Impact Commons' branching to smaller affiliated groups. Using d3.forceSimulation with forceManyBody for charge and forceLink for link constraints, the graph dynamically positions nodes in SVG, with circles and text representing each entity. Data comes from a static dataset defining nodes, links, and size distances, rendered in a 960×960 viewport.

Wweisbroda@rfa.org

85% match

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed network diagram displays four main organizations (Arts Web, Social Impact Commons, Community Arts Stabilization Trust, AmbitioUS) connected by colored links, each surrounded by child nodes and leaf nodes representing associated entities. Built with d3.forceSimulation, d3.forceManyBody, d3.forceLink, and d3.forceCenter, the SVG visualization uses data generated from colors.js and data.js, with node sizes and distances varying by hierarchy level. Users can drag circles to reposition nodes, triggering simulation restarts, while text labels and link colors reflect parent organization associations.

AArshiya Banaee

85% match