Ta-Moon-A

@Ta-Moon-A·2 public vizzes

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.

Oct 6, 2017

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.

Oct 6, 2017