Org Bubbles

100%

✓ Published0🌍 Public

Last edited Apr 20, 2017

Created on Mar 26, 2017

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.

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>

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

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

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

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

This visualization shows a force-directed bubble chart where each circle represents a country, with its size corresponding to GDP data loaded from a CSV file. The bubbles are color-coded by team and cluster toward the center of the screen. The code uses d3.forceSimulation with forceX, forceY, forceCenter, forceManyBody, and forceCollide to position the nodes, while d3.drag enables interactive dragging of individual circles. The SVG rendering fills each node with a color from a d3.scaleOrdinal palette, and the simulation updates circle positions on each tick.

SSitanshu Rupani

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

73% match