Untitled

100%

✓ Published1🌍 Public

Last edited Apr 20, 2020

Created on Apr 19, 2020

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.

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

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.

MMark Lam

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

81% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

A hierarchical sunburst chart displays hierarchical data as concentric rings of arcs, with colors assigned to top-level branches. Clicking a segment smoothly zooms and re-centers the visualization on that arc, expanding its children outward while fading unrelated elements. Built with D3 v5, it loads data via the Observable standard library and uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout as SVG. Interactive transitions rely on `transition.attrTween` and `d3.interpolate` to animate arc positions and label rotations.

SSumittiwari654

78% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

SSumittiwari654

78% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data from a flare.csv file, showing the relative sizes of data tables and their parent-child relationships. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the radial layout as SVG paths. Clicking a segment triggers an animated transition that re-centers the view, using `d3.interpolate` and `transition.attrTween` to smoothly morph the arcs and labels over 750 milliseconds, with color encoding and opacity distinguishing hierarchy levels.

Aarvind75

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

78% match