Exercise 4(c)

100%

✓ Published0🌍 Public

Last edited Jan 31, 2021

Created on Jan 31, 2021

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)`.

AI-generated description

MIT Licensed

Similar vizzes

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

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

83% match

Loading thumbnail…

Fork of Pack Layout

This example visualizes a hierarchical dataset using D3’s pack layout, rendering circles for nodes and text labels for leaf values. The code builds a tree from an inline JavaScript object, sums leaf values with `root.sum()`, and applies a `d3.pack()` layout with a 300×300 size and 10-pixel padding. Each descendant is drawn as an `indianred` circle with white strokes and centered text, positioned via `transform` attributes. The SVG canvas is 960×500 units, and styling comes from an external CSS file.

DDing

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

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

82% match

Loading thumbnail…

Hierarchical Circles

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.

Aantoniojl-kemaro

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

81% match

Loading thumbnail…

Layout

This example shows an interactive circular packing diagram where each circle represents a node in a hierarchical dataset, with leaf nodes as white circles and parent nodes colored by depth. Clicking a circle zooms to focus on that subtree, smoothly transitioning the view. Built with D3 v4, it uses the `d3.pack` layout to compute circle positions and radii, and `d3.hierarchy` to process the data from a local `flare.json` file. The visualization is rendered as SVG, with hover highlighting on nodes and a zoom transition that repositions and rescales circles and labels via the `transition` API.

AAkriti97

81% match