Untitled

100%

✓ Published0🌍 Public

Last edited Mar 26, 2023

Created on Mar 25, 2023

Forked from Untitled

A zoomable circle-packing visualization displays hierarchical data as nested circles, with an initially clicked root (`assault`) revealing child nodes labeled “man,” “information,” “anyone,” and “area.” Built with React and D3 v4, it uses `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom` to animate transitions between levels, while `d3.scaleLinear` with HCL interpolation colors the circles. Clicking any circle zooms into its subtree, fading labels in and out, all rendered as SVG elements in a 900×900 viewport.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

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

87% match

Loading thumbnail…

Untitled

This interactive visualization displays a hierarchical tree as a circular packing layout, where nodes are sized proportionally to their values. The code uses the D3.js library (v6.7.0) with its `pack` and `hierarchy` APIs to compute node positions, and transitions to animate changes. Clicking a parent node collapses or expands its children, triggering a re-layout. The SVG renders nodes as circles with labels, and blue directed links with arrowheads connect specific nodes across the hierarchy, based on a `links` array in the data.

Mmiloparra

85% match

Loading thumbnail…

Untitled

This visualization shows a zoomable circle packing layout of the Flare software dependency hierarchy, where each node’s area encodes its size value. Clicking a circle zooms to that subtree, smoothly interpolating the view with `d3.interpolateZoom` and animating label opacity and display. It uses `d3.pack`, `d3.hierarchy`, and `d3.scaleLinear` with HCL interpolation, rendering in SVG within a React framework. Data comes from the bundled `flare.json` file.

Iilincaion

83% match

Loading thumbnail…

Fork of Untitled

This interactive visualization uses a circular packing layout to display the hierarchical structure of the flare dataset, with nested circles representing categories and their sub-items sized by a numeric value. Clicking a circle zooms into that node, smoothly animating the view through a tween on the interpolateZoom function while adjusting label visibility and opacity for the new focus. The SVG is rendered with D3 v4, using the d3.pack layout and d3.hierarchy API to compute circle positions, and a linear color scale with HSL interpolation to encode depth. The code is built as a React component, though the visualization itself relies on direct DOM manipulation through D3 selections.

LLaowei42

83% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization displays a hierarchical dataset as nested circles, where each circle represents a node and its size corresponds to the node's value. Clicking any circle animates a zoom to that node, revealing its children and hiding unrelated elements. The implementation uses d3.layout.pack for the circle layout and d3.interpolateZoom for smooth zoom transitions. The data comes from the flare.json file, which contains a tree structure with named categories and numeric sizes. The visualization renders with SVG circles and labels, with a color scale applied by tree depth.

AAndresAnayaIsaza

81% match

Loading thumbnail…

Store constraining + zoomable pack circle

This zoomable circle packing visualization displays hierarchical data from altData.json using nested circles sized by leaf node values. The chart starts centered on the root node and animates through zoom transitions when clicking child circles, revealing deeper levels of the hierarchy. Built with D3 v5, the code uses `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom` to calculate layouts and smooth zooming, while transitions update circle radii and label visibility. The SVG rendering uses a color scale to distinguish depths, with click handlers enabling interactive navigation through the tree structure.

CCalvin Gomez

81% match

Loading thumbnail…

Untitled

A zoomable partition layout depicts the hierarchical flare dataset, with each node’s slice sized by its aggregated value. Clicking a slice smoothly refocuses the view on that subtree, while the top-level view restores on canvas click. D3 v4’s `d3.partition`, `d3.hierarchy`, and `d3.arc` render SVG paths, with node labels placed along curved arcs via `textPath`. The zoom animation uses `transition.attrTween` and interpolated `d3.scaleLinear` and `d3.scaleSqrt` domains. Color comes from `d3.scaleOrdinal` with `d3.schemeCategory20`.

Jjsoudeer

81% match