Skip to content



Square space-filling tree map layout algorithm. The result is a table of rectangle positions. This can be joined to a table to display more information, or just visualized using a .qp.rect geometry as in the example below.

For a multi-level treemap, pass in the bounding rect of the next-level. See an example below for a two-level treemap.


  • [`x__`y__`x2__`y2__] bounding rect for a multi-level treemap (output of a previous run)
  • [`pad] whether to add a padding the each rectangle, false be default


Name Type Description
t table
x symbol Category/label column
y symbol Numeric column
o dict | null options


Name Type Description
<returns> table treemap rectangle positions keyed by their label

Example: Basic treemap

     t: ([]Sector: 10?`8;MarketValue: 10?100);

     positions: .qp.treemap.layout[t; `Sector; `MarketValue; ::];
      //=> Sector  | x__      y__      x2__     y2__      
      //=> --------| -----------------------------------
      //=> cjfagcid| 0        0        33.4608  53.14286
      //=> hjfkgael| 0        53.14286 33.4608  100     
      //=> ...

         .qp.s.aes[`fill; `Sector] ,


Example: Two-level treemap

     // Initial space fill of top-level hierarchy
     initialLayout: 0!.qp.treemap.layout[t;`Sector;`MarketValue;``pad!(::;1b)];

     // Divide each of the above with the next level 
     //   -- Just using random data for example
     subsectors: {([]Subsector: 50?`8;MarketValue: 50?100)} each til count t`Sector;
     positions: raze {
         @[;`Sector;:;x] 0!.qp.treemap.layout[y; `Subsector; `MarketValue; z]
         }'[t`Sector; subsectors; initialLayout];

     // Add back in the market value of each subsector
     positions: raze[subsectors] lj `Subsector xkey positions;

         .qp.s.geom[``colour`alpha!(::;0xffffff;0xae)] ,
         .qp.s.aes[`fill`alpha; `Sector`MarketValue]