Hierarchical Bar Chart

100%

Hierarchical Bar Chart

✓ Published0🌍 Public

Last edited Feb 26, 2018

Created on Feb 26, 2018

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.

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>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/16ef3a4b5c454c94a245d47c921f0322'>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

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

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

test

This example shows the hierarchical structure of the Flare visualization toolkit as a circle-packing layout, with nested circles representing the file system’s categories and leaf nodes sized by their associated data values. Hovering over any circle highlights its entire ancestor chain. The visualization is rendered in SVG using D3 v5’s `d3.stratify` to build the hierarchy from CSV data, `d3.pack` to compute circle positions and radii, and `d3.scaleSequential` with the magma color interpolator to encode depth.

IIndira120

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

77% match