Pileup

The "pileup" transform computes a piled up layout for overlapping segments. The computed lane can be used to position the segments in a visualization. The segments must be sorted by their start coordinates before passing them to the pileup transform.

Parameters

as

Type: string

The output field name for the computed lane.

Default: "lane".

end Required

Type: string (field name)

The field representing the end coordinate of the segment (exclusive).

preference

Type: string (field name)

An optional field indicating the preferred lane. Use together with the preferredOrder property.

preferredOrder

Type: string[] | number[] | boolean[]

The order of the lane preferences. The first element contains the value that should place the segment on the first lane and so forth. If the preferred lane is occupied, the first available lane is taken.

spacing

Type: number

The spacing between adjacent segments on the same lane in coordinate units.

Default: 1.

start Required

Type: string (field name)

The field representing the start coordinate of the segment (inclusive).

Example

Given the following data:

start	end
0	4
1	3
2	6
4	8

... and configuration:

{
  "type": "pileup",
  "start": "start",
  "end": "end",
  "as": "lane"
}

A new field is added:

start	end	lane
0	4	0
1	3	1
2	6	2
4	8	1

Interactive example

The following example demonstrates both "coverage" and "pileup" transforms.

{
  "data": {
    "sequence": {
      "start": 1,
      "stop": 100,
      "as": "start"
    }
  },
  "transform": [
    {
      "type": "formula",
      "expr": "datum.start + ceil(random() * 20)",
      "as": "end"
    }
  ],
  "resolve": { "scale": { "x": "shared" } },
  "vconcat": [
    {
      "transform": [
        {
          "type": "coverage",
          "start": "start",
          "end": "end",
          "as": "coverage"
        }
      ],
      "mark": "rect",
      "encoding": {
        "x": { "field": "start", "type": "index" },
        "x2": { "field": "end" },
        "y": { "field": "coverage", "type": "quantitative" }
      }
    },
    {
      "transform": [
        {
          "type": "pileup",
          "start": "start",
          "end": "end",
          "as": "lane"
        }
      ],
      "mark": "rect",
      "encoding": {
        "x": { "field": "start", "type": "index" },
        "x2": { "field": "end" },
        "y": {
          "field": "lane",
          "type": "index",
          "scale": {
            "padding": 0.2,
            "reverse": true,
            "zoom": false
          }
        }
      }
    }
  ]
}