Skip to main content
SimilarExport ZIP
100%

[popup text]

✓ Published0🌍 Public
663anp3ca
Last edited Oct 16, 2018
Created on Oct 16, 2018

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.

AI-generated description

Who doesn't love sunbursts? Visit my blog for more.

Super smooth labels, that move cleanly with centroid (using their own tween) and fade when their arc is too small. Previously, labels leveraged the tween for the arc segements, but they seemed to take an abbreviated path, flying off course a bit, so I (and others) hid the labels during most of their tween trip to minimize the effect. These stick right with centroid.

This sunburst also redraws based on underly data updates (specifically, the slice sizes are either based on "size" (where each outer slice =1) or grpsize (where each outer slice is sized based on the number of chapters in that book).

A bug, a wish, and a dream:

  • Bug: Drilling into the sunburst and updating the data will cause some of the labels to appear when they should not.
  • Wish: The labels the spin out of existance at the top -- I'd like to hide them before they begin rotating.
  • Dream: I think that my path tween and text tween could be combined. I don't want to do this until cleaned up the bug and worked on the label spin.

Each time the visual is refreshed, it chooses one of 6 color palette from Mary Stribley's Website Color Schemes.

Found this on github? See it working at http://bl.ocks.org/denjn5.

forked from <a href='http://bl.ocks.org/denjn5/'>denjn5</a>'s block: <a href='http://bl.ocks.org/denjn5/00a57e89c67906897b6eede56219170e'>Super smooth Sunburst Labels v4</a>

gpl-3.0 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
86% match
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
86% 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
86% match
Loading thumbnail…

Zoomable Sunburst with Labels

This zoomable sunburst chart uses D3.js (v3) to visualize hierarchical data from flare.json, with each arc sized by value and colored by parent category. The visualization features smooth animated transitions that zoom between hierarchy levels when clicking on arcs, with labels displayed for each node. Built with SVG rendering, the chart encodes the flare dataset's multi-level structure, allowing users to explore the relationships between top-level categories and their nested children through interactive zooming and a clean, labeled sunburst layout.

CCBasis
76% match
Loading thumbnail…

zoomable sunburst with sunlight colors

This zoomable sunburst diagram displays hierarchical data with arc labels, using the Flare dataset. Clicking an arc zooms into that subtree, the center circle zooms back out, and the background resets the view. The visualization uses D3 v4’s `d3.partition`, `d3.arc`, and `d3.scaleOrdinal` with a 30-color palette from the Sunlight Foundation Style Guide. Labels render along curved paths via `d3.path` and `textPath`, with animated transitions driven by `transition.attrTween` and interpolated scales. A white contour stroke improves label readability.

FFrissAnalytics
75% match
Loading thumbnail…

Sunburst

A zoomable sunburst chart visualizes the hierarchical flare dataset, showing nested categories as concentric rings where each arc's angular width represents its value. The visualization collapses or expands levels when a user clicks on an arc or the central circle, with smooth transitions animating the radial layout. Built with D3 v5, the code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` and `d3.interpolate` animate arc geometry during zoom. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow`, and data loads asynchronously via the Observable `require` API.

Mmobssite
75% match
Loading thumbnail…

Sunburst

A zoomable sunburst chart visualizes the hierarchical flare dataset, showing nested categories as concentric rings where each arc's angular width represents its value. The visualization collapses or expands levels when a user clicks on an arc or the central circle, with smooth transitions animating the radial layout. Built with D3 v5, the code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` and `d3.interpolate` animate arc geometry during zoom. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow`, and data loads asynchronously via the Observable `require` API.

Mmobssite
75% 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
75% match