Skip to content

Layouts

.qp.facet

Split a table on distinct values of a given column, and display a separate visual for each subset of the data.

NOTE - The data will be subset in memory causing duplication when rendering.

Parameters:

Name Type Description
table table data to be visualized
x symbol column to split on
s fn partial specification (function from table to specification tree)

Returns:

Type Description
table specification table

Example: Load data and basic categorical plot

      t : ([]x: raze 5#enlist 10?`5; y: 50?5; z: raze 5#'til 10);

      .qp.facet[t; `x] .qp.plot[; `y`z; ::]

Image

.qp.grid

Layout independent specifications in a grid. If either is null, that dimension will be inferred. If both are null, a square grid will be used.

Parameters:

Name Type Description
grid long[] two longs specifying the dimensions of the grid.
speclist table[] list of specifications to layout

See Also: .qp.layout

Example: Load data and grid layout

     t : ([] date: til 1000; 
             start: sums?[1000?1.<0.5;-1;1]; 
             end: sums?[1000?1.<0.5;-1;1];
             volume: 10+1000?10; 
             sym: 1000?10?`5);

    .qp.grid[2 0N] (
        .qp.ribbon[t; `date; `start; `end; ::];
        .qp.histogram[t; `sym; ::];
        .qp.histogram[t; `volume; ::];
        .qp.histogram[t; `start; ::])

Image

.qp.horizontal

Layout independent specifications horizontally with the same weighting

Parameter:

Name Type Description
speclist table[] list of specifications to layout

See Also: .qp.layout

Example: Load data and horizontal layout

     t : ([] date: til 1000; 
             start: sums?[1000?1.<0.5;-1;1]; 
             end: sums?[1000?1.<0.5;-1;1];
             volume: 10+1000?10; 
             sym: 1000?10?`5);

    .qp.horizontal (
        .qp.ribbon[t; `date; `start; `end; ::];
        .qp.histogram[t; `sym; ::])

Image

.qp.layout

Layout independent specifications horizontally, vertically, etc

Vertical and horizontal weighted layouts support both fixed-width and canvas percentages.

Parameters:

Name Type Description
typ symbol one of `vert`hori`vert_w`hori_w`vert_p`hori_p`square
arg null | long[] argument to the layout (used as weights for `vert_w and `hori_w)
speclist table[] list of specifications to layout

Example: Load data and horizontal layout

     t : ([] date: til 1000; 
             start: sums?[1000?1.<0.5;-1;1]; 
             end: sums?[1000?1.<0.5;-1;1];
             volume: 10+1000?10; 
             sym: 1000?10?`5);

    .qp.layout[`hori; ::] (
        .qp.ribbon[t; `date; `start; `end; ::];
        .qp.histogram[t; `sym; ::])

Image

Example: Vertical layout

    .qp.layout[`vert; ::] (
        .qp.ribbon[t; `date; `start; `end; ::];
        .qp.histogram[t; `sym; ::])

Image

Example: Horizontal weighted layout

    .qp.layout[`hori_w; 2 1] (
        .qp.ribbon[t; `date; `start; `end; ::];
        .qp.histogram[t; `sym; ::])

Image

Example: Horizontal weighted layout with pixels

    .qp.layout[`hori_p; 150 0N] (
        .qp.ribbon[t; `date; `start; `end; ::];
        .qp.histogram[t; `sym; ::])

Image

Example: Vertical weighted layout

    .qp.layout[`vert_w; 2 1] (
        .qp.ribbon[t; `date; `start; `end; ::];
        .qp.histogram[t; `sym; ::])

Image

Example: Vertical weighted layout with pixels

    .qp.layout[`vert_p; 150 0N] (
        .qp.ribbon[t; `date; `start; `end; ::];
        .qp.histogram[t; `sym; ::])

Image

Example: Square layout

    .qp.layout[`square; ::] 
        {.qp.point[([]x:til 5; y:5?5); `x; `y; ::]} each til 5

Image

Example: Nested layouts

     .qp.layout[`vert; ::] (
         .qp.point[t; `start; `end; ::];
         .qp.layout[`hori; ::] (
             .qp.ribbon[t; `date; `start; `end; ::];
             .qp.histogram[t; `sym; ::]))

Image

Example: Add some titles

     .qp.layout[`vert; ::] (
         .qp.title["Point plot"]
             .qp.point[t; `start; `end; ::];
         .qp.layout[`hori; ::] (
             .qp.title["Ribbon plot"]
                 .qp.ribbon[t; `date; `start; `end; ::];
             .qp.title["Histogram"]
                 .qp.histogram[t; `sym; ::]))

Image

.qp.split

Stack multiple visuals with the same x and y scales on top of each other.

Parameter:

Name Type Description
speclist table[] list of specifications to stack

Returns:

Type Description
table specification table

