Treemap

Overview

The treemap insight type is used to create treemap charts, visualizing hierarchical data through nested rectangles. Treemap insights are ideal for exploring part-to-whole relationships and comparing the size of different categories.

You can customize the colors, labels, hierarchy, and tiling to represent your data effectively.

Common Uses

• Hierarchical Data Visualization: Displaying nested data as rectangles.
• Part-to-Whole Relationships: Visualizing contributions of categories to the whole.
• Categorical Data: Showing nested categorical breakdowns.

Unexpected Behavior

The terminal values of a treemap must be unique. Values must be unique across all leaf nodes.

Check out the Attributes for the full set of configuration options

Examples

Common Configurations

Simple Treemap InsightTreemap Insight with Custom ColorsTreemap Insight with Custom Tiling

sources:
  - name: treemap-data-source
    type: duckdb
    database: target/seeds/treemap_data.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            labels,parents,values
            Total,,100
            A,Total,40
            B,Total,30
            C,Total,30
            D,A,10
            E,A,20
            F,B,10
models:
  - name: treemap-data
    source: ${ref(treemap-data-source)}
    sql: select * from model
insights:
  - name: Simple Treemap Insight
    props:
      type: treemap
      labels: ?{${ref(treemap-data).labels}}
      parents: ?{${ref(treemap-data).parents}}
      values: ?{"${ref(treemap-data).values}"}
      marker:
        colorscale: Blackbody
      textposition: "middle center"
      texttemplate: "<b>%{label}</b>"
      textfont:
        size: 12
charts:
  - name: Simple Treemap Chart
    insights:
      - ${ref(Simple Treemap Insight)}
    layout:
      title:
        text: Simple Treemap Chart<br><sub>Hierarchical Data Visualization</sub>

sources:
  - name: treemap-data-colors-source
    type: duckdb
    database: target/seeds/treemap_data_colors.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            labels,parents,values,colors
            Total,,100,#1f77b4
            A,Total,40,#ff7f0e
            B,Total,30,#2ca02c
            C,Total,30,#d62728
            D,A,10,#9467bd
            E,A,20,#8c564b
            F,B,10,#e377c2
models:
  - name: treemap-data-colors
    source: ${ref(treemap-data-colors-source)}
    sql: select * from model
insights:
  - name: Treemap Insight with Custom Colors
    props:
      type: treemap
      labels: ?{${ref(treemap-data-colors).labels}}
      parents: ?{${ref(treemap-data-colors).parents}}
      values: ?{"${ref(treemap-data-colors).values}"}
      marker:
        colors: ?{${ref(treemap-data-colors).colors}}
        line:
          color: black
charts:
  - name: Treemap Chart with Custom Colors
    insights:
      - ${ref(Treemap Insight with Custom Colors)}
    layout:
      title:
        text: Treemap Plot with Custom Colors<br><sub>Custom Colors for Each Category</sub>

sources:
  - name: treemap-data-tiling-source
    type: duckdb
    database: target/seeds/treemap_data_tiling.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            labels,parents,values
            Total,,100
            A,Total,40
            B,Total,30
            C,Total,30
            D,A,15
            E,A,25
            F,B,10
            G,B,20
            H,C,15
            I,C,15
models:
  - name: treemap-data-tiling
    source: ${ref(treemap-data-tiling-source)}
    sql: select * from model
insights:
  - name: Treemap Insight with Custom Tiling
    props:
      type: treemap
      labels: ?{${ref(treemap-data-tiling).labels}}
      parents: ?{${ref(treemap-data-tiling).parents}}
      values: ?{"${ref(treemap-data-tiling).values}"}
      tiling:
        packing: binary
        squarifyratio: 1.5
charts:
  - name: Treemap Chart with Custom Tiling
    insights:
      - ${ref(Treemap Insight with Custom Tiling)}
    layout:
      title:
        text: Treemap Plot with Custom Tiling<br><sub>Binary Packing and Custom Squarify Ratio</sub>