Skip to main content
SimilarExport ZIP
100%

[popup text]

✓ Published0🌍 Public
TThanaporn-sk
Last edited Apr 22, 2017
Created on Apr 22, 2017

An interactive sunburst chart visualizes the hierarchical structure of the Bible, showing books within major sections. Users can toggle between two sizing modes: linear, where each outer slice represents a single book, and grouped, where slice size reflects the number of chapters per book. The chart uses d3.partition and d3.arc for geometry, with d3.hierarchy for data structuring. Labels smoothly track their arc centroids via custom tween functions (arcTweenPath and arcTweenText), fading out when arcs become too small. The visualization randomly selects from seven color schemes and is rendered using SVG with D3 transitions.

AI-generated description

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…

[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
92% match
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 interactive sunburst chart displays hierarchical data with arc labels, allowing users to click any arc to zoom into that subtree, click the center circle to zoom out, or click the canvas to reset. The visualization uses a D3.js v4 partition layout with linear and square-root scales, rendering SVG paths and text elements. It employs `d3.hierarchy`, `d3.arc`, and animated transitions via `transition.attrTween`, while labels are positioned along the arcs using `textPath` elements. The data comes from a JSON file of the Flare dataset, and text is hidden when it does not fit within an arc segment.

TThanaporn-sk
79% match
Loading thumbnail…

D3.v4 Sunburst chart with line focus on over

A D3.v4 sunburst chart displays hierarchical data as concentric arcs, with each segment’s size proportional to its value. On mouseover, the chart highlights the hovered node’s boundaries by extending dashed black lines outward from the arc’s start and end angles beyond the outer radius, then hides them on mouseout. The visualization uses `d3.partition`, `d3.arc`, linear and square-root scales, and the ordinal color scheme `d3.schemeCategory20`, rendering to SVG with the flare dataset. Interaction events bind via `.on('mouseover')` and `.on('mouseout')` to toggle line visibility.

TThanaporn-sk
75% 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
75% 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
74% match