Fork of Sunburst

100%

Fork of Sunburst

✓ Published0🌍 Public

Last edited Apr 12, 2021

Created on Apr 12, 2021

Forked from Sunburst

This visualization displays the keyboard shortcuts of VLC media player as an interactive sunburst diagram. The hierarchical data from flare.json is partitioned into radial rings, with each arc segment representing a shortcut category, action, and specific key combination. The code uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute the layout, while a rainbow color scale distinguishes top-level groups. Text labels are rotated and placed only on sufficiently large segments, and hovering reveals the full path via SVG titles. The SVG output is rendered through React.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical structure of the Flare software library, with each ring representing a level of the codebase and arc size proportional to data values. The D3 v5 code uses the `d3.partition` layout algorithm, `d3.arc` for drawing segments, and animated transitions triggered by clicking on any visible arc to zoom into the selected branch. SVG paths and text labels render in the browser, with colors assigned via `d3.scaleOrdinal` and an interpolated rainbow palette, while the dataset is loaded asynchronously from an Observable-hosted JSON file.

DDries Lagae

77% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through radial arcs. Users can click on any arc to zoom into that portion of the hierarchy, with smooth animated transitions repositioning the layout. The visualization is built with D3 v5, using `d3.partition` to compute the layout, `d3.arc` for arc paths, and `transition.attrTween` to animate changes between states. Colors are assigned via `d3.scaleOrdinal` with an interpolated rainbow palette, and labels rotate to remain readable at various depths.

DDonald Bagwell

76% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst chart displays the hierarchical structure of the Flare software system, using segment size to encode file sizes and color to distinguish top-level categories. Built with D3 v5, it renders as SVG and responds to user clicks on segments to zoom in and out of the hierarchy. The visualization uses D3’s `d3.arc`, `d3.partition`, and `d3.hierarchy` APIs to compute the layout, with animated transitions handled through `d3.transition` and `transition.attrTween` for smooth rescaling of arcs and labels. The data originates from the Flare dataset’s JSON representation, sourced from Observable.

AAlbert

76% match

Loading thumbnail…

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

76% match

Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

This visualization presents a zoomable sunburst of the Flare dataset, showing a hierarchical file structure as multi-level arcs. Rendered with SVG and animated transitions, users click any segment to make it the new root, smoothly redrawing the tree with D3 v5’s updated partition layout. The code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute geometry, while `transition.attrTween` and `d3.interpolate` animate the arcs and labels. Colors derive from `d3.scaleOrdinal` with an interpolated rainbow range, and the data loads asynchronously from the Observable Flare library.

Bblueyjuice

75% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst diagram visualizes the hierarchical Flare dataset, displaying the relative sizes of categories and subcategories as concentric arcs. Users can click on any arc to zoom into that branch, with smooth animated transitions between views. The visualization uses D3 v5’s `d3.partition` layout and `d3.arc` generator to compute arc geometry, while `transition.attrTween` and `d3.interpolate` animate changes. A categorical color scale assigns hues to top-level nodes, and labels rotate and fade based on arc visibility thresholds. The data is loaded from an Observable-hosted JSON module.

RRene

75% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical structure of the Flare dataset, with each arc’s size proportional to its value. Clicking a slice zooms in to reveal its children, using D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout and rendering. Animated transitions via `transition.attrTween` and `d3.interpolate` smoothly update arc positions and labels, while colors are assigned using `d3.scaleOrdinal` and `d3.interpolateRainbow`. The visualization renders as SVG.

BBrittany Harden

75% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive zoomable sunburst chart visualizes the hierarchical structure of the Flare dataset, representing files and their sizes as concentric arcs. Built with D3 v5, it uses `d3.partition`, `d3.arc`, and `d3.hierarchy` to lay out the radial tree, with animation handled by `transition.attrTween` for smooth zooming on click. The visualization is rendered as SVG, with fill-opacity and label visibility responding to the current zoom level, and colors assigned via `d3.scaleOrdinal` with an interpolated rainbow palette.

Vvorp-portal

75% match