Untitled

100%

✓ Published0🌍 Public

Last edited Jul 19, 2021

Created on Jul 19, 2021

This visualization demonstrates the hierarchical clustering of a Facebook group's member data using an interactive zoomable sunburst diagram. The circular layout partitions data by tree depth, with colored arcs representing hierarchical levels and leaf nodes sized proportionally to cluster values. The visualization uses D3 v3’s `d3.layout.partition` and `d3.svg.arc` to compute geometry, with animated transitions (via `transition.attrTween`) enabling zooming between hierarchy levels when clicking arcs or the central circle. Data is loaded from a JSON file containing the dendrogram structure.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A zoomable sunburst diagram visualizes hierarchical vulnerability data from a JSON file, with arc segments sized by a numeric value and colored by category. Clicking an arc transitions the chart to focus on that subtree, re-scaling the layout and fading text labels in and out. The visualization uses D3 v3’s `d3.layout.partition`, `d3.svg.arc`, and `transition.attrTween` to animate the zoom, rendering with SVG and applying a category color scale.

Ggitdhtuts

79% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from a JSON file using a radial partition layout. Clicking any arc smoothly zooms into that subtree, while clicking the center circle returns to the root. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, with color mapping via `d3.scaleOrdinal` and animation through `transition.attrTween`. SVG rendering with interactive transitions highlights the relationships between nested data categories.

Llucaele

79% match

Loading thumbnail…

Dendrogram + Grouped Horizontal Bar Chart

This example combines an interactive zoomable sunburst (a radial partition layout) with a grouped horizontal bar chart, visualizing hierarchical data from `flare.json`. The visualization uses a D3 v3 partition layout to encode hierarchy as concentric arcs, with color derived from the top-level category and luminance scaled by aggregated value. Clicking a node zooms into that branch, smoothly transitioning arcs via tweening; the center circle returns to the root. The chart is implemented with SVG and supports animated zoom in/out, with a tooltip on the center circle for zoom-out. Data is loaded from an external JSON file (flare.json) containing hierarchical size values.

663anp3ca

79% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data, displaying nested nodes as concentric arcs with color-coded categories and interactive labels. Clicking an arc zooms into that subtree, while clicking the center circle returns to the root. The visualization uses D3 v5’s `d3.partition` layout, `d3.arc` for path generation, and `d3.transition` with `attrTween` for smooth animated updates. Data is loaded from the `@observablehq/flare` dataset via the Observable stdlib, which the code fetches using `require()` before rendering the SVG.

Hhirowhite

79% match

Loading thumbnail…

Dendrogram + Grouped Horizontal Bar Chart

This example combines an interactive zoomable sunburst (partition layout) with a grouped horizontal bar chart. The visualization encodes hierarchical data from flare.json using an SVG-based circular partition layout, where each node’s arc size reflects its aggregated value. The root circle supports click-to-zoom: clicking a deeper arc zooms in, and clicking the center zooms out, with smooth transitions. Color is mapped from the top-level category using a categorical scale, while lightness encodes value magnitude via a sqrt scale. The animation uses D3's transition and tween functions to interpolate arc geometry during zooming, providing an animated drill-down/up experience. The chart is built with D3 v3 and rendered entirely in SVG, and the code is available under the MIT license.

663anp3ca

79% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes a hierarchical dataset, where clicking on a ring segment zooms in to reveal that branch as the new root. The visualization uses a radial partition layout, with arc segments representing nodes and their sizes proportional to values. Implemented with D3’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, it renders as an interactive SVG with smooth 750-millisecond transitions. Node colors derive from a quantized rainbow scale, and labels rotate along the arcs, with click handlers on parent circles enabling navigation. The data originates from the Observable “flare” library, which is loaded asynchronously.

MMohammad Jabr

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

78% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the structure of a hierarchical dataset, using nested arcs to represent the flare data from Observable’s `@observablehq/flare` library. Each level of the hierarchy is depicted as a ring, with arc segments sized proportionally to the data values. Clicking on a segment triggers an animated transition using `transition.attrTween` and `d3.interpolate` to smoothly re-center the view on that node, showing its children in greater detail. The visualization is rendered with SVG inside a circular partition layout, and the code uses `d3.hierarchy`, `d3.partition`, and `d3.scaleOrdinal` with the `interpolateRainbow` color scheme to distinguish top-level categories.

JJamie919

78% match