Example: Basic split using different tables

     t1 : ([] x: 10 + til 20; y: 20?20; x2: 0.4+til 20);
     t2 : ([] x: til 40; 
             start: sums?[40?1.<0.5;-1;1]; 
             end: sums?[40?1.<0.5;-1;1];
             volume: 10+40?10; 
             sym: 40?10?`5);

     .qp.split (
         .qp.bar[t1; `x; `y; ::];
         .qp.line[t2; `x; `start; ::])

Image

Example: Customize

     .qp.split (
         .qp.bar[t1; `x; `y]
             .qp.s.geom[`alpha`fill`gap`colour!(0x9f; `steelblue; 0; `white)];
         .qp.line[t2; `x; `start]
             .qp.s.geom[`size`fill`alpha!(2; `firebrick; 0xaf)])

Image

Example: Diamonds carat and price

 diamonds: ([]color: "DEFGHIJ";
          carat: 0.6577948 0.6578667 0.7365385 0.7711902 0.9117991 1.026927 1.162137;
          price: 3169.954  3076.752  3724.886  3999.136  4486.669  5091.875 5323.818);

 .qp.title["Carat and Price by Color"]
 .qp.split (
     .qp.bar[diamonds; `color; `carat]
          .qp.s.aes[`alpha; `carat]
         ,.qp.s.scale[`alpha; .gg.scale.alpha[50;255]]
         ,.qp.s.geom[``fill!(::; `steelblue)];
     .qp.line[diamonds; `color; `price]
           .qp.s.geom[`size`fill!(2; `firebrick)])

Image

Example: Add a clean theme

 .qp.theme[.gg.theme.clean]
 .qp.title["Carat and Price by Color"]
 .qp.split (
     .qp.bar[diamonds; `color; `carat]
          .qp.s.aes[`alpha; `carat]
         ,.qp.s.scale[`alpha; .gg.scale.alpha[50;255]]
         ,.qp.s.geom[``fill!(::; `steelblue)];
     .qp.line[diamonds; `color; `price]
           .qp.s.geom[`size`fill!(2; `firebrick)])

Image

.qp.stack

Stack multiple visuals with the same x and y scales on top of each other.

Parameter:

Name Type Description
speclist table[] list of specifications to stack

Returns:

Type Description
table specification table

Example: Basic stack using same table

     t: ([]x: til 20; y: 20?20; x2: 0.4+til 20);

     .qp.stack (
         .qp.line[t; `x; `y; ::];
         .qp.point[t; `x; `y; ::])

Image

Example: Customize

     .qp.stack (
         .qp.line[t; `x; `y]
             .qp.s.geom[`size`fill!(3; `firebrick)];
         .qp.point[t; `x; `y]
             .qp.s.geom[`strokewidth`size`colour`fill!(2; 6; `firebrick; 0xf4f4f8)])

Image

Example: Add annotations

     .qp.stack (
         .qp.line[t; `x; `y]
             .qp.s.geom[`size`fill!(3; `firebrick)];
         .qp.point[t; `x; `y]
             .qp.s.geom[`strokewidth`size`colour`fill!(2; 6; `firebrick; 0xf4f4f8)];
         .qp.text[t; `x2; `y; `y; ::])

Image

Example: Overlay smoothers

     t:([]date:til 100; price:sums?[100?1.<0.5;-1;1]);

     .qp.stack (
         .qp.point[t; `date; `price; ::];
         .qp.smooth[t; `date; `price; ::; ::])

Image

Example: Stack multiple geometries to build custom charts

     n:10000;
     t:([]date:raze 200#'2015.01.01+til 50; price:sums?[n?1.<0.5;-1;1]);

     ohlc : 0!select open:first price, close:last price, high:max price, low:min price by date from t;
     gain : select from ohlc where close > open;
     loss : select from ohlc where not close > open;

     .qp.stack (
         .qp.segment[gain; `date; `high; `date; `low]
             .qp.s.geom[``fill!(::;`green)];
         .qp.segment[loss; `date; `high; `date; `low]
             .qp.s.geom[``fill!(::;`red)];

         .qp.interval[gain; `date; `open; `close]
             .qp.s.geom[``fill!(::; `green)];
         .qp.interval[loss; `date; `open; `close]
             .qp.s.geom[``fill!(::; `red)])

Image

.qp.stackAnd

.qp.stackWith

Using common x and y scales for every layer, create a stacked visual of every layer by applying the given table to every specification.

Useful for displaying stacks of a single table within a facet specification

Parameters:

Name Type Description
table table
speclist fn[] list of functions for table to specification

Returns:

Type Description
table specification table

Example: Load data and basic example

     t:([]x:til 45; y:45?45; z:45?5?`5);

     .qp.facet[t; `z; 
         .qp.stackWith[;
             (   .qp.line[;`x;`y;::]; 
                 .qp.point[;`x;`y;::])]]

Image

.qp.vertical

Layout independent specifications vertically with the same weighting

Parameter:

Name Type Description
speclist table[] list of specifications to layout

See Also: .qp.layout

Example: Load data and vertical layout

     t : ([] date: til 1000; 
             start: sums?[1000?1.<0.5;-1;1]; 
             end: sums?[1000?1.<0.5;-1;1];
             volume: 10+1000?10; 
             sym: 1000?10?`5);

    .qp.vertical (
        .qp.ribbon[t; `date; `start; `end; ::];
        .qp.histogram[t; `sym; ::])

Image