Fork of Donut Chart

100%

Fork of Donut Chart

✓ Published2🌍 Public

Last edited Sep 28, 2022

Created on Sep 28, 2022

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.

AI-generated description

Un exemple pour le TP.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Donut Chart

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.

DDavid Allyn

90% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This visualization shows the Flare software package’s class hierarchy as a zoomable sunburst. The circular radial layout displays hierarchical partitions, where each ring represents a depth level and each arc’s size corresponds to the node’s value. Clicking on any arc animates the view, re-centering and rescaling the chart around that node, while a circle at the center returns to the root. The code uses d3.hierarchy, d3.partition, d3.arc, and transition.attrTween on SVG paths, with data loaded via the @observablehq/flare module and color scales built with d3.scaleOrdinal and d3.interpolateRainbow.

Ssofiaboteva

82% match

Loading thumbnail…

Fork of Fork of Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the hierarchical flare dataset, showing nested categories as concentric arcs whose angular width encodes value. Clicking an arc zooms into that subtree with a smooth 750ms transition, while a central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute layout and geometry, with `transition.attrTween` animating arc paths and label rotations. The data loads from the `@observablehq/flare` module via the Observable runtime and renders as SVG with a rainbow color scale.

Bblueyjuice

82% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst chart visualizes hierarchical data from the `@observablehq/flare` dataset, showing nested categories as colored arcs that can be clicked to zoom into sub-hierarchies. Built with D3 v5 and rendered as SVG, the visualization uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute layout geometry, with `d3.scaleOrdinal` and `d3.interpolateRainbow` for color mapping. Clicking an arc triggers a smooth 750ms transition via `transition.attrTween` that interpolates angular and radial coordinates, while labels rotate and fade based on visibility thresholds. Ancestor tooltips appear via appended `title` elements.

AAliceBradbury

81% 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

81% 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

81% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst diagram shows the hierarchical structure of the Flare dataset, with each ring segment representing a category and its value. Users can click on any segment to zoom in and focus on that branch, while clicking the central circle returns to the parent level. Built with D3 v5, the visualization uses `d3.hierarchy`, `d3.partition`, and animated SVG transitions to smoothly interpolate arc paths and labels via `transition.attrTween`. Data is loaded from the `@observablehq/flare` module, and colors are assigned using `d3.scaleOrdinal` with a quantized rainbow palette.

Ddon-alberto

81% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualizes hierarchical data from the Observable `@observablehq/flare` dataset, showing the flare library’s package structure with color-coded arcs and labels. Clicking a node zooms into that subtree with a smooth 750ms transition, adjusting arc positions and label rotations via `d3.transition` and `tween` interpolation. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and a sequential `d3.scaleOrdinal` with interpolated rainbow colors. The SVG renders all nodes, hiding non-visible arcs and labels through opacity filters.

Aape-ape-ape

81% match