Circle Pack

100%

✓ Published0🌍 Public

Last edited Nov 7, 2015

Created on Nov 7, 2015

A circle packing diagram visualizes the distribution of student attributes, with each circle representing a student and nested circles grouping them by grade, ethnicity, and gender. The color of each circle reflects its deepest categorical level: grade, ethnicity, or gender. The visualization uses `d3.layout.pack` for the circle layout and `d3.layout.partition` to generate legend bars for the ethnicity and gender categories. It animates transitions with `transition().duration(1000)` and supports zooming on double-click, pulling data from a `students.json` file.

AI-generated description

A circle pack with a variety of styles based on depth.

forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/05f44e46124cefa0070c'>Circle Pack</a>

Similar vizzes

Loading thumbnail…

Basic Circle Pack

A hierarchical circle-packing visualization displays nested data as clustered bubbles, with zooming and panning via mouse clicks. The demo uses D3.js v5 to construct the SVG layout, apply an HSL color scale by depth, and animate transitions between hierarchy levels using `transition` and `interpolateZoom`. Buttons add or remove data nodes, while the pack layout is generated with `d3.pack` and `d3.hierarchy`. The dataset is hardcoded from a “flare” file structure.

BBrett Cunningham

78% match

Loading thumbnail…

Circles pack

A circle packing diagram displays a hierarchical dataset of celebrities, grouped first by category (Bollywood or TV) and then by gender, with each celebrity represented as a circle sized by their sample value. The visualization uses a `d3.pack` layout on a React component, computing a hierarchy via `d3.hierarchy` and `d3.nest` from a CSV file. Leaf nodes render celebrity photos clipped by their circle boundaries, while branch circles scale with the aggregate values and respond to mouseover events with a stroke highlight. The color scale uses `d3.scaleSequential` with the `interpolateMagma` scheme.

0007ebey

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

77% match

Loading thumbnail…

Simple Circle Pack (d3 v4; CSV; 50 Lines)

This example demonstrates a circle packing visualization that encodes hierarchical data as nested circles, where the area of each circle represents a numeric size value. The visualization shows a dataset of car acquisition and trading history, with parent-child relationships defined by the CSV structure. The implementation uses d3.v4's `d3.stratify` to process the tabular data, `d3.hierarchy` with a size summation function to compute the tree structure, and `d3.pack` to generate the circle layout. Circles are rendered as SVG elements with white strokes and semi-transparent blue fills.

Oocean1225

77% match

Loading thumbnail…

Circle Packing

A circle packing visualization displays a hierarchy of data points as nested circles, using the D3 `d3.layout.pack` layout. The code masks a background image with the circular layout, while leaf nodes are rendered as circular-clipped silhouette images using SVG `clipPath` and `mask` elements. The visualization uses D3 v2 and reads hierarchical JSON data from a `flare.json` file. It renders as SVG, with circles styled by depth and each leaf node containing an image clipped to its circular boundary.

GGerHobbelt

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

76% match

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

76% match

Loading thumbnail…

Circle-Packing II

This example visualizes a flat dataset of names and values using a circle-packing layout, where each person’s name appears as a separate circle. The visualization shows the hierarchical structure of the data through nested circles, with each circle’s size proportional to its value, though all values are equal here. The code uses the d3.pack layout to compute circle positions and radii, then appends SVG circles and text labels with clip paths to keep text within the circles. Data is loaded from a CSV file via d3.csv, and the hierarchy is built with d3.hierarchy and .sum().

CCBasis

76% match