Untitled

100%

✓ Published0🌍 Public

Last edited Dec 14, 2022

Created on Dec 8, 2022

Forked from 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.

AI-generated description

Mike Bostock's D3 Zoomable Sunburst example

with D3 v5 (based on the changes in v5)

<br></br> Ported from this Observable notebook for this forum thread. Many thanks to Bryan Gingechen who answered my question about the necessary steps to get from an (Observable) JavaScript notebook to a vanilla JavaScript index.html. He presented his solution on blockbuilder.org

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes vulnerability data from a hierarchical JSON file, with arcs colored by top-level category and sized by value. Clicking an arc zooms into that segment, while a breadcrumb trail shows the current path. Built with D3 v5, it uses `d3.partition` for layout, `d3.arc` for rendering, and `transition.attrTween` to animate between views. Labels rotate and fade based on visibility, and hover updates breadcrumbs.

Ggitdhtuts

87% match

Loading thumbnail…

Untitled

This interactive zoomable sunburst diagram visualizes the hierarchical structure of the Flare software package, using nested arcs sized by file metrics. Built with D3 v3 and SVG, it employs `d3.layout.partition` to compute the layout and `d3.svg.arc` for rendering. Clicking a node triggers `transition.attrTween` to smoothly zoom into that subtree, recalculating scales and updating text labels. The color scale `d3.scale.category20c` distinguishes parent categories, while labels rotate based on their angular position.

BBhavyatulasi

85% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive zoomable sunburst displays hierarchical data from a JSON file, showing nested categories and values. The visualization updates its arcs and labels with smooth, 750-millisecond transitions, allowing users to click any arc to zoom in and focus on a sub-branch. Built with D3 v5, it uses the `d3.partition` layout, `d3.arc` for geometry, and `d3.scaleOrdinal` with `d3.interpolateRainbow` for color coding. The code employs `transition.attrTween` for animated path and label updates, with SVG rendering and hover tooltips showing the full path and value.

MMarc-André Barbeau

85% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart displays hierarchical data as concentric arcs, where clicking a segment zooms in to show its children while the central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the SVG layout, with `transition.attrTween` animating arc positions and label transforms. The visualization loads the flare dataset via Observable’s stdlib and applies a rainbow color scale based on top-level categories.

Nnrcopeland

85% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes a hierarchical dataset, using colored arcs to represent nested categories from the flare data loaded via the Observable standard library. Clicking an arc animates a zoom into that node, with transitions driven by `d3.arc` interpolation and `transition.attrTween` to smoothly reshape arcs and labels. The SVG rendering uses `d3.partition`, `d3.hierarchy`, and ordinal color scales, with visibility logic filtering arcs and text based on computed angular and radial bounds.

SShivrangi

84% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays a hierarchical dataset from the Observable “flare” library. The circular treemap partitions data by category and subcategory, with each arc’s size reflecting the value. Clicking an arc smoothly zooms to that node, re-centering the layout and fading out unrelated segments, using `d3.hierarchy`, `d3.partition`, and `d3.arc` for geometry and `transition.attrTween` for animation. The SVG output is styled with `d3.scaleOrdinal` and `d3.interpolateRainbow` for color, while labels and tooltips are generated via D3 selections.

Ccochis

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

84% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays hierarchical data from the flare.json dataset, showing nested categories as concentric arcs. Users click a segment to zoom into that branch, with smooth animated transitions. Built with D3 v5, the visualization uses SVG paths and the d3.partition layout, d3.arc for arc geometry, and d3.transition with attrTween to animate between states. Colors derive from a scaleOrdinal with an interpolateRainbow palette.

BBhavyatulasi

84% match