Org Bubbles

100%

✓ Published0🌍 Public

Last edited Oct 6, 2017

Created on Oct 6, 2017

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.

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>

mit Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Org Bubbles

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.

TTa-Moon-A

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

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

78% match

Loading thumbnail…

Bubble Chart

A bubble chart encodes hierarchical data as a packed circle layout, with each circle’s area proportional to a numeric value and color representing its top-level package. The visualization uses D3 v4’s `d3.pack` and `d3.hierarchy` to compute the layout, then renders SVG circles and clipped text labels. Data comes from the Flare class hierarchy stored in a CSV file. Hovering reveals the full class name and formatted value via SVG `<title>` elements.

Mmbostock

76% match

Loading thumbnail…

Bubbles - Force bounding

This example demonstrates a force-directed bubble chart that packs 21 data values into a square boundary. Fixed "boundary" nodes, positioned along the top and left edges, constrain the visible data circles within the 500x500 pixel area. The visualization uses D3 v5’s `d3.forceSimulation`, combining `forceX`, `forceY`, `forceManyBody`, and `forceCollide` to repel and pack circles without overlap, while radii are scaled with `scaleSqrt`. Each bubble is rendered as an SVG circle with a white label. The simulation runs 120 ticks before rendering, and the final layout is drawn in a single frame.

RRenan Barbosa

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

74% match

Loading thumbnail…

Fork of Bubble tree test

This visualization displays a hierarchical bubble tree of microbiology terms, using nested circles to represent taxonomic and structural relationships within the domain. The tool enables interactive zooming through circle clicks, with smooth animated transitions between hierarchy levels. Built with D3 v4's `d3.pack` layout, the code fetches JSON data from a GitHub repository, then applies `d3.interpolateZoom` and `transition.tween` for the zoom effect. Circles are colored by depth using an HSL color scale, and labels fade in and out based on the current focus node.

QQuinn Sebso

74% match