Skills sunburst

D3.v4 Sunburst chart with line focus on over

A D3.v4 sunburst chart displays hierarchical data as concentric arcs, with each segment’s size proportional to its value. On mouseover, the chart highlights the hovered node’s boundaries by extending dashed black lines outward from the arc’s start and end angles beyond the outer radius, then hides them on mouseout. The visualization uses `d3.partition`, `d3.arc`, linear and square-root scales, and the ordinal color scheme `d3.schemeCategory20`, rendering to SVG with the flare dataset. Interaction events bind via `.on('mouseover')` and `.on('mouseout')` to toggle line visibility.

78% match

Zoomable Sunburst with Labels

This interactive sunburst chart displays hierarchical data with arc labels, allowing users to click any arc to zoom into that subtree, click the center circle to zoom out, or click the canvas to reset. The visualization uses a D3.js v4 partition layout with linear and square-root scales, rendering SVG paths and text elements. It employs `d3.hierarchy`, `d3.arc`, and animated transitions via `transition.attrTween`, while labels are positioned along the arcs using `textPath` elements. The data comes from a JSON file of the Flare dataset, and text is hidden when it does not fit within an arc segment.

Sunburst

A zoomable sunburst chart visualizes the hierarchical flare dataset, showing nested categories as concentric rings where each arc's angular width represents its value. The visualization collapses or expands levels when a user clicks on an arc or the central circle, with smooth transitions animating the radial layout. Built with D3 v5, the code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` and `d3.interpolate` animate arc geometry during zoom. The color scale uses `d3.scaleOrdinal` and `d3.interpolateRainbow`, and data loads asynchronously via the Observable `require` API.

Mmobssite

Sunburst

Mmobssite

D3 Sunburst Sequence

This interactive sunburst sequence visualization shows how a population progresses through sequential stages, with each sequence’s final value determining the arc size. Users can hover over arcs to see path summaries, and the visualization includes breadcrumb trails and a dynamic legend. Built with D3 v3 and AngularJS, the code uses the `d3.layout.partition` and `d3.svg.arc` APIs to render the hierarchical data, which is parsed from CSV files into a JSON tree structure. The example supports custom file uploads and includes sample datasets for Android OS conversion, Netflix churn, and page clicks.

Zoomable Sunburst with Labels

This zoomable sunburst chart uses D3.js (v3) to visualize hierarchical data from flare.json, with each arc sized by value and colored by parent category. The visualization features smooth animated transitions that zoom between hierarchy levels when clicking on arcs, with labels displayed for each node. Built with SVG rendering, the chart encodes the flare dataset's multi-level structure, allowing users to explore the relationships between top-level categories and their nested children through interactive zooming and a clean, labeled sunburst layout.

CCBasis

74% match

D3 v5 Zoomable Sunburst

A zoomable sunburst chart displays hierarchical data from the flare.json dataset, showing nested categories as concentric arcs. Users click a segment to zoom into that branch, with smooth animated transitions. Built with D3 v5, the visualization uses SVG paths and the d3.partition layout, d3.arc for arc geometry, and d3.transition with attrTween to animate between states. Colors derive from a scaleOrdinal with an interpolateRainbow palette.

BBhavyatulasi

74% match

Sunburst

This interactive sunburst chart visualizes the hierarchical structure of the Flare software project, using arc size to represent the relative quantity of nodes within each category. Built with D3 v3 and the d3Kit framework, the visualization employs `d3.layout.partition` and `d3.svg.arc` to generate the rings, with colors assigned by category name. Clicking any arc triggers a zoom animation via `transition.attrTween`, which smoothly interpolates the scale domains to focus on the selected subtree. The chart auto-resizes to maintain its aspect ratio and supports mouse events for additional interactivity.