Untitled

100%

✓ Published0🌍 Public

Last edited Jun 17, 2022

Created on Jun 17, 2022

A zoomable partition layout depicts the hierarchical flare dataset, with each node’s slice sized by its aggregated value. Clicking a slice smoothly refocuses the view on that subtree, while the top-level view restores on canvas click. D3 v4’s `d3.partition`, `d3.hierarchy`, and `d3.arc` render SVG paths, with node labels placed along curved arcs via `textPath`. The zoom animation uses `transition.attrTween` and interpolated `d3.scaleLinear` and `d3.scaleSqrt` domains. Color comes from `d3.scaleOrdinal` with `d3.schemeCategory20`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Untitled

This interactive zoomable icicle chart visualizes the hierarchical Flare-2 dataset through animated rectangular partitions. Users click nodes to zoom, with smooth SVG transitions recalibrating the layout to focus on the selected subtree. Built with React and D3’s `partition` layout, it uses `scaleOrdinal` and `interpolateRainbow` for color encoding, while `transition.attr` animates rectangle and text positions. The visualization loads JSON data via `d3.json` and renders entirely in SVG, with tooltips showing ancestor paths and numerical values.

BBen McCarty

84% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical flare dataset, encoding each node’s value as the arc’s angular width. Clicking a slice zooms into that subtree, dynamically rescaling the partition layout and re-centering the view. Built with D3 v5 and SVG, the example uses `d3.partition`, `d3.hierarchy`, and `d3.interpolate` to animate transitions, reading hierarchical data from a CSV file with id and value fields. The rendered output includes a breadcrumb trail showing the current path.

Tthanhtrant219

83% match

Loading thumbnail…

Untitled

This interactive zoombox visualization displays a hierarchical partition of biodiversity data loaded from a JSON file, breaking down the tree of life from “Life” down to individual butterfly species. The visualization uses `d3.layout.partition` to compute the rectangular layout, with `d3.scale.linear` for positioning and `d3.scale.category20c` for coloring nodes. Clicking a rectangle triggers a smooth transition using `rect.transition()`, which animates the x and y scales to zoom into that node’s domain, revealing deeper taxonomic levels. The SVG rendering is styled with white strokes between rectangles to distinguish partitions.

Aarun-subba

83% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This fork of the D3 v5 Zoomable Sunburst visualizes hierarchical data as an interactive radial partition layout. Clicking a node zooms the view to focus on that node’s subtree, with smooth animated transitions between levels. The code uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, while `transition.attrTween` animates arc paths and labels. Data is loaded from the Observable `@observablehq/flare` dataset, rendered as SVG paths with color-coded top-level branches and interactive click handlers.

CChase Hall

83% match

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

82% match

Loading thumbnail…

Untitled

A zoomable sunburst diagram visualizes hierarchical vulnerability data from a JSON file, with arc segments sized by a numeric value and colored by category. Clicking an arc transitions the chart to focus on that subtree, re-scaling the layout and fading text labels in and out. The visualization uses D3 v3’s `d3.layout.partition`, `d3.svg.arc`, and `transition.attrTween` to animate the zoom, rendering with SVG and applying a category color scale.

Ggitdhtuts

82% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from the Observable flare dataset through a radial partition layout. The visualization uses D3 v5’s `d3.arc`, `d3.partition`, and `d3.hierarchy` APIs to render SVG paths and labels. Clicking on a partition smoothly zooms into that node using `transition.attrTween` with interpolated arc angles, while a central circle resets the view. Colors are assigned via `d3.scaleOrdinal` with an interpolated rainbow palette, and labels rotate to remain readable throughout the animation.

EElouiza Hamla

82% match

Loading thumbnail…

Bilevel Partition

A zoomable sunburst visualizes hierarchical data from the Flare visualization library. The root node sits at the center, with nested arcs extending outward; each arc’s angle encodes its value, and color indicates the parent category. Clicking an arc zooms in on that subtree, while clicking the center circle returns to the previous level. The example uses d3.layout.partition, d3.svg.arc, and d3.transition with arcTween to animate path changes, rendering with SVG.

Mmbostock

82% match