Fork of D3 v5 Zoomable Sunburst

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset, where each ring segment represents a category and its size reflects the summed value of its children. Clicking an arc smoothly zooms into that node, re-scaling the partition layout and labels. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and `d3.interpolate` within a `transition.attrTween` animation, rendering as SVG with zoom transitions triggered by click events. The flare data is loaded via the Observable standard library’s `require` method.

JJaeyong Lee

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, with each ring segment representing a category or subcategory sized by value. Clicking any arc zooms into that node, smoothly animating the layout so the selected subtree expands to fill the view. The chart is built with D3 v5 using the `d3.partition` layout and custom `d3.arc` paths, rendered as SVG with transitions driven by `transition.attrTween` and `d3.interpolate`. Labels rotate and fade based on visibility thresholds, while a central circle resets the view to the root.

MMaeva B

Fork of Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through concentric ring segments. Clicking a node smoothly animates and re-scales the chart to focus on that branch, with the central circle resetting the view. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout and rendering, while `transition.attrTween` and `d3.interpolate` drive the animated transitions between zoom states. Color mapping uses `d3.scaleOrdinal` with `d3.interpolateRainbow`.

DDeclan Naughton

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst chart visualizes the hierarchical structure of the Flare dataset, with arcs color-coded by top-level category and sized by value. Clicking a segment rotates and scales the visualization to focus on that subtree, using D3 v5 transitions and `transition.attrTween` to animate arc geometry and label positions. The chart renders with SVG, leveraging `d3.hierarchy`, `d3.partition`, and `d3.arc`, while loading data asynchronously via the Observable standard library and `require`.

Bblueyjuice

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical structure of the Flare dataset, where each arc segment represents a node and its angular width encodes the node's value. Clicking a segment zooms in to show that node as the new root, with smooth animated transitions updating arcs and labels. Built with D3 v5, the visualization uses `d3.hierarchy`, `d3.partition`, and `d3.arc` for layout, while `transition.attrTween` animates the changing arc paths during zoom. Color is assigned per top-level category using a rainbow scale.

Jjmmoser7

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical structure of the Flare data, with each ring representing a level and the arc angles proportional to leaf values. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.scaleOrdinal` for layout and coloring, plus `transition.attrTween` for animated zooming and panning. The clickable arcs and labels update via interpolated transitions on the SVG paths and text elements, showing node names and values from the flare dataset on hover.

Aape-ape-ape

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes the hierarchical structure of the Flare dataset, showing relative sizes of categories and subcategories as concentric arcs. Users click any segment to zoom into that branch, with smooth 750ms transitions animating the radial layout. Built with D3 v5, the visualization uses `d3.partition` for layout, `d3.arc` for path generation, and `d3.interpolateRainbow` for color coding. SVG rendering with `transition.attrTween` smoothly updates arc geometry and label positions during zoom interactions.

TTom Ellis

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst diagram displays the hierarchical structure of the Flare dataset, with each ring representing a level of hierarchy and arc length proportional to size. Clicking a sector zooms into that subtree, re-centering and re-scaling the visualization with a smooth 750-millisecond animation. Built with D3 v5, the SVG rendering uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` animates the path geometry and label transforms. The color scale assigns distinct hues to top-level categories based on the data's children.

PPekingWaldo