Skip to main content
Log in
M

Mustafa-Esoofally

@Mustafa-Esoofally·2 public vizzes

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical Flare dataset as concentric arcs, with clickable parent nodes that smoothly zoom into deeper levels of the hierarchy. Built with D3 v5, it renders arcs using `d3.arc` and computes the layout with `d3.partition` on a hierarchy created by `d3.hierarchy`. Animations are driven by `transition.attrTween`, interpolating between arc positions with `d3.interpolate`, while labels fade and rotate using `labelTransform` based on visible arc bounds. The example loads the Flare JSON data via the Observable standard library's `require` function and uses a `d3.scaleOrdinal` with an interpolated rainbow palette.

Dec 2, 2020
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, where each ring segment represents a category and its size corresponds to a numeric value. Clicking a segment smoothly transitions the chart to focus on that node’s subtree, using D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute and render the circular layout. The animation relies on `transition.attrTween` and `d3.interpolate` to morph arc geometry and label transforms between states, with colors assigned per top-level branch via `d3.scaleOrdinal`.

Dec 2, 2020