Dendrogram + Grouped Horizontal Bar Chart

100%

Dendrogram + Grouped Horizontal Bar Chart

✓ Published0🌍 Public

Last edited Oct 9, 2018

Created on Oct 9, 2018

A hierarchical dendrogram combines with a grouped horizontal bar chart to display nested skill categories and proficiency levels. Each leaf node is paired with an animated, color-coded bar whose length encodes a numeric skill value (0–5), while internal nodes show category labels. The visualization uses D3 v4 with SVG and a custom tree layout, positioning bars adjacent to leaf nodes and applying distinct colors per skill. Subtle hover-free transitions animate bar widths on load, and dashed grid lines plus a custom top axis with qualitative labels ("Basic 1.0" through "Guru 5.0") enhance readability. The design adapts Mike Bostock's dendrogram concept by integrating grouped horizontal bars directly at the leaf tips, preserving hierarchical clarity while adding quantitative detail.

AI-generated description

Dendrogram + Grouped Horizontal Bar Chart, based on and inspirited by Mike Bostock's brilliant Dendrogram.

At first, I was hunting for a skills bar chart for my portfolio site, then I saw Mike's Dendrogram. I was thinking if there was a traditional bar chart attached to the pointers of Dendrogram, the new combination gonna have the best of both charts with very limited separation. Then this happens, with a little bit animation and custom colors. I also commented on both Mike's and mine codes.

Original Dendrogram: http://bl.ocks.org/mbostock/4063570

For better visualization, visit my portfolio at: http://www.saturnringstation.com/portfolio/

forked from <a href='http://bl.ocks.org/bumbeishvili/'>bumbeishvili</a>'s block: <a href='http://bl.ocks.org/bumbeishvili/ccaad3234864a1cc36b17c4538882b2c'>Dendrogram + Grouped Horizontal Bar Chart</a>

forked from <a href='http://bl.ocks.org/willzjc/'>willzjc</a>'s block: <a href='http://bl.ocks.org/willzjc/1da814bcc3947e99529635ad6c094825'>Dendrogram + Grouped Horizontal Bar Chart</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Dendrogram + Grouped Horizontal Bar Chart

This visualization combines a dendrogram with grouped horizontal bar charts, mapping skill categories and subcategories to hierarchical tree branches while bar lengths indicate proficiency levels. The chart is rendered in SVG with a custom clustering layout and stratify function, using animated transitions to grow the bars when the page loads. Leaf nodes display colored rectangles with labels, while internal nodes show category names. The x-axis uses tick formatting to convert numeric values into experience labels like "Basic" through "Guru." The data comes from a CSV file containing skill names, numerical values, and color assignments, with the visualization based on Mike Bostock’s original dendrogram example.

663anp3ca

97% match

Loading thumbnail…

Dendrogram + Grouped Horizontal Bar Chart

This visualization combines a dendrogram with grouped horizontal bar charts to display hierarchical skill data, based on Mike Bostock's dendrogram concept. The layout positions a cluster dendrogram on the left, with each leaf node connected to a horizontal bar extending to the right, colored according to per-skill values from the accompanying CSV data. Node labels are placed inside or beside the bars, while internal nodes show category names. The chart includes a custom separation function for the tree layout, an x-axis with descriptive skill-level labels (e.g., “Basic 1.0” to “Guru 5.0”), dashed gridlines, and drop shadows. Bars animate their width on load using D3 transitions. The visualization is rendered using D3 v4 with SVG, and combines hierarchical relationships with quantitative comparison in a single view. Source code is available in the gist and was adapted from earlier blocks by willzjc, bumbeishvili, and Mike Bostock.

663anp3ca

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

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

82% match

Loading thumbnail…

D3 testing2

A D3.js bar chart visualizes a single student’s self-assessed skills across five categories: programming, computers, art, communication, and collaboration. Each category is rendered as a fixed-width rectangle, with bar heights scaled by multiplying the numerical skill value by ten. The chart uses SVG rectangles appended directly to a hardcoded, static data object, with no axes or scales defined. Interactive tooltips appear on hover, implemented via D3 mouseover, mousemove, and mouseleave event handlers that dynamically update an HTML div’s opacity and position.

PPere Ginebra Solanellas

77% match

Loading thumbnail…

Untitled

An interactive dendrogram displays a hierarchical breakdown of service quality indicators, with colored horizontal bars representing leaf node values. The visualization uses D3.js v4, specifically `d3.cluster()` for tree layout, `d3.stratify()` for hierarchical data structuring, and `d3.axisTop()` with custom tick formatting. Bars animate in width via SVG `transition()`, while node circles and labels are styled with CSS. Data comes from an embedded CSV file containing indicator IDs and corresponding values.

Rriccardost

76% match

Loading thumbnail…

Cluster Dendrogram II

This cluster dendrogram visualizes a hierarchical dataset from a flare.json file, displaying nodes as circles connected by curved links. The layout uses d3.layout.cluster to position nodes, with SVG paths generated using cubic Bézier curves to create distinctive non-intersecting links. Node styling includes white circles with steelblue strokes and text labels, while the entire chart renders at a fixed 960 by 2200 pixel size within an SVG container.

Mmbostock

74% match

Loading thumbnail…

Grouped Bar Chart

This example presents a grouped bar chart with 20 samples across 4 series, rendered in SVG using D3 v3. The chart’s bars are positioned by two ordinal scales, `x0` for categories and `x1` for series, with a linear `y` scale mapping values from 0 to 1. Each series is assigned a distinct color via `d3.scale.category10`. Data is randomly generated, and axes are drawn using `d3.svg.axis`. The code emphasizes scale composition and grouped layouts rather than interactivity.

Mmbostock

74% match