Hierarchical Circles

100%

Hierarchical Circles

✓ Published0🌍 Public

Last edited Nov 23, 2022

Created on Nov 23, 2022

This example shows a hierarchical circle packing layout for a small dataset with two leaf nodes, "a" and "b", rendered as nested circles. The visualization colors leaf circles using a categorical color scale and provides customizable legends for both color and size. The code uses the D3 `hierarchy` and `pack` layout functions to compute circle positions, while custom legend components (colorLegend and sizeLegend) display the ordinal color mapping and a square-root size scale. The rendering is an SVG generated by D3 v5.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Circle-Packing

This example visualizes a hierarchical dataset as a circle-packing layout, where each leaf node is a circle sized by its value and nested groups are represented by larger containing circles. It shows the structure of a module tree from a CSV file, with color indicating depth and text labels clipped to leaf circles. The code uses `d3.stratify` to build the hierarchy from flat data, `d3.pack` for layout, and `d3.scaleSequential` with the `interpolateMagma` color scheme. Hovering highlights a node and all its ancestors via `d3.selectAll` with the `node--hover` class, rendered as SVG elements in a `<g>` container.

HHugoberry

84% match

Loading thumbnail…

D3 Pack Layouts

This example demonstrates a D3 pack layout, which visualizes hierarchical data as nested circles. The dataset defines a tree with a root node, two levels of children, and leaf nodes that carry numeric values. Using `d3.hierarchy` and `d3.pack`, the code computes circle positions and radii so that parent circles encompass their children proportionally to summed values. The visualization renders each node as a semi-transparent circle with a white stroke, and labels only the leaf nodes. The SVG is dynamically sized to fit the container, and nodes are positioned via CSS transform translations.

SSubhendu Karmakar

84% match

Loading thumbnail…

Pack Layout

This example demonstrates a circular pack layout for hierarchical data using d3.pack, showing nested circles that represent parent and child nodes with sizes proportional to their values. A small dataset with three levels of hierarchy is rendered as SVG circles with semi-transparent indianred fills, white strokes, and text labels only on leaf nodes. The code uses d3.hierarchy and the pack layout to compute positions and radii, then appends transformed groups for each descendant.

Ffloresh

84% match

Loading thumbnail…

Circle Packing

This visualization displays a hierarchical dataset as nested circles, using area to represent the number of descendants in each node. Color distinguishes between constrained and unconstrained nodes, with constrained items shown in gray and unconstrained ones in blue. The layout is computed using D3’s `pack` algorithm, which positions circles within a viewport sized to the browser window. Data is loaded from `data.json` via D3’s `json` function, then processed with `hierarchy` and rendered as SVG `<circle>` elements, with white strokes providing visual separation between adjacent circles.

CCalvin Gomez

83% match

Loading thumbnail…

Circle Packing

This example visualizes hierarchical data as nested circles using a circle packing layout. The circles, sized by each node’s `value` and sorted by descending value, are filled with colors from the magma sequential scale. The chart uses the `d3.pack` and `d3.hierarchy` APIs to compute the layout, while `d3.scaleSequential` and `d3.interpolateMagma` handle color mapping. Rendered as SVG in a full-screen viewport, the code imports all required functions from the d3 library and applies a fixed 3-pixel padding between circles.

CCalvin Gomez

83% match

Loading thumbnail…

Hierarchical Circles 2

This visualization shows a hierarchical circle packing layout of software source code components, with nested circles representing the directory and file structure of the flare.csv dataset. The implementation uses D3 v5’s `d3.stratify` to build a hierarchy from the CSV’s dot-separated IDs, then `d3.pack` to compute the circle positions and sizes. Circles are filled with a `d3.scaleSequential` color scale based on depth. Hovering over any circle highlights all its ancestors via the `hovered` function, and leaf nodes display their names using `tspan` elements clipped to their circles.

Aantoniojl-kemaro

83% match

Loading thumbnail…

Basic Circle Pack 2 - working

This example shows an interactive circle packing visualization of hierarchical data. Circles represent nodes in a tree, with nested circles indicating parent-child relationships, and clicking a circle zooms to expand that branch. The visualization uses d3.pack for layout and d3.hierarchy with sum and sort for data preparation. Add and remove buttons trigger rendering, each creating a new group of circles with different data. The code uses d3.scaleLinear with interpolateHcl for color encoding, d3.interpolateZoom for animated transitions, and SVG for rendering with click, mouseover, and mouseout event handlers.

BBrett Cunningham

82% match

Loading thumbnail…

Exercise 4(c)

This example shows a circle-packing visualization of a hierarchical dataset, where the size of each circle represents the summed value of its leaf nodes. The code uses `d3.pack()` with a padding of 20 to create non-overlapping circles within a 300x300 area, rendering them as red, semi-transparent SVG circles with white strokes. Leaf nodes display their names as centered white text, while parent nodes remain unlabeled. The data is a hardcoded JSON object with nested children, and the layout is computed by calling `rootNode.sum()` and `packLayout(rootNode)`.

Yyuva24

82% match