Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Kkylebot0
Last edited Nov 12, 2019
Created on Nov 12, 2019
Forked from HTML Starter

This example shows a hierarchical ring visualization of the flare dataset, where each arc segment represents a node and its size corresponds to either node count or the node’s `size` value. Animated transitions between these two partitions are triggered by clicks, with `d3.layout.partition` computing the layout and `d3.svg.arc` generating the radial shapes. The animation uses `transition.attrTween` paired with an interpolation function to smoothly adjust the arcs over 1.5 seconds.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive visualization uses a circular packing layout to display a hierarchical dataset from the file `flare.json`. The code employs D3.js v4, React, and SVG with animation, leveraging `d3.hierarchy` to aggregate leaf sizes and `d3.pack` to position circles. Clicking on a node triggers a smooth zoom transition via `d3.transition` and `interpolateZoom` to focus on that subtree, while text labels fade in and out based on parent relationships.

LLaowei42
83% match
Loading thumbnail…

D3 v5 Zoomable Sunburst - PD

This interactive zoomable sunburst visualization displays the hierarchical structure of the Flare dataset, with each ring segment sized by its value. Clicking an arc zooms into that node, using smooth animated transitions to refocus the layout. The code employs D3 v5’s `d3.hierarchy` and `d3.partition` for layout, `d3.arc` for path generation, and `transition.attrTween` to interpolate between states. Color is assigned via a rainbow scale, and labels rotate radially with `d3.interpolate`-based tweening. Data loads from the `@observablehq/flare` package through the Observable stdlib.

Vvalbauer
82% match
Loading thumbnail…

D3 v5

This zoomable sunburst chart visualizes the hierarchical Flare dataset, showing the size of each node through arc length and color-coded by top-level category. Clicking an arc zooms into that subtree, recomputing the partition layout and animating the transition. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, `d3.arc`, and `transition.attrTween` to smoothly interpolate arc geometry and label positions. The visualization renders as SVG with interactive animations, and data is loaded asynchronously from the Observable `@observablehq/flare` module.

Kkaga
82% match
Loading thumbnail…

Untitled

This interactive zoomable sunburst diagram visualizes the hierarchical structure of the Flare software package, using nested arcs sized by file metrics. Built with D3 v3 and SVG, it employs `d3.layout.partition` to compute the layout and `d3.svg.arc` for rendering. Clicking a node triggers `transition.attrTween` to smoothly zoom into that subtree, recalculating scales and updating text labels. The color scale `d3.scale.category20c` distinguishes parent categories, while labels rotate based on their angular position.

BBhavyatulasi
81% match
Loading thumbnail…

Fork of Untitled

This interactive visualization uses a circular packing layout to display the hierarchical structure of the flare dataset, with nested circles representing categories and their sub-items sized by a numeric value. Clicking a circle zooms into that node, smoothly animating the view through a tween on the interpolateZoom function while adjusting label visibility and opacity for the new focus. The SVG is rendered with D3 v4, using the d3.pack layout and d3.hierarchy API to compute circle positions, and a linear color scale with HSL interpolation to encode depth. The code is built as a React component, though the visualization itself relies on direct DOM manipulation through D3 selections.

LLaowei42
81% match
Loading thumbnail…

Untitled

This example shows a hierarchical clustering tree of the flare dataset, rendered as a radial layout with circular nodes and curved links. The visualization uses D3 v4’s `d3.stratify` to convert CSV data into a hierarchy and `d3.cluster` to compute the radial positions, projecting Cartesian coordinates with a custom `project` function. Nodes are drawn as SVG circles, with internal nodes filled darker and leaf labels rotated to follow the tree’s circumference. The code loads data from `flare.csv` and relies on SVG paths for the connecting links.

990561lkk
81% match
Loading thumbnail…

Untitled

This example shows a hierarchical clustering tree of the flare dataset, rendered as a radial layout with circular nodes and curved links. The visualization uses D3 v4’s `d3.stratify` to convert CSV data into a hierarchy and `d3.cluster` to compute the radial positions, projecting Cartesian coordinates with a custom `project` function. Nodes are drawn as SVG circles, with internal nodes filled darker and leaf labels rotated to follow the tree’s circumference. The code loads data from `flare.csv` and relies on SVG paths for the connecting links.

990561lkk
81% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualizes the structure of a hierarchical dataset, using nested arcs to represent the flare data from Observable’s `@observablehq/flare` library. Each level of the hierarchy is depicted as a ring, with arc segments sized proportionally to the data values. Clicking on a segment triggers an animated transition using `transition.attrTween` and `d3.interpolate` to smoothly re-center the view on that node, showing its children in greater detail. The visualization is rendered with SVG inside a circular partition layout, and the code uses `d3.hierarchy`, `d3.partition`, and `d3.scaleOrdinal` with the `interpolateRainbow` color scheme to distinguish top-level categories.

JJamie919
81% match