Skip to main content
100%

circle packing using d3 pack layout

✓ Published0🌍 Public
Aaaizemberg
Last edited Mar 10, 2020
Created on Mar 10, 2020

This example shows database rankings as a circle packing visualization, where each database name is rendered inside a circle sized according to its ranking score. The circles are arranged hierarchically via the D3 `d3.layout.pack` layout, with SVG circles and text labels styled using the Rock Salt font. The chart is built with D3 version 3.5.6, using the `pack.nodes` method to compute positions and radii, and mouseover/mouseout events change the circle stroke from grey to black. The data consists of seven databases like PostgreSQL and mongoDB, each with a numeric size value.

AI-generated description

Similar vizzes

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
74% 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
74% match
Loading thumbnail…

D3 v5 Circle-Packing

This visualization shows a hierarchical dataset as nested circles, with each circle’s size encoding a numeric value and its color representing depth in the tree. Built with D3 v5 and rendered as SVG, it uses `d3.stratify` to convert the tabular flare.csv data into a hierarchy, `d3.pack` for layout, and `d3.scaleSequential` with `d3.interpolateMagma` for coloring. Hovering highlights a node and its ancestors via the `mouseover` and `mouseout` events.

DDylan
73% 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
73% match
Loading thumbnail…

Zoomable Circle Packing

A zoomable circle packing visualization displays a hierarchical dataset as nested circles, where each circle's size corresponds to a numeric value. Clicking a circle zooms into that branch, expanding its children while hiding others, and clicking the background returns to the root. Built with D3 version 3, it uses `d3.layout.pack` to compute the circle layout and `d3.scale.linear` for positioning. The view animates via `transition.attr` over 750 milliseconds, updating circle positions and radii. The code uses the `flare.json` dataset and renders with SVG elements, including circles and text labels.

PPacsangon
73% 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
73% match
Loading thumbnail…

Circle Packing layouts

This example displays a grid of circle-packing layouts generated by the D3 v3 `d3.layout.pack` API, each containing a set of equal-sized leaf nodes labeled with letters from A to Z. The layouts use a custom value function that assigns a smaller size to node B, showing how nesting and circle radii adapt to varied initial values. Rendered as SVG with red bounding boxes around each container, the visualization supports click-to-zoom transitions via `d3.interpolateZoom`, animating the view into any selected circle while adjusting label visibility and circle radii.

TThanaporn-sk
72% match
Loading thumbnail…

Zoomable Circle Packing

This example visualizes a hierarchical dataset as nested circles, with each circle’s size proportional to a value and color indicating depth. Clicking any circle smoothly zooms to that node, re-scaling the layout to center and enlarge its children. The visualization uses `d3.layout.pack` and `d3.scale.linear` for positioning and color, with SVG transitions animating circle radii and label opacity. It renders `flare.json` data, a common D3 hierarchy, and applies `d3.interpolateHcl` for color interpolation.

PP15GitHubStudent
72% match