Dokumentation (english)

Treemap

Visualize hierarchical data with nested rectangles

Use me when you have lots of categories and want to pack them efficiently like a puzzle. Bigger rectangles = bigger values, and everything fits together with no wasted space. I'm perfect for disk space (which folders are hogging storage?), budgets (where does the money go?), or any hierarchy where size matters. Think of me as organized chaos - maximum information in minimum space.

Overview

A treemap displays hierarchical data as nested rectangles, where each branch is represented by a rectangle that is subdivided into smaller rectangles representing sub-branches. The size of each rectangle is proportional to its value, making it easy to see patterns, compare proportions, and identify the largest contributors at a glance. Treemaps efficiently use space to show thousands of items simultaneously, making them ideal for visualizing complex hierarchical data.

Best used for:

  • Visualizing large hierarchical datasets efficiently
  • Disk space usage and storage analysis
  • Budget allocation and resource distribution
  • Product portfolio analysis and sales composition
  • Stock market data (market cap by sector and company)
  • Website analytics (traffic by source and page)

Common Use Cases

Business & Finance

  • Budget breakdown by category and subcategory
  • Revenue composition across products and regions
  • Cost analysis by department and expense type
  • Portfolio holdings by sector and security
  • Market share visualization by industry and company

Data Analysis & IT

  • Disk space usage by folders and files
  • Database storage by tables and schemas
  • Code repository size by directories and files
  • API usage by endpoint and client
  • Resource consumption by service and component

Product & Marketing

  • Sales by product category and SKU
  • Website traffic by source, medium, and page
  • Customer segments by demographics
  • Inventory distribution across locations
  • Ad spend by channel and campaign

Options

Path/Hierarchy

Required - Select hierarchy columns (outer to inner).

Choose multiple columns that define the hierarchical structure. The first column represents the top-level category, and each subsequent column represents a nested subcategory. For example: Category → Subcategory → Product.

Value/Size

Required - Define the size of each rectangle.

Column

Select the numerical column that determines rectangle size. Larger values create larger rectangles.

Aggregation Function

Choose how to aggregate values:

Options:

  • Sum - Total values (most common)
  • Mean - Average value
  • Count - Number of records
  • Median - Middle value
  • Min - Minimum value
  • Max - Maximum value

Color By (Optional)

Optional - Color rectangles by category.

When specified, rectangles are colored based on this column's values, making it easy to distinguish different types or add an additional dimension of analysis.

Settings

Hide Empty Values

Optional - Exclude rectangles with no data.

When enabled, rectangles with zero or null values are not displayed.

Hide Labels

Optional - Hide text labels on rectangles. Useful when there are many small rectangles or when you want a cleaner visualization. Hover tooltips still show information.

Show Values

Optional - Display numerical values on rectangles. When enabled, shows the actual value (not just label) on each rectangle.

Text Position

Optional - Where to position text labels.

Options:

  • Middle Center - Center of rectangle (default)
  • Top Center - Top of rectangle
  • Bottom Center - Bottom of rectangle

Understanding Treemap Components

Rectangle Hierarchy

  • Outer rectangles: Top-level categories
  • Inner nested rectangles: Subcategories and items
  • Borders: Define boundaries between categories
  • Nesting depth: Shows hierarchical levels

Size and Proportion

  • Rectangle area: Proportional to value
  • Larger rectangles: Higher values or more items
  • Smaller rectangles: Lower values or fewer items
  • Space efficiency: Every pixel represents data

Color Coding

  • By hierarchy: Parent categories use related colors
  • By custom column: Use "Color By" to add dimension
  • Intensity variations: Distinguish nested levels
  • Categorical vs continuous: Different color schemes

Layout Algorithm

  • Squarified: Default, creates more square-shaped rectangles
  • Slice and dice: Alternates horizontal and vertical splits
  • Optimal aspect ratio: Balances readability and space

