Icicle Chart

Use me when you want to show hierarchies flowing like icicles hanging down (or growing up). I'm like a sunburst chart that's been unrolled into rectangles - perfect for file systems, organizational structures, or budget breakdowns where you want to see the hierarchy clearly from top to bottom. The width shows the value, and layers stack to show parent-child relationships.

Overview

An icicle chart displays hierarchical data using nested rectangles arranged in horizontal or vertical layers. Each layer represents a level in the hierarchy, with rectangle width proportional to the value it represents. Unlike treemaps that pack rectangles efficiently, icicle charts maintain the hierarchical structure visually, making it easy to trace paths from root to leaf.

Best used for:

• Visualizing file system structures and disk usage
• Showing organizational hierarchies with metrics
• Displaying budget breakdowns by category levels
• Exploring website navigation paths
• Analyzing categorical hierarchies with values
• Understanding nested category distributions

Common Use Cases

File Systems & Storage

• Disk space usage by folder and subfolder
• Code repository structure and file sizes
• Media library organization
• Document management systems
• Storage allocation analysis

Business & Finance

• Budget allocation by department and category
• Revenue breakdown by product hierarchy
• Cost analysis by division and team
• Organizational spending patterns
• Resource distribution visualization

Web Analytics

• User navigation paths through site sections
• Page view distribution by category
• Content hierarchy and engagement
• Traffic flow through site structure
• Conversion paths analysis

Options

Path/Hierarchy

Required - Select columns that define the hierarchy from root to leaf.

Choose multiple columns in order from top level (root) to bottom level (leaf). Each column represents one level in the hierarchy. The chart will display these as nested layers flowing downward (or sideways).

Accepts: CATEGORICAL or TEXT columns Order matters: First column is root, last is leaf

Example hierarchies:

• Storage: Drive → Folder → Subfolder → File
• Organization: Company → Department → Team → Employee
• Product: Category → Subcategory → Product → SKU
• Website: Section → Page Category → Individual Page

Values

Optional - Numerical column to determine rectangle size.

The value determines the width of each rectangle. Larger values create wider rectangles. If no value is provided, all items at the same level have equal width.

Aggregation options:

• Sum: Total of all values
• Count: Number of items
• Mean: Average value
• Min/Max: Smallest or largest value

Color By

Optional - Column to assign colors to rectangles.

Color rectangles by category or value to add another dimension of information. Categorical columns use distinct colors; numerical columns use color gradients.

Accepts: CATEGORICAL, TEXT, or NUMERICAL columns Default: Single color scheme

Icicle vs. Other Hierarchical Charts

Icicle Chart

Strengths:

• Clear hierarchical structure
• Easy to trace root-to-leaf paths
• Good for sequential relationships
• Space-efficient for deep hierarchies
• Easier to read labels on rectangles

Best for: File systems, navigation paths, sequential hierarchies

Treemap

Strengths:

• Maximum space efficiency
• Emphasizes proportions
• Compact for large datasets
• Good for flat comparisons

Best for: Size comparisons, disk usage, market share

Sunburst Chart

Strengths:

• Radial, visually striking
• Compact circular layout
• Natural for exploration
• Good for presentations

Best for: Interactive exploration, presentations, circular relationships

Tree Plot

Strengths:

• Shows exact connections
• Clear parent-child links
• Traditional tree structure
• Explicit relationships

Best for: Org charts, decision trees, taxonomies

Design Considerations

Orientation

Top-to-Bottom (Vertical)

• Most common and intuitive
• Root at top, flows downward like icicles
• Natural reading direction
• Good for hierarchical navigation

Left-to-Right (Horizontal)

• Better for wide screens
• Works well with long labels
• Similar to file system explorers
• Efficient horizontal space use

Color Strategy

Single Color Gradient

• Clean, professional look
• Distinguishes levels by shade
• Minimal visual complexity
• Focus on structure

Color by Category

• Shows groupings across levels
• Helps identify patterns
• Adds categorical information
• More visual complexity

Color by Value

• Highlights large/small values
• Shows metric distribution
• Quantitative emphasis
• Good for analysis

Label Management

• Short paths: Show all labels
• Deep hierarchies: Show only current level on hover
• Long names: Truncate with ellipsis
• Tooltips: Full paths and values on hover

Tips for Effective Icicle Charts

1. Hierarchy Depth:

   • Limit to 4-6 levels for readability
   • Deeper levels become too thin
   • Consider filtering to important branches
   • Use drill-down for very deep structures

