Hierarchical Bar Chart

100%

Hierarchical Bar Chart

✓ Published0🌍 Public

Last edited Jun 14, 2018

Created on Jun 14, 2018

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.

AI-generated description

This bar chart visualizes hierarchical data using D3. Each blue bar represents a folder, whose length encodes the total size of all files in that folder (and all subfolders). Clicking on a bar dives into that folder, while clicking on the background bubbles back up to the parent folder. The effect is similar to a zoomable partition layout, though in a more conventional display.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1283663'>Hierarchical Bar Chart</a>

gpl-3.0 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

92% 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

91% match

Loading thumbnail…

Hierarchical Bar Chart

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.

XXenos Panagiotis

86% 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

79% 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…

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

78% match

Loading thumbnail…

pack layout

This visualization uses a packed circle layout to display the hierarchical structure of the Flare codebase. Each circle represents a node in the tree, with circle size encoding the node's numeric value and color mapping to depth in the hierarchy. The visualization is built using D3 v4, leveraging the `d3.stratify` and `d3.pack` APIs. The data comes from a CSV file containing file IDs and values, and interactive hover highlighting is implemented via SVG elements and mouse events.

BBrunoDumas

78% match