DearDataProject

100%

DearDataProject

✓ Published0🌍 Public

Last edited May 16, 2022

Created on May 16, 2022

This interactive zoomable sunburst chart visualizes personal data about meals, snacks, and beverages recorded by a single person over two weeks. Each ring represents a category in the hierarchy—such as meal type, food or beverage, and location—with segment size determined by the count of entries in the dataset from the provided CSV file. The visualization uses D3 v5’s `d3.partition` layout and `d3.arc` for drawing arcs, with colors assigned via `d3.scaleOrdinal` and `d3.interpolateRainbow`. Clicking on any segment zooms into that branch, using `transition.attrTween` and `d3.interpolate` to smoothly animate the radial repositioning of all arcs.

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…

Dear Data V2

This zoomable sunburst chart visualizes the hierarchical structure of the flare dataset. Users can click on any arc to re-center the view on that node, with a smooth animation transitioning the radial layout. Built with D3 v5, the visualization uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the geometry. The `transition.attrTween` API animates the arc paths and labels during zooming, while `d3.scaleOrdinal` with `d3.interpolateRainbow` assigns colors to the top-level categories.

Ssofiaboteva

80% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive zoomable sunburst chart visualizes a hierarchical dataset of restaurant categories across multiple U.S. cities, with each ring segment representing a food type and its relative value. Users can click on any segment to re-center the visualization on that node, smoothly animating the repositioning and scaling of all arcs and labels over 750 milliseconds. Built with D3 v5, the implementation uses the `d3.hierarchy` and `d3.partition` APIs to compute the layout, `d3.arc` for rendering paths, and `d3.interpolate` within a `transition.attrTween` for seamless zoom transitions. Colors are assigned via a rainbow-interpolated ordinal scale, and the flare dataset is loaded asynchronously from the Observable stdlib.

MMartin Lauf

80% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data, displaying restaurant categories (fast food, pizza, Mexican, etc.) across multiple cities, with each arc segment representing a portion of the total. The visualization uses D3 v5's hierarchical layout and partition functions to compute the arc geometry, rendering the sunburst as SVG paths with animated transitions. Clicking on a segment zooms into that subtree, using `d3.interpolate` and `transition.attrTween` to smoothly animate the arc angles and radii. The data originates from the Observable `@observablehq/flare` dataset, loaded dynamically via the Observable standard library's `require` function.

Jjessand4

77% match

Loading thumbnail…

D3 v5 Zoomable and loadable Sunburst

This interactive sunburst chart visualizes hierarchical data from the flare dataset, displaying restaurant categories and subcategories as concentric arcs. Clicking a segment zooms in to reveal that branch's children, while clicking the center circle navigates back up the hierarchy. Built with D3 v5, it uses custom partition layouts, arc interpolation, and CSS transitions to animate the zooming effect. The visualization loads data asynchronously via the Observable stdlib and renders everything as SVG with animated color and opacity changes.

Aallanagabindhu

77% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes hierarchical data, showing the proportion of food categories across multiple cities. The data is loaded from the `@observablehq/flare` dataset and rendered as an SVG with animated transitions. Users can click on arcs or the central circle to zoom in and out. The code uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and `d3.scaleOrdinal` with an interpolated rainbow color scheme, along with `transition.attrTween` for smooth updates.

Jjessand4

76% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays a hierarchical dataset of restaurant categories across multiple cities, using concentric rings to represent nesting levels. Built with D3 v5, it renders as SVG with animated transitions triggered by clicking any arc to zoom into that subtree. The code loads data from the `@observablehq/flare` module and applies `d3.partition` with a radial layout, while `d3.arc` and `transition.attrTween` handle the smooth path interpolations between zoom states. Color is assigned via `d3.scaleOrdinal` with an interpolated rainbow palette.

SSumittiwari654

76% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays a hierarchical dataset of the Flare software project, with each arc segment representing a category or leaf node whose angular width encodes its relative value. Clicking a segment transitions the view to center on that branch while shrinking others, enabling navigation through multiple levels of the tree. The visualization is rendered as SVG using D3 v5’s `d3.partition` layout, `d3.arc` for path generation, and D3 transitions for smooth zooming animations. Data is provided as an inline JSON object.

Ssrinvas35

76% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays a hierarchical dataset from the Observable “flare” library. The circular treemap partitions data by category and subcategory, with each arc’s size reflecting the value. Clicking an arc smoothly zooms to that node, re-centering the layout and fading out unrelated segments, using `d3.hierarchy`, `d3.partition`, and `d3.arc` for geometry and `transition.attrTween` for animation. The SVG output is styled with `d3.scaleOrdinal` and `d3.interpolateRainbow` for color, while labels and tooltips are generated via D3 selections.

Ccochis

75% match