View composition
in Vega-Lite

Data 304

Four types of composition

  • layer
    • multiple views stacked on top of each other
  • concatenation (concat, hconcat, vconcat)
    • multiple views placed side-by-side
  • facet (wrap, row, or column)
    • side-by-side with different subsets of the data
  • repeat
    • parameterized side-by-side or layered with the whole data set each time

Layer and concat

The syntax for layer and concat is essentially the same, the only difference is how the views are combined.

Layer = on top of

{ ...,
   "layer": [{...}, {...}, ...]
}

Concat = next to

{ ...,
   "concat": [{...}, {...}, ...]  // or vconcat or hconcat
}

Example: concatenation

  • Note the placement of the legend. More about that later.

Facet and Repeat

Facet and repeat create small multiples.

  • For facets,
    • each view uses a different subset of the data,
    • but displays the data in the same way.
    • Layout is a grid of panels.
  • For repeats,
    • each view uses all of the data,
    • but we can display it in a different (parameterized) way.
    • Layout can be a grid of panels or a stack of layers.

Facet operator

To create a faceted view,

  • define how the data should be faceted in facet and
  • how each facet should be displayed in the spec.
{ ...,
  "facet": {
    ... // Facet definition
  },
  "spec": {
    ... 
  }, // Specification
  "columns": ...         // number of columns to use
}

The facet definition

  • use top level for faceting wrapping
{ ...,
  "facet": "field": ..., "columns": ..., ...
}
  • use “row” and “column” for grid faceting
{ ...,
  "facet": {
    "row: { "field": ..., ...},
    "column: { "field": ..., ...},
  }
}

See documentation for additional facet properties.

Barley example

{ ...,
  "columns": 3,
  "facet": {"field": "site", "type": "ordinal",
             "sort": {"op": "median", "field": "yield"},
             "header": null },
  "spec": {"mark": "point", ...}
}

Warning

Don’t forget the “spec” key.

Repeat

Basic format is similar to the facet operator.

{
  "repeat": {
    ... // Repeat definition
  },
  "spec": ... // Specification
}

Repeat definition

  • top level: “row”, “column”, “repeat” (wrapped), or “layer”
{ ...,
   "repeat": ["Horsepower", "Miles_per_Gallon", 
              "Acceleration", "Displacement"],
  "spec": {...}
}

Side-by-side repeats

Repeated layers (why?)

Repeated layers (how?)

{ ...,
  "repeat": {"layer": ["capacity", "demand"]},
  "spec": 
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": {"repeat": "layer"}, "type": "quantitative"},
        "color": {"datum": {"repeat": "layer"}}
      }
    }

Alternative solution

Reshape the data

Resolution

In multi-view graphics, we may need to resolve some differences among the scales and guides (axes and legends) of the different views.

Two resolution options: independent (each view does its own thing) or shared (coordinated among multiple views).

Resolution defaults

layer, r/c facet concat, repeat
position share independent
non-position share share
  • Currently, Vega-Lite does not support shared axes for concatenated views.

Resolve

Here’s the outline for a concat composition.

{  ...,
  "data": ...   // shared data (if any)
  ...,          // other shared properties
  "resolve" {...},
  "concat": [    // array of layer specs
    { ... },    // first layer spec
    { ... },    // second layer spec
    ...         // etc
  ]
}

Specifying the resolution

{ ...,
  "resolve": {
    // Scale resolution
    "scale": {
      CHANNEL: ...
    },
    // Axis resolution for position channels
    "axis": {
      POSITION_CHANNEL: ...
    },
    // Legend resolution for non-position channels
    "legend": {
      NON_POSITION_CHANNEL: ...
    }
  }
}

Example with resolve

{ ...,  
  "resolve": { "legend": {"size": "independent"} } 
}

Your turn

  • Change “legend” to “scale”. What is the difference between the two?
  • What happens if you remove the resolve section altogether?

Exercises

Put these in a quarto document, render them to HTML, and publish them on your website.

Create a graphic that uses concatenation.

Create a graphic that uses layers.

Create a graphic that uses layers and facets.

Create a graphic that uses repeat.