Hierarchical Bar Chart

100%

Hierarchical Bar Chart

✓ Published0🌍 Public

Last edited Mar 10, 2017

Created on Mar 10, 2017

This example shows a hierarchical bar chart of the flare dataset, where each blue bar represents a folder and its length encodes the total size of contained files. Clicking a bar zooms into that folder, while clicking the background navigates back to the parent. The d3.layout.partition computes node values, while d3.svg.axis scales the x-axis. Transitions animate bars and text as users drill down, using SVG rects and opacity changes.

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

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

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

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

83% match

Loading thumbnail…

Hierarchical Horizontal Bar Chart

This example presents a hierarchical horizontal bar chart that visualizes nested data as a drill-down navigation. Users click a bar to descend into its children or click the background to return to the parent level, with bars and text animating through position and opacity transitions. The visualization is built with D3 v3, using `d3.layout.partition` to compute the tree layout, `d3.svg.axis` for the scale, and `transition.attr` tweening to animate changes. It loads JSON data from a remote GitHub Gist and uses SVG for rendering, with color distinguishing parent from child nodes.

SStuart Sessions

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

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