Hierarchy Chart

Early-access feature

This new chart type is released as early-access, if you would like to try it out, please get in touch with our Support team at support@cluvio.com.

The Hierarchy Chart visualizes hierarchical data structures using four layout options. This chart type helps you analyze nested relationships in your data through interactive drill-down capabilities and flexible visual representations.

The Hierarchy Chart supports multiple visualization types, multi-level hierarchies, interactive drill-down, flexible coloring strategies, and customizable layouts.

Chart Types

Packed Circles

Nested circles where size represents values and nesting shows hierarchy.

Sunburst

Radial layout with concentric rings representing hierarchy levels.

Treemap

Rectangular tiles where area represents values and nesting shows hierarchy.

Partition

Linear partitioning that can be oriented horizontally or vertically.

Data Requirements

Available for query results with at least 2 columns. Requires:

• At least 1 column for Hierarchy: For hierarchical grouping (typically from GROUP BY clauses)
• 1 column for Values: Numerical data for sizing elements (often aggregated with SQL functions)

Supports any combination of text, numerical, and date column types, and works with both aggregated and non-aggregated data.

Typical SQL Pattern

SELECT
  category,              -- First hierarchy level
  subcategory,          -- Second hierarchy level (optional)
  region,               -- Third hierarchy level (optional)
  SUM(sales_amount),    -- Value for sizing
  COUNT(*) as count     -- Additional metrics (optional)
FROM sales_data
GROUP BY category, subcategory, region
ORDER BY category, subcategory, region

Interactive Features

• Drill-Down Navigation: Click elements to zoom into that level of the hierarchy
• Auto-Drill: Automatically drills into root level for Packed Circles and Treemap
• Breadcrumb Navigation: Track your current position in the hierarchy
• Hover Effects: Visual feedback on interactive elements
• Zoom Controls: Navigate back up the hierarchy
• Responsive Layout: Adapts to different screen sizes
• Tooltip Information: Rich context on hover showing full hierarchical path

Configuration

General Settings

• Chart Type: Choose between Packed Circles, Sunburst, Treemap, or Partition
• Interactive: Enable/disable click-to-drill functionality
• Orientation: For Partition charts, select horizontal or vertical layout
• TreeMap Layout: For Treemap charts, choose layout algorithm (Squarify, Binary, Slice, Dice, Slice Dice)

Series Configuration

The chart uses two types of series:

• Hierarchy Series: Columns that define the hierarchical structure (multiple levels supported)
• Value Series: Column that provides the numerical values for sizing elements

Hierarchy Series

Configure multiple levels of hierarchy by adding columns in order from top-level (broadest) to bottom-level (most specific).

Options:

• Custom Name: Override column name for display
• Order: Drag to reorder hierarchy levels
• Remove: Remove hierarchy levels as needed

Value Series

Configure the metric used for sizing elements in the visualization.

Options:

• Custom Name: Override column name for display
• Data Field: Select which numerical column to use for sizing

Color Configuration

Color Strategies

Category Strategy: Colors elements based on top-level categories

• Consistent coloring across all levels for items in the same top-level category
• Ideal for maintaining visual grouping throughout drill-down navigation
• Uses dashboard color scheme or custom color mapping

Level Strategy: Colors elements based on their hierarchy level

• Each hierarchy level uses a different color
• Helpful for distinguishing between different levels of detail
• Provides clear visual separation between parent and child elements

Custom Color Mapping

Category Color Mapping:

• Assign specific colors to individual categories
• Override default color scheme for important categories
• Maintain brand consistency across visualizations

Level Color Mapping:

• Assign specific colors to hierarchy levels
• Control the color progression through levels
• Create meaningful visual hierarchies

All Level Color:

• Set custom color for the root "All" node
• Useful for branding or highlighting the total

Layout Options

Treemap Layout Algorithms

• Squarify (default): Optimizes for square-like rectangles, best readability
• Binary: Creates binary tree-like splits
• Slice: Divides space horizontally
• Dice: Divides space vertically
• Slice Dice: Alternates between slice and dice per level

Partition Orientation

• Horizontal: Elements flow from left to right
• Vertical: Elements flow from top to bottom

Customize Section

The Customize section provides advanced formatting and display options for fine-tuning your hierarchy chart appearance and behavior.

Value Formatting

Configure how numerical values are displayed throughout the chart:

Format Type:

• Number: Standard numerical formatting with precision control
• Money: Currency formatting with symbol and precision
• Percentage: Percentage display (automatically multiplies by 100)
• Bytes: File size formatting (KB, MB, GB, etc.)
• Text: Display values as-is without formatting

Number Formatting Options:

• Precision: Number of decimal places (0-10)
• Thousands Separator: Add commas for readability
• Abbreviation: Use k, M, B suffixes for large numbers
• Currency Symbol: Custom currency symbol for money format

Hierarchy Level Formatting

Control how hierarchy level labels are formatted and displayed:

Text Formatting:

• Format Type: Choose between text, number, date, or HTML formatting
• Date Formats: When using date fields, select from various date display formats
• Custom Display Names: Override default column names with meaningful labels

Label Display:

• Show/Hide Labels: Control label visibility on chart elements
• Label Positioning: Adjust label placement within chart elements
• Text Size: Control label font size for readability

Tooltip Customization

Configure the information displayed when hovering over chart elements:

Content Options:

• Show Hierarchy Path: Display full path from root to current element
• Show Values: Include formatted values in tooltips
• Custom Formatting: Apply specific formatting to tooltip content
• Series Names: Show/hide series names in tooltip headers

