Skip to main content
SimilarExport ZIP
100%

Layout

✓ Published0🌍 Public
AAkriti97
Last edited Jun 14, 2018
Created on Jun 12, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Layout

This interactive circular visualization uses a zoomable bubble layout to display hierarchical data, with circles sized by a `size` value and colored by depth. The visualization presents a root node with a single child "abc" that contains six leaf nodes, each with sub-elements. Users can click any circle to zoom into that hierarchy level, with smooth animated transitions between views. Built with D3 v4, the code applies `d3.pack()` for the circle layout, `d3.hierarchy()` for data structuring, and `d3.interpolateZoom` for camera-like zooming. The SVG rendering includes hover effects on nodes and labels that fade in only for visible parents. Data comes from a local `flare.json` file.

AAkriti97
91% 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
88% match
Loading thumbnail…

Zoomable Circle Packing

This interactive visualization presents a hierarchical dataset as a set of nested circles, where each circle represents a node and its size reflects the node's value. Clicking a circle zooms in to focus on that branch, while clicking the background returns to the root view, with smooth animated transitions. Built with D3 v4, it uses `d3.pack` for circle-packing layout, `d3.hierarchy` for tree processing, and `d3.transition` with `interpolateZoom` for the zooming effect. The flare.json file supplies the data, which is rendered as SVG elements with hover highlighting and color gradients based on depth.

PPragyagarg
88% match
Loading thumbnail…

Zoomable Circle Packing

This interactive visualization uses a zoomable circle packing layout to display the hierarchical structure of the Flare data set. Each circle represents a node, with nested circles showing child categories, and clicking a circle zooms to that level while clicking the background returns to the root. Built with D3 v3, it uses `d3.layout.pack` for the layout, `d3.scale.linear` for coordinate scaling, and animated transitions via `transition.attr` to smoothly resize and reposition circles and labels. The SVG output uses color gradients based on depth and hover effects to highlight nodes.

PP15GitHubStudent
87% match
Loading thumbnail…

Untitled

This interactive visualization uses a circular packing layout to display a hierarchical dataset from the file `flare.json`. The code employs D3.js v4, React, and SVG with animation, leveraging `d3.hierarchy` to aggregate leaf sizes and `d3.pack` to position circles. Clicking on a node triggers a smooth zoom transition via `d3.transition` and `interpolateZoom` to focus on that subtree, while text labels fade in and out based on parent relationships.

LLaowei42
86% match
Loading thumbnail…

fresh block

This interactive circle-packing visualization displays a hierarchical dataset from flare.json, using nested bubbles to represent categories and their relative sizes. The view begins with a zoomed-out root node and supports click-to-zoom transitions between hierarchy levels, with labels fading in for parent nodes. Built with D3 v4, it uses the `d3.pack` layout, `d3.hierarchy` for tree traversal, and `d3.interpolateZoom` for smooth zoom animations. Circle fills follow a linear color scale applied by depth, while SVG rendering and CSS hover effects highlight nodes. The root background shifts to a warm hue, and clicking anywhere resets the view.

AAkriti97
85% match
Loading thumbnail…

Untitled

This interactive zoomable circle packing visualization displays the hierarchical structure of the flare.json dataset, with nested circles representing parent and child nodes sized by their numeric values. Users click circles to zoom into deeper levels, with smooth animated transitions between views. The visualization uses D3.js v4’s `d3.pack` layout, `d3.hierarchy`, and `d3.interpolateZoom` to animate the zooming effect, rendered as SVG elements with a linear color scale distinguishing depth levels. Text labels appear and fade based on the current zoom focus.

CCHENNI-Nidhaleddine
85% match
Loading thumbnail…

D3 v5 Circle-Packing

This example implements a circle-packing visualization using D3 v5, displaying a hierarchical dataset from the Flare library. The diagram shows a nested arrangement of circles, where each circle represents a data node, with its size proportional to a value and color indicating depth in the hierarchy. Built with D3’s `d3.stratify` and `d3.pack` APIs, it renders to SVG, applying a sequential magma color scale. Interactive mouseover highlights ancestor nodes, while leaf labels are clipped via `clipPath`, and tooltips show the node ID and value.

JJaloYang
85% match