Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3 Pack Layouts

Public visualization

Viewing a saved revision (read-only)

53e219d2e7734945989849f3080851f6

D3 Pack Layouts

1 star4🌍 Public
SSubhendu Karmakar
Last edited Mar 13, 2024
Created on Mar 13, 2024

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.

AI-generated description

D3 Hierarchies