Skip to main content
SimilarExport ZIP
100%

Fork of D3 v5 Zoomable Sunburst with local json

✓ Published1🌍 Public
LLiml
Last edited Apr 5, 2024
Created on Apr 2, 2024

This fork of the D3 zoomable sunburst visualizes the hierarchical flare dataset, displaying nested categories and their values as concentric rings. Users can click arcs to zoom and explore the tree structure. The code uses D3 v5 libraries, including `d3.hierarchy`, `d3.partition`, and `d3.arc`, to generate the interactive graphic. It loads data from a local `flare.json` file and obtains arc color values from the included `styles.css`. The example demonstrates adapting an Observable notebook to a standalone vanilla JavaScript `index.html` file, using methods like `d3.select` and `d3.style` for styling and interaction.

AI-generated description

Mike Bostock's D3 Zoomable Sunburst example

<br></br> Ported from this Observable notebook for this forum thread. Many thanks to Bryan Gingechen who answered my question about the necessary steps to get from an (Observable) JavaScript notebook to a vanilla JavaScript index.html. He presented his solution on blockbuilder.org

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst using local json

This zoomable sunburst chart visualizes the hierarchical structure of the Flare data set, with each ring representing a level of the hierarchy and arc sizes proportional to node values. Clicking a ring zooms in on that subtree, animating the transition over 750 milliseconds. Built with D3 v6, the visualization uses the `d3.hierarchy` and `d3.partition` APIs to compute the layout, while `d3.arc` generates the sunburst paths. Color assignment uses `d3.scaleOrdinal` with a rainbow interpolator, and the dynamic data loading and label positioning rely on `d3.json` and the `transition.attrTween` API.

LLiml
92% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays hierarchical data from a flare.json dataset, with arcs sized by numeric values and colored by top-level category. Clicking a node zooms to focus on that subtree, using smooth 750-millisecond transitions. The code builds the hierarchy with `d3.hierarchy` and `d3.partition`, renders arcs via `d3.arc`, and animates using `transition.attrTween` with interpolated angular coordinates. Labels rotate radially, and a central circle resets the view when clicked.

LLiml
92% 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
91% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical flare dataset, using arc segments sized by value and colored by top-level category. Clicking a segment zooms into that subtree, with smooth animated transitions reshaping all arcs and labels. Built with D3 v5, the example uses `d3.hierarchy`, `d3.partition`, `d3.arc`, and `d3.interpolate` to drive the SVG rendering and 750ms transition animations. The data is loaded via the Observable standard library's `require` function.

JJonathan
91% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

A fork of the D3 v5 Zoomable Sunburst example, this visualization shows the hierarchical structure of the Flare dataset as an interactive, animated sunburst diagram. Clicking a node zooms into that branch, smoothly transitioning arcs and labels via `d3.transition` and `transition.attrTween`. It partitions the data with `d3.hierarchy`, `d3.partition`, and `d3.arc`, and colors arcs using `d3.scaleOrdinal` with a rainbow interpolator. The example loads data from the `@observablehq/flare` package, rendering with SVG in an HTML page.

SShdnShmli
91% match
Loading thumbnail…

Fork of Fork of D3 v5 Zoomable Sunburst

A zoomable sunburst visualization displays the hierarchical Flare dataset, showing the relative sizes of categories and subcategories through concentric ring segments. Clicking a node smoothly animates and re-scales the chart to focus on that branch, with the central circle resetting the view. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout and rendering, while `transition.attrTween` and `d3.interpolate` drive the animated transitions between zoom states. Color mapping uses `d3.scaleOrdinal` with `d3.interpolateRainbow`.

DDeclan Naughton
91% 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
91% match
Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from the Flare dataset, using an interactive radial layout where each ring segment represents a node’s value. The chart supports click-to-zoom transitions with smooth animations, implemented in D3 v5 with SVG rendering. The dataset is loaded from a CSV and nested into a hierarchy, with color encoding by branch depth. Users can explore the hierarchy by clicking arcs to zoom into nested levels, with the animation providing a smooth transition between views. The example is a port of Mike Bostock’s Observable notebook and serves as a practical reference for adapting D3 v5 to vanilla JavaScript.

Eerickdau@gmail.com
91% match