Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

DearDataProject

Public visualization

DearDataProject

0 stars0🌍 Public
Ssofiaboteva
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

Comments

Sign in to join the discussion.

MIT Licensed