Org Bubbles

100%

✓ Published0🌍 Public

Last edited Oct 6, 2017

Created on Oct 6, 2017

Org Bubbles shows an animated force-directed graph of an organizational hierarchy, with each node drawn as a circle and parent-child relationships as lines. A toolbar toggles between grouping modes such as "By Org," "By Location," and "By Type." The visualization uses d3.v4 and the d3.forceSimulation API for physics-based layout, with nodes subject to link, collision, many-body, and position forces. Circles are colored using d3.scaleOrdinal and d3.schemeCategory20, while the drag-and-drop interactions, implemented with custom drag handlers, allow users to reposition nodes and select them, turning their fill to none. The data is loaded from a CSV using d3.csv.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/d6b5ca8e5fb17842d652d0de21e88a05'>Group Clustering</a>

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/5252383292ed0331def34c9d2066a56f'>Org Bubbles</a>

forked from <a href='http://bl.ocks.org/Thanaporn-sk/'>Thanaporn-sk</a>'s block: <a href='http://bl.ocks.org/Thanaporn-sk/0e6295be03d45cd254fdbb904f2053b1'>Org Bubbles</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/88452c0c9aa80c17bf7e862fe18d02e4'>Org Bubbles</a>

forked from <a href='http://bl.ocks.org/Ta-Moon-A/'>Ta-Moon-A</a>'s block: <a href='http://bl.ocks.org/Ta-Moon-A/524372dbcb080db717536163ee6c5e30'>Org Bubbles</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Org Bubbles

Org Bubbles visualizes a 13-node organizational hierarchy as a force-directed bubble chart, using data from a CSV with ID, PID, level, and type fields. The D3 v4 code builds an SVG with circles and connecting lines, using `d3.forceSimulation` with forces for links, collision, many-body charge, and center attraction to create a dynamic, draggable layout. Interactive buttons group all bubbles together or split them by location, type, or organization, while the simulation animates the repositioning and fades link strokes.

TTa-Moon-A

94% match

Loading thumbnail…

Org Bubbles

Org Bubbles visualizes an organizational hierarchy as a force-directed bubble chart. It shows 13 employee nodes connected by parent-child links, with buttons to group or split the bubbles by organizational unit, location, or employee type. The visualization uses d3.forceSimulation with forces for collision, charge, and positioning, while drag events let users select individual nodes. Node colors come from a categorical color scale, and the code loads data from a CSV file and relies on SVG rendering and transitions for animations.

SSpaceActuary

94% match

Loading thumbnail…

Org Bubbles

Org Bubbles visualizes an organizational hierarchy as a force-directed bubble chart, with circles representing employees connected by lines to their managers. Users can group all bubbles together or split them by location, organizational unit, or employee type via toolbar buttons. The code uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceCollide`, and `d3.forceX`/`forceY` to position nodes, while drag events and a “selected” class toggle circle fill styles. Data comes from a CSV file containing ID, parent ID, level, position, and type fields.

TThanaporn-sk

93% match

Loading thumbnail…

Untitled

A force-directed bubble chart visualizes a small dataset of 12 items, each with categorical attributes. The visualization initially displays all nodes as colored circles that can be dragged and selected. Buttons allow users to split the bubbles into separate clusters by Location, Group, Class, or Type, with titles indicating the active categories. Using D3 v4, the chart employs `d3.forceSimulation` with `d3.forceCollide`, `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the nodes. The SVG circles and text labels are rendered from a CSV file. Users can interactively drag and select individual bubbles to highlight them.

JJoker-tr

79% match

Loading thumbnail…

Organization Network Graph

This example displays a force-directed network graph of an organization centered on a main node, with three primary categories branching into numerous unnamed leaf nodes. The visualization uses D3.js v7 with the `forceSimulation` API, applying `forceManyBody`, `forceLink`, and `forceCenter` to position nodes based on simulated physics. The SVG rendered output draws colored circles, connecting lines, and text labels, with drag interaction allowing users to manually reposition nodes. The data is generated programmatically with distinct color palettes for each hierarchy level, and the final layout emerges organically from the balance of attractive and repulsive forces.

Mmalipieroproject

79% match

Loading thumbnail…

Organization Force Chart

An interactive force-directed network represents an organizational structure, grouping member organizations under four main entities. The visualization uses color-coded clusters to distinguish each parent group and its children, with small blank nodes creating visual spacing. Nodes and links are rendered as SVG circles and lines, positioned by a d3.forceSimulation with forceManyBody, forceLink, and forceCenter. The code uses d3.drag to let users move nodes, and the simulation updates positions on each tick. The data is defined in a JavaScript module with the organization hierarchy.

KKai Stewart

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

78% match

Loading thumbnail…

Untitled

Interactive bubble charts use force simulation to show relative values across categories. Circles sized by a linear scale and colored by an ordinal scale are initially centered, then repel and collide until settling into a packed layout. Dragging nodes repositions them with the simulation restarting, while hovering reveals a tooltip with the exact value. The visualization loads CSV data from a GitHub gist, renders with SVG in React, and relies on d3.forceSimulation, forceCenter, forceManyBody, and forceCollide to animate the layout.

SSitanshu Rupani

78% match