Tips for Effective Treemaps

  1. Hierarchy Design:

    • Order columns from general to specific
    • Limit to 2-4 hierarchy levels for clarity
    • Ensure meaningful groupings at each level
    • Keep category names concise
  2. Value Selection:

    • Use positive values (negative values not well supported)
    • Ensure values are in same unit/scale
    • Consider logarithmic scale for wide ranges
    • Sum: Best for totals and cumulative data
    • Count: Good for frequency analysis
  3. Color Strategy:

    • Use "Color By" for additional insights
    • Keep color schemes consistent
    • Ensure sufficient contrast
    • Consider colorblind-friendly palettes
  4. Data Preparation:

    • Aggregate small items into "Other" if too many
    • Remove or filter zero values if not meaningful
    • Clean up category names for display
    • Verify hierarchy makes logical sense
  5. Label Visibility:

    • Hide labels if rectangles are too small
    • Use "Show Values" for important metrics
    • Rely on tooltips for detailed information
    • Consider text position for large rectangles
  6. Performance and Scale:

    • Treemaps handle thousands of items well
    • Consider filtering for very large datasets
    • Group minor categories to reduce clutter
    • Test interactivity with representative data

Treemap vs Other Visualizations

vs Sunburst Chart

  • Treemap: Rectangular, space-efficient, easier to compare sizes
  • Sunburst: Radial, visually appealing, better for showing levels
  • Choose Treemap: When space efficiency and size comparison matter
  • Choose Sunburst: When hierarchy visualization is more important

vs Bar Chart

  • Treemap: Shows hierarchy, multiple levels, space-efficient
  • Bar Chart: Linear, easy to compare, single level
  • Treemap advantage: Displays hierarchical relationships and many items

vs Pie Chart

  • Treemap: Better for many categories, shows hierarchy
  • Pie Chart: Simple part-to-whole, limited categories, no hierarchy
  • Treemap advantage: Handles 20+ categories effectively

Example Scenarios

Disk Space Usage

Folders → Subfolders → Files (size in GB)

Sales by Product

Product Category → Subcategory → SKU (total sales)

Budget Allocation

Department → Project → Expense Type (budget amount)

Website Traffic

Source → Medium → Landing Page (visitor count)

Market Cap Visualization

Sector → Industry → Company (market capitalization)

Interpreting Treemaps

Reading the Visualization

  1. Start with large rectangles: These are your biggest contributors
  2. Look within groups: See composition of each category
  3. Compare at same level: Rectangles side-by-side are comparable
  4. Follow colors: Trace related items across hierarchy

Common Patterns

  • Single dominant rectangle: One item significantly larger
  • Even distribution: Similar-sized rectangles, balanced allocation
  • Long tail: Few large items, many small items
  • Nested clusters: Clear hierarchical groupings

Key Questions Treemaps Answer

  • Which categories are largest?
  • How is total distributed across hierarchy?
  • What proportion does each item represent?
  • Which subcategories dominate within each category?

Troubleshooting

Issue: Too many small rectangles are unreadable

  • Solution: Group minor items into "Other", filter by minimum value, or use hierarchical drill-down to focus on sections.

Issue: Labels don't fit in small rectangles

  • Solution: Enable "Hide Labels" and rely on hover tooltips, or use interactive features to zoom into sections.

Issue: Can't distinguish colors

  • Solution: Use "Color By" strategically, ensure sufficient contrast, limit number of top-level categories, or use borders to separate rectangles.

Issue: Proportions don't look right

  • Solution: Verify value column is numeric and non-negative, check aggregation function, ensure data doesn't have outliers compressing others.

Issue: Hierarchy is confusing

  • Solution: Verify column order in Path/Hierarchy (general to specific), check for null values in hierarchy columns, ensure logical groupings.

Issue: Values don't sum up correctly

  • Solution: Check aggregation function (should usually be Sum), verify no duplicate records, ensure proper grouping at each level.

Issue: Rectangle borders are not visible

  • Solution: Increase border width in advanced settings, use contrasting colors, or reduce number of small rectangles.

Issue: Interactive features don't work

  • Solution: Ensure chart is fully rendered, check if click-to-zoom is enabled, verify browser compatibility.

Command Palette

Search for a command to run...

Schnellzugriffe
STRG + KSuche
STRG + DNachtmodus / Tagmodus
STRG + LSprache ändern

Software-Details
Kompiliert vor 1 Tag
Release: v4.0.0-production
Buildnummer: master@64a3463
Historie: 68 Items