Interactivity Settings

Interactive Mode (default: enabled):

• Enabled: Full click-to-drill functionality with hover effects
• Disabled: Static visualization showing all levels simultaneously

Auto-Drill (Packed Circles & Treemap only):

• Automatically drills into the root level on chart load
• Provides immediate focus on actual data rather than the "All" container

Hide Top Level (Partition only):

• Enabled: Hides the root "All" container, starting visualization directly with first hierarchy level
• Disabled (default): Shows complete hierarchy including root "All" container
• Useful for cleaner partition displays when the root container adds no meaningful information
• When enabled, color palette utilization is optimized (no color reserved for hidden root)

Performance and Limitations

The chart efficiently handles hierarchical datasets with multiple levels and categories. Performance depends on:

• Hierarchy Depth: Deeper hierarchies require more processing
• Data Volume: Large numbers of leaf nodes impact rendering speed
• Chart Type: Some layouts (like Treemap) are more computationally intensive
• Interactivity: Non-interactive mode renders faster for static displays

Recommended Limits:

• Hierarchy Levels: 5-6 levels for optimal performance
• Leaf Nodes: Up to 1000 leaf nodes per level
• Categories per Level: Up to 50 categories per hierarchy level

Examples

Sales Performance by Region and Category

SELECT
  region,
  category,
  subcategory,
  SUM(sales_amount) as total_sales,
  COUNT(DISTINCT customer_id) as customer_count
FROM sales_data
WHERE sale_date >= '2024-01-01'
GROUP BY region, category, subcategory
ORDER BY region, category, subcategory

Configuration:

• Chart Type: Packed Circles or Treemap
• Hierarchy Series: Region → Category → Subcategory
• Value Series: Total Sales
• Color Strategy: Category (consistent colors per category across regions)
• Interactive: Enabled for drill-down exploration

Organizational Structure Analysis

SELECT
  department,
  team,
  role,
  COUNT(*) as employee_count,
  AVG(salary) as avg_salary
FROM employees
GROUP BY department, team, role
ORDER BY department, team, role

Configuration:

• Chart Type: Sunburst or Partition
• Hierarchy Series: Department → Team → Role
• Value Series: Employee Count
• Color Strategy: Level (different color per hierarchy level)
• Interactive: Enabled for organizational navigation

Website Traffic Hierarchy

SELECT
  traffic_source,
  campaign,
  landing_page,
  SUM(sessions) as total_sessions,
  SUM(conversions) as total_conversions
FROM web_analytics
WHERE date >= CURRENT_DATE - INTERVAL '30 days'
GROUP BY traffic_source, campaign, landing_page
ORDER BY traffic_source, campaign, landing_page

Configuration:

• Chart Type: Treemap with Squarify layout
• Hierarchy Series: Traffic Source → Campaign → Landing Page
• Value Series: Total Sessions
• Color Strategy: Category (consistent colors per traffic source)
• Custom Colors: Brand colors for key traffic sources

Budget Allocation Breakdown

SELECT
  cost_center,
  budget_category,
  line_item,
  SUM(allocated_amount) as budget_allocation,
  SUM(spent_amount) as actual_spend
FROM budget_data
WHERE fiscal_year = 2024
GROUP BY cost_center, budget_category, line_item
ORDER BY cost_center, budget_category, line_item

Configuration:

• Chart Type: Partition (horizontal orientation)
• Hierarchy Series: Cost Center → Budget Category → Line Item
• Value Series: Budget Allocation
• Color Strategy: Level with custom level colors
• Interactive: Enabled for budget drill-down analysis
• Hide Top Level: Enabled for cleaner budget category focus

Best Practices

Data Preparation:

• Include ORDER BY: Ensure consistent ordering for predictable visual layout
• Handle NULL Values: Use COALESCE() or ISNULL() to replace NULL hierarchy values
• Optimize Aggregation: Pre-aggregate data for better performance with large datasets
• Meaningful Hierarchies: Structure hierarchy levels from general to specific

Chart Configuration:

• Choose Appropriate Type: Packed Circles for proportional emphasis, Sunburst for radial data, Treemap for space efficiency, Partition for linear flow
• Color Strategy: Use Category for top-level grouping, Level for hierarchy depth differentiation
• Interactivity: Disable for static dashboards, enable for exploration
• Hide Top Level (Partition only): Enable when root container adds no value

Formatting and Customization:

• Value Format: Choose number, money, or percentage based on data type
• Precision: Use fewer decimals for large numbers
• Abbreviations: Use k, M, B for large datasets
• Label Formatting: Apply consistent date/number formatting across levels
• Tooltips: Include relevant context without overwhelming users

Performance:

• Limit Depth: Keep to 5-6 levels maximum
• Pre-filter Data: Use WHERE clauses to reduce dataset size
• Strategic Aggregation: Balance detail with performance
• Non-Interactive Mode: For large datasets without drill-down needs

User Experience:

• Hierarchy Order: Structure levels from broadest to most specific
• Clear Naming: Use descriptive names for hierarchy levels
• Color Consistency: Maintain consistent color meanings across charts
• Container Sizing: Ensure adequate space for data complexity
• Context: Include descriptive titles and legends

Visual Design:

• Color Contrast: Ensure sufficient contrast between adjacent colors
• Label Readability: Test labels remain readable across hierarchy levels
• Responsive: Verify appearance across screen sizes
• Brand Colors: Use custom colors for organizational alignment