How Can I Concatenate Views in Vega-Lite?

Are you looking to show multiple visualizations in a single view? Whether you want them side-by-side or stacked on top of each other, Vega-Lite makes this a breeze with its concatenation operators.

The Basics: What Are Concatenation Operators?

Vega-Lite provides three main concatenation operators to help you layout multiple views:

• hconcat for horizontal concatenation
• vconcat for vertical concatenation
• concat for a more flexible, wrappable layout

If your views differ only by the field used in encoding, consider using the repeat operator instead.

Horizontal Concatenation

What Is It?

Horizontal concatenation places multiple views side-by-side in a row. This is done using the "hconcat" property.

How Do I Use It?

Specify the "hconcat" property as an array of your view specifications.

{
  "hconcat": [
    ...  // Your view specifications go here
  ],
  ...
}

Example

Here's a simple example to illustrate how horizontal concatenation works:

{
  "hconcat": [
    {
      "mark": "point",
      "encoding": { "x": {"field": "A"}, "y": {"field": "B"} }
    },
    {
      "mark": "bar",
      "encoding": { "x": {"field": "C"}, "y": {"field": "D"} }
    }
  ]
}

This will place a point chart next to a bar chart. Pretty simple, right?

Vertical Concatenation

What Is It?

Vertical concatenation stacks multiple views on top of each other in a column. This is done using the "vconcat" property.

How Do I Use It?

Specify the "vconcat" property as an array of your view specifications.

{
  "vconcat": [
    ...  // Your view specifications go here
  ],
  ...
}

Example

Here's an example of vertical concatenation:

{
  "vconcat": [
    {
      "mark": "line",
      "encoding": { "x": {"field": "E"}, "y": {"field": "F"} }
    },
    {
      "mark": "area",
      "encoding": { "x": {"field": "G"}, "y": {"field": "H"} }
    }
  ]
}

This will stack a line chart on top of an area chart.

General (Wrappable) Concatenation

What Is It?

General concatenation allows you to place multiple views in a flexible layout. By specifying the "columns" property, you can control how many views appear per row.

How Do I Use It?

Use the "concat" property as an array of your view specifications and specify "columns" for the layout.

{
  "concat": [
    ...  // Your view specifications go here
  ],
  "columns": 2,  // Number of views per row
  ...
}

Example

Here's an example of a wrappable layout:

{
  "concat": [
    {
      "mark": "circle",
      "encoding": { "x": {"field": "I"}, "y": {"field": "J"} }
    },
    {
      "mark": "square",
      "encoding": { "x": {"field": "K"}, "y": {"field": "L"} }
    },
    {
      "mark": "tick",
      "encoding": { "x": {"field": "M"}, "y": {"field": "N"} }
    }
  ],
  "columns": 2
}

This layout will place two views per row, and the third view will wrap onto a new row.

Configuring Your Concatenation

You can also configure the layout behavior using the config property for more control.

{
  ...,
  "config": {
    "concat": {
      "spacing": 10,  // Adjust spacing between views
      "columns": 2    // Default columns for general concatenation
    },
    ...
  }
}

FAQ

What is the difference between the hconcat, vconcat, and concat operators?

• hconcat places views side-by-side in a single row.
• vconcat stacks views in a single column.
• concat offers a flexible, wrappable layout with a specified number of columns.

Can I control the spacing between concatenated views?

Yes, you can use the spacing property in the config object to adjust the spacing between views.

How do I determine the number of columns in a concat layout?

You can specify the "columns" property in your concat operator to control the number of maximum items per row.

By understanding and using these concatenation operators, you can create flexible and organized multi-views with ease. Happy visualizing!