Skip to main content
SimilarExport ZIP
100%

Hierarchical Bar Chart

✓ Published1🌍 Public
XXenos Panagiotis
Last edited May 21, 2020
Created on May 20, 2020

This visualization shows a hierarchical bar chart using the Flare data, where users can click blue bars to drill down into subcategories or click the background to navigate back up. The chart renders with SVG and uses animations to smoothly transition between hierarchy levels. The implementation relies on the D3.js library, specifically using the `d3.create` method for SVG creation, `transition` for sequenced animations, and `xAxis` and `yAxis` for scale updates. Bars are colored to distinguish parent nodes from leaf nodes, with fill opacity fading during transitions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Hierarchical Bar Chart

This hierarchical bar chart shows the file structure of the Flare visualization toolkit, with each blue bar representing a folder. A bar’s length encodes the total size of all contained files and subfolders. Clicking a bar drills down into that folder, while clicking the background navigates back up. Built with D3 v3, the visualization uses `d3.layout.partition` to compute the hierarchy and animated SVG transitions to smoothly update the bars and x-axis when navigating.

Mmbostock
89% match
Loading thumbnail…

Hierarchical Bar Chart

This example shows a hierarchical bar chart exploring a JSON dataset of the Flare visualization library’s file sizes. Each blue bar encodes the total bytes for a folder and its subfolders, with animation on click. Clicking a bar drills down into that folder, while clicking the background returns to the parent. The implementation relies on `d3.layout.partition` for recursion, an ordinal color scale for parent/child bars, and `select.transition` with staggered delays to animate the entering and exiting bars along the x-axis.

LLucioAmorim
88% match
Loading thumbnail…

Hierarchical Bar Chart

This hierarchical bar chart visualizes the flare dataset, where each bar encodes the total size of its files and subfolders. Clicking a bar zooms into that folder, updating the x-axis scale and animating bars in and out with smooth transitions. The visualization uses D3’s partition layout and SVG rendering, with blue bars for folders and gray for files, and is adapted from Mike Bostock’s block.

GGerardoFurtado
86% match
Loading thumbnail…

Hierarchical List

This example visualizes a hierarchical dataset as an animated, collapsible tree, showing parent-child relationships across multiple levels of the Flare library’s structure. It uses D3.js v5 with SVG rendering, employing the `d3.hierarchy()` layout to compute node positions and `d3.tree()` to arrange them. The visualization draws curved link paths (`d3.linkHorizontal()`) and circular node markers, with text labels for each element. A smooth transition animates the tree’s expansion and collapse when a node is clicked, using `transition.duration()` and `transition.attr()` to update positions. The data is embedded as a JavaScript object in the code, with leaf nodes carrying a `size` attribute.

EEE2dev
82% match
Loading thumbnail…

Dendrogram + Grouped Horizontal Bar Chart

This example combines an interactive zoomable sunburst (a radial partition layout) with a grouped horizontal bar chart, visualizing hierarchical data from `flare.json`. The visualization uses a D3 v3 partition layout to encode hierarchy as concentric arcs, with color derived from the top-level category and luminance scaled by aggregated value. Clicking a node zooms into that branch, smoothly transitioning arcs via tweening; the center circle returns to the root. The chart is implemented with SVG and supports animated zoom in/out, with a tooltip on the center circle for zoom-out. Data is loaded from an external JSON file (flare.json) containing hierarchical size values.

663anp3ca
81% match
Loading thumbnail…

Dendrogram + Grouped Horizontal Bar Chart

This example combines an interactive zoomable sunburst (partition layout) with a grouped horizontal bar chart. The visualization encodes hierarchical data from flare.json using an SVG-based circular partition layout, where each node’s arc size reflects its aggregated value. The root circle supports click-to-zoom: clicking a deeper arc zooms in, and clicking the center zooms out, with smooth transitions. Color is mapped from the top-level category using a categorical scale, while lightness encodes value magnitude via a sqrt scale. The animation uses D3's transition and tween functions to interpolate arc geometry during zooming, providing an animated drill-down/up experience. The chart is built with D3 v3 and rendered entirely in SVG, and the code is available under the MIT license.

663anp3ca
78% 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
78% match
Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst chart visualizes the hierarchical structure of the Flare data library, using D3 v5’s `d3.arc`, `d3.partition`, and `d3.hierarchy` APIs. The root hierarchy is loaded via an ObservableHQ library (`@observablehq/stdlib`), and each ring segment is colored by top-level category with proportional arc lengths. Clicking a node smoothly zooms the chart via `transition.attrTween` and `d3.interpolate`, animating both arc geometry and label rotation. The SVG rendering includes hover tooltips showing the full path and numeric value for each leaf.

Ddrmurugesh
77% match