Transform hierarchical JSON data into beautiful, interactive icicle charts. Visualize tree structures, analyze proportional relationships, and explore multi‑level data with color‑coded rectangles and live hover details.
An icicle chart (also known as a hierarchical bar chart or flame chart) is a space‑filling visualization for hierarchical data. It displays a tree structure as a series of stacked horizontal bars, where each bar represents a node in the hierarchy. The width of each rectangle is proportional to the node's value, and the height corresponds to its depth in the tree. This layout makes it easy to compare proportions across categories at each level and to trace the path from root to leaf.
The name "icicle" comes from the visual resemblance to icicles hanging from a surface, with the root at the top and leaves at the bottom. Icicle charts are particularly effective for:
For each node n, its width is proportional to value(n) / value(parent).
The height of each level is uniform, allowing direct visual comparison across siblings.
The icicle chart layout algorithm is straightforward yet powerful. Starting from the root, the chart area is recursively partitioned. Each node is assigned a horizontal slice whose width is proportional to its value relative to its siblings. The vertical position corresponds to the node's depth in the tree, with the root at the top and leaves at the bottom.
This layout has several advantages over other hierarchical visualizations like treemaps or sunburst charts. Unlike treemaps, icicle charts preserve the vertical ordering of levels, making it easier to read the hierarchy from top to bottom. Unlike sunburst charts, icicle charts use rectangular geometry, which is more intuitive for comparing linear magnitudes and works better in contexts where polar coordinates are unfamiliar.
The tool supports interactive exploration: hover over any rectangle to see the node's name, value, and percentage of its parent. The color encoding helps distinguish between different branches or levels, with multiple color schemes available to suit different data types and presentation styles.
A retail company used the icicle chart generator to analyze its product portfolio. The root node represented total revenue, with children for each major category (Electronics, Clothing, Books, Home & Garden). Each category was further broken down into sub‑categories. The icicle chart immediately revealed that while Electronics contributed the largest share, its sub‑category "Accessories" had unexpectedly low revenue compared to "Laptops". This insight prompted a targeted marketing campaign for accessories, which increased sales by 22% in the following quarter.
The interactive nature of the tool allowed stakeholders to drill down into each branch during presentations, making data‑driven decisions more transparent and collaborative.
To get the most out of the icicle chart, structure your data with clear, meaningful names and ensure that leaf nodes have numeric values. Internal nodes can either have explicit value fields (which will be overridden by the sum of children) or omit the value entirely. The tool automatically aggregates values upward, so you only need to assign values to the leaves.
Best practices:
Color is a critical component of the icicle chart, helping viewers distinguish between different branches or hierarchical levels. The tool offers six color schemes, each suited to different analytical needs:
All color schemes now map colors based on the node's depth in the hierarchy, ensuring a consistent and intuitive relationship between color and level. This makes it easier to compare nodes at the same depth across different branches.
| Chart Type | Strengths | Weaknesses | Best Used For |
|---|---|---|---|
| Icicle Chart | Clear level‑by‑level comparison; intuitive linear reading | Can become tall with many levels; less space‑efficient than treemaps | Moderate‑depth hierarchies with emphasis on proportional analysis |
| Treemap | Space‑efficient; shows leaf‑level details well | Harder to read hierarchy order; can be visually cluttered | Large datasets where space is at a premium |
| Sunburst Chart | Circular layout is visually appealing; good for radial data | Angular comparison is less intuitive than linear; labels can overlap | Presentations and infographics where aesthetics matter |
| Tree Diagram | Explicit node‑link representation; shows relationships clearly | Does not convey quantitative proportions; can be sparse | Understanding structural relationships rather than values |
The icicle chart generator is built with pure JavaScript and Canvas, making it lightweight and dependency‑free. The layout algorithm uses a recursive traversal of the input tree, computing cumulative values and proportional widths. Mouse interaction is handled via canvas event listeners that perform hit‑testing against stored node rectangles.
The tool supports JSON input with a flexible schema: each node must have a name string, and either a value number (for leaves) or a children array (for internal nodes). If both are present, the children take precedence and the value is ignored. This design allows for partial data entry and automatic aggregation.
For advanced users, the chart can be extended by modifying the color scheme or adding custom rendering logic. The source code is structured to be readable and modifiable, with clear separation between data processing, layout, and rendering.
A well‑designed icicle chart tells a story. The top‑level bars give an overview of the main categories, while the lower levels reveal nuances and exceptions. By combining color, size, and interaction, you can guide your audience from the big picture down to specific details. This makes icicle charts a powerful tool for executive dashboards, academic presentations, and exploratory data analysis.
When presenting an icicle chart, consider the narrative arc: start with the overall distribution, then highlight the largest or smallest segments, and finally drill into the most interesting sub‑branches. The interactive hover feature supports this flow by providing instant context without overwhelming the viewer with labels.
name field. Leaf nodes should have a value field (numeric). Internal nodes should have a children array. Both fields can be present, but children takes precedence.
value for an internal node, it is ignored and replaced by the sum. This ensures consistency and prevents discrepancies.