Skip to main content
SimilarExport ZIP
100%

D3.v4 Sunburst chart with line focus on over

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 17, 2017
Created on Mar 17, 2017

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.

AI-generated description

sunburst chart with extending line

forked from <a href='http://bl.ocks.org/caravinden/'>caravinden</a>'s block: <a href='http://bl.ocks.org/caravinden/f97ffb9930392af303f0a5f8e217aaa0'>D3.v4 Sunburst chart with line focus on over</a>

mit Licensed

Similar vizzes

Loading thumbnail…

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.

TThanaporn-sk
85% match
Loading thumbnail…

Sunburst Tutorial (d3 v4), Part 1

This sunburst chart visualizes hierarchical data using a ring-based layout, where each node is represented as an arc segment. Built with D3 version 4, the code uses `d3.partition()` to compute the angular and radial extents of each arc, `d3.hierarchy()` to process the JSON tree structure, and `d3.arc()` to generate the SVG path data. Colors are assigned via `d3.scaleOrdinal()` with the `schemeCategory20b` palette. The root node is hidden, and all other nodes are rendered as SVG paths with white strokes, drawing from a hardcoded JSON dataset.

TThanaporn-sk
85% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart displays hierarchical data as concentric arcs, where clicking a segment zooms in to show its children while the central circle returns to the root. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the SVG layout, with `transition.attrTween` animating arc positions and label transforms. The visualization loads the flare dataset via Observable’s stdlib and applies a rainbow color scale based on top-level categories.

Nnrcopeland
83% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A hierarchical sunburst chart displays hierarchical data as concentric rings of arcs, with colors assigned to top-level branches. Clicking a segment smoothly zooms and re-centers the visualization on that arc, expanding its children outward while fading unrelated elements. Built with D3 v5, it loads data via the Observable standard library and uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout as SVG. Interactive transitions rely on `transition.attrTween` and `d3.interpolate` to animate arc positions and label rotations.

SSumittiwari654
83% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

A hierarchical sunburst chart displays hierarchical data as concentric rings of arcs, with colors assigned to top-level branches. Clicking a segment smoothly zooms and re-centers the visualization on that arc, expanding its children outward while fading unrelated elements. Built with D3 v5, it loads data via the Observable standard library and uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute and render the layout as SVG. Interactive transitions rely on `transition.attrTween` and `d3.interpolate` to animate arc positions and label rotations.

SSumittiwari654
83% match
Loading thumbnail…

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
83% match
Loading thumbnail…

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
83% match
Loading thumbnail…

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
83% match