Untitled

100%

✓ Published0🌍 Public

Last edited Dec 29, 2021

Created on Dec 29, 2021

Forked from Untitled

This interactive sunburst chart visualizes the hierarchical structure of the Bible, with arcs sized by either the number of books or chapters in each section. Users can click on slices to zoom into subtrees and toggle between linear and grouped modes via radio buttons. The visualization uses D3 v5 APIs including `d3.stratify`, `d3.partition`, `d3.arc`, and `transition.attrTween` to smoothly interpolate arc paths and label positions during updates. It loads its data from a JSON file and renders as an animated SVG.

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…

Untitled

An interactive zoomable sunburst chart displays the hierarchical structure of the Bible, with arcs representing books grouped by testament and genre. Clicking a slice zooms into that segment, and radio buttons switch between linear and grouped sizing modes. The visualization uses D3 v5 with the `d3.partition` layout, `d3.stratify` for hierarchy construction, and `d3.arc` for path generation, animating transitions via `transition.attrTween` on SVG paths and text elements. Data comes from JSON files defining the book structure and verse counts.

BBhavyatulasi

96% match

Loading thumbnail…

Untitled

This interactive sunburst chart visualizes the hierarchical structure of the Bible, with sections for the Old and New Testaments and their subdivisions. The visualization uses D3.js v5 with the `d3.stratify`, `d3.partition`, and `d3.arc` APIs to compute and render the radial layout as SVG paths. Users can click on any slice to zoom into that level, and toggle between linear and grouped node-size modes via radio buttons. The example animates transitions using `transition.attrTween` with tweened arc paths and text labels, which are positioned along the centroid of each slice. Data is loaded from a JSON file describing the book hierarchy.

Ssathishkanna11

95% match

Loading thumbnail…

[popup text]

This sunburst visualization displays the hierarchical structure of the Bible, with slices representing books and arcs for testaments. The chart uses smooth label tweens that follow the centroid, fading when arcs are too small. Data updates trigger redraws, with slice sizes adjustable between equal outer slices and chapter-count-based sizing. A random color palette is selected from six pre-defined schemes on each refresh. The visualization is implemented with D3.js and SVG animation, with labels that stick to their centroid during transitions. A known issue causes some labels to appear incorrectly after drilling and updating, and the author notes a desire to hide labels as they spin out and to combine path and text tweens.

663anp3ca

86% match

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

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

78% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive visualization displays the hierarchical structure of the Flare data as a sunburst diagram, partitioned into concentric rings where each ring represents a level of the hierarchy and arc angles encode numeric values. Clicking a segment zooms the view to focus on that subtree, using animated transitions that smoothly rescale and reposition arcs via `d3.interpolate` and `d3.attrTween`, with colors assigned by `d3.scaleOrdinal` and `d3.interpolateRainbow`. Rendered as SVG with D3 v5, it loads hierarchical JSON data and relies on the Observable stdlib’s `d3.partition` and `d3.arc` generators, adapting Bostock’s original example for vanilla JavaScript.

OOleg Russkin

77% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes a hierarchical taxonomy, allowing users to click on any arc to zoom into that branch and explore its nested categories. Each ring segment represents a node, with size encoding the accumulated value of its descendants. Built with D3 v5, the visualization uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute and draw the layout, while a `transition.attrTween` smoothly animates the arcs and labels during zoom transitions. The SVG rendering and color scales are applied directly through D3 selections.

AAdam Detrick

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

77% match