Zoomable radial chart with color scales

100%

Zoomable radial chart with color scales

✓ Published0🌍 Public

Last edited Mar 1, 2017

Created on Mar 1, 2017

A zoomable radial chart displays hierarchical tornado data using nested color scales derived from a root palette, with each parent node’s hue darkened and brightened for its children. Users click arcs to zoom into deeper levels, leveraging a D3 partition layout with linear angular and square-root radial scales. The visualization is rendered as animated SVG, built with d3.v3 and the `d3.layout.partition` API, and loads data from an external JavaScript dataset.

AI-generated description

Zoomable radial chart with color scales and nesting. Based on Zoomable Sunburst.

forked from <a href='http://bl.ocks.org/sathomas/'>sathomas</a>'s block: <a href='http://bl.ocks.org/sathomas/4a3b74228d9cb11eb486'>Zoomable radial chart with color scales</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

81% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This D3 v5 zoomable sunburst visualizes a hierarchical dataset, where clicking on a ring segment zooms in to reveal that branch as the new root. The visualization uses a radial partition layout, with arc segments representing nodes and their sizes proportional to values. Implemented with D3’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, it renders as an interactive SVG with smooth 750-millisecond transitions. Node colors derive from a quantized rainbow scale, and labels rotate along the arcs, with click handlers on parent circles enabling navigation. The data originates from the Observable “flare” library, which is loaded asynchronously.

MMohammad Jabr

79% match

Loading thumbnail…

Zoomable Pie Chart

This zoomable pie chart allows users to explore a hierarchical dataset by clicking on arcs to zoom into nested levels, and clicking the center circle to zoom out. The visualization uses D3 v4's partition layout, with arcs representing nested data values from a JSON file. The chart is rendered using scalable vector graphics (SVG) with animated transitions, employing `d3.scaleLinear` for angular scaling and `d3.scaleSqrt` for radial sizing. Interactions trigger custom tween functions to smoothly interpolate arc geometries.

SSpaceActuary

79% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes hierarchical data from a flare.csv file, showing the relative sizes of data tables and their parent-child relationships. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the radial layout as SVG paths. Clicking a segment triggers an animated transition that re-centers the view, using `d3.interpolate` and `transition.attrTween` to smoothly morph the arcs and labels over 750 milliseconds, with color encoding and opacity distinguishing hierarchy levels.

Aarvind75

79% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from a JSON file using a radial partition layout. Clicking any arc smoothly zooms into that subtree, while clicking the center circle returns to the root. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, with color mapping via `d3.scaleOrdinal` and animation through `transition.attrTween`. SVG rendering with interactive transitions highlights the relationships between nested data categories.

Llucaele

78% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset using D3 v5. The visualization partitions data into a radial layout, with arcs representing nodes and their sizes proportional to values. Clicking an arc transitions the view to zoom into that node, re-scaling the partition layout and updating arc paths and labels. The code uses d3.hierarchy, d3.partition, and d3.arc for the layout and rendering, with d3.transition and attrTween animating the zoom. Colors are assigned via d3.scaleOrdinal with an interpolateRainbow range, and SVG text labels rotate and reposition dynamically.

SShdnShmli

78% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

An interactive zoomable sunburst chart visualizes the hierarchical structure of the Flare data set. The radial layout partitions the root node into concentric rings, with arc segments representing each category and subcategory; the color of each leaf is inherited from its top-level group. Clicking on an arc zooms into that subtree, expanding its children while hiding others. Built with D3 v5, the visualization uses `d3.partition` for layout, `d3.arc` for path generation, and animated transitions via `transition.attrTween` to smoothly update arc shapes and labels.

MMohammad Jabr

78% match

Loading thumbnail…

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

78% match