Fork of Fork of Donut Chart

100%

Fork of Fork of Donut Chart

✓ Published0🌍 Public

Last edited Dec 3, 2022

Created on Dec 3, 2022

This donut chart visualizes the hierarchical structure of the flare dataset, with each ring segment representing a category and its subcategories. The visualization uses a sunburst layout where the inner circle shows the root, and each subsequent ring displays deeper levels of the hierarchy. The code employs D3 v5's `d3.hierarchy`, `d3.partition`, and `d3.arc` functions to compute and render the radial layout, with colors assigned via `d3.scaleOrdinal` and `d3.interpolateRainbow`. Interactive tooltips appear on hover, displaying the full path and value of each segment. The visualization is rendered as SVG with a fixed 932x932 viewBox, and labels rotate to remain readable around the circle.

AI-generated description

Un exemple pour le TP.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Donut Chart

This visualization uses an arc diagram to display the hierarchical composition of the Observable Flare dataset as a donut chart. Each ring segment represents a node, colored by its top-level category, with labels for smaller divisions. The chart is built with D3 v5’s `d3.partition` layout and `d3.arc` generator, rendering SVG paths and text elements. It loads data from the `@observablehq/flare` module and uses `d3.scaleOrdinal` with an interpolated rainbow palette for coloring.

MMaeva B

90% match

Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, with each ring segment representing a node whose angular width and radial extent encode its value. Clicking any segment smoothly zooms and re-centers the view on that subtree, with labels and arc opacity transitioning via `transition.attrTween` and `d3.interpolate`. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the SVG paths, while a custom color scale maps top-level categories to a rainbow palette.

Bblueyjuice

85% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, with each ring segment representing a category or subcategory whose arc width corresponds to its value. Users can click on any node to zoom into that branch, smoothly animating the re-scaling of arcs and labels via D3 transitions. The visualization is rendered as SVG and uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout, while `d3.interpolateRainbow` assigns categorical colors by top-level branch. The code loads data asynchronously through the Observable Standard Library’s `require()` function.

JJosieeeeee

85% match

Loading thumbnail…

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

84% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare dataset, using concentric rings to represent nested categories and their relative sizes. Clicking any arc zooms into that subsection, smoothly animating the layout through D3 transitions. The visualization is built with D3 v5, using `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the arcs as SVG paths. Colors are assigned via `d3.scaleOrdinal` with an interpolated rainbow palette, and labels rotate and fade based on the current zoom level.

Jjulia-amelie

84% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays the hierarchical structure of the Flare dataset as a radial layout, with each ring segment representing a category and its subcategories. The visualization animates transitions when a user clicks a segment, zooming into that node and its descendants while keeping the surrounding context visible. Built with D3 v5, the chart uses `d3.hierarchy`, `d3.partition`, and a custom `d3.arc` generator to compute the geometry, while `transition.attrTween` smoothly interpolates the arc paths and label transforms during the 750ms zoom animation. The dataset is loaded from an Observable library and rendered as an SVG.

Ddfeldhaus

84% match

Loading thumbnail…

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

84% match

Loading thumbnail…

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

83% match