2. Value Selection:

   • Use meaningful metrics (size, count, revenue)
   • Ensure values aggregate properly up the tree
   • Consider percentage vs. absolute values
   • Normalize if comparing different scales

3. Color Usage:

   • Use color purposefully, not decoratively
   • Ensure sufficient contrast for readability
   • Consider colorblind-friendly palettes
   • Match colors to user expectations (red = critical)

4. Interactivity:

   • Enable click to drill down
   • Show full path in tooltips
   • Allow collapsing/expanding branches
   • Support zoom for large hierarchies

5. Layout Choice:

   • Vertical for traditional hierarchies
   • Horizontal for file-system-like structures
   • Consider aspect ratio of display
   • Match user mental model

Common Patterns

Deep Hierarchy

Many levels flowing down - like folder structures or organizational charts.

Wide Hierarchy

Few levels with many children - like product catalogs or category trees.

Imbalanced Tree

Some branches much deeper than others - shows natural data asymmetry.

Value-Weighted

Rectangle widths vary greatly - emphasizes size differences.

Understanding the Visualization

Visual Elements

Rectangle Width: Represents the value or count Rectangle Position: Shows level in hierarchy Nested Layers: Parent-child relationships Color: Category, level, or value magnitude Path: Trace from top to bottom shows full hierarchy

Reading the Chart

1. Top level: Broadest categories (widest rectangles)
2. Middle levels: Subcategories and groups
3. Bottom level: Individual items or finest detail
4. Width comparison: Larger = higher value
5. Vertical position: Deeper = more specific

Example Scenarios

File System Explorer

Show disk usage by folder hierarchy. Quickly identify large folders consuming space.

Budget Breakdown

Visualize spending from high-level departments down to specific expense categories.

Product Catalog

Display product hierarchy with sales values determining width.

Organizational Structure

Show company structure with employee counts or budget allocations.

Troubleshooting

Issue: Too many levels make rectangles too thin

• Solution: Limit hierarchy depth to 5-6 levels. Filter to show only important branches. Use drill-down interaction. Increase chart height.

Issue: Labels are cut off or unreadable

• Solution: Increase rectangle minimum height. Use tooltips instead of inline labels. Truncate long names with ellipsis. Rotate text for narrow rectangles.

Issue: Hard to compare values across different branches

• Solution: Use consistent color scheme. Enable tooltips with exact values. Add percentage labels. Consider side-by-side comparison.

Issue: Hierarchy structure is unclear

• Solution: Use different colors per level. Add borders between levels. Increase spacing between layers. Make level transitions more obvious.

Issue: Too many small rectangles clutter the view

• Solution: Set minimum rectangle size threshold. Aggregate small items into "Other". Filter to top N items. Use progressive disclosure.

Issue: Can't see full hierarchy at once

• Solution: Increase chart size. Use drill-down approach. Implement zoom/pan. Consider horizontal layout for width. Split into multiple charts.

Best Practices

Data Preparation

• Ensure complete hierarchical paths
• Clean up inconsistent category names
• Remove circular references
• Aggregate values correctly at each level
• Handle null values appropriately

Visual Design

• Maintain consistent hierarchy direction
• Use adequate spacing between levels
• Ensure text readability
• Choose colors purposefully
• Balance detail with overview

User Experience

• Provide clear navigation
• Show context (breadcrumbs)
• Enable exploration (click, hover)
• Display helpful tooltips
• Support keyboard navigation

Performance

• Limit initial display depth
• Load additional levels on demand
• Cache rendered visualizations
• Optimize for mobile screens
• Test with realistic data volumes

When to Use Alternatives

Use Treemap instead:

• When space efficiency is priority
• For comparing sizes/proportions
• When hierarchy depth is less important
• For static, overview visualizations

Use Sunburst instead:

• For more visually striking presentations
• When circular metaphor fits domain
• For interactive exploration emphasis
• When space is circular/radial

Use Tree Plot instead:

• When connections matter more than values
• For explicit parent-child relationships
• When tree structure is primary
• For organizational charts

Use Sankey instead:

• When showing flows between levels
• For multi-path relationships
• When quantities flow through system
• For process visualization

Related Visualizations

After creating an icicle chart, consider:

1. Treemap - Alternative space-filling hierarchy
2. Sunburst Chart - Radial hierarchical view
3. Tree Plot - Traditional tree structure
4. Sankey Diagram - Flow between hierarchy levels
5. Bar Chart - Compare totals at one level