This website is for Vega-Lite v2. Go to the main Vega-Lite homepage for the latest release.

Condition

Edit this page

For mark property channels as well as text and tooltip channels, the condition property of their channel definitions can be used to determine encoding rules based on whether data values fall within a selection or satisfy a test predicate.

There are two ways to specify the condition:

1) Specifying selection name:

Property Type Description
selection String | Object

Required. A selection name, or a series of composed selections.

2) Specifying a test predicate:

Property Type Description
test LogicalOperand

In addition, there are two ways to encode the data that satisfy the specified condition:

1) Combining one conditional field definition with one base value definition.

2) Combining one or more conditional value with a field definition or a value definition.

Conditional Field Definition

// Specification of a Single View
{
  ...,
  "encoding": {           // Encoding
    ...: {
      "condition": {      // Conditional rule for data inside the selection
        // Selection name or a test predicate
        "selection/test": ...,
        // Field definition if the data is included in the selection (if)
        "field": ..., "type": "quantitative"
      },
      "value": ...        // The (optional) encoding value set for data outside the selection (else)
    },
    ...
  },
  ...
}

A conditional field definition uses a data-driven encoding rule when marks fall within a selection or satisfy a logical predicate. A value definition can be specified as the “else” case when the condition is not satisfied otherwise.

A condition field definition must contain either a selection name or a test predicate in addition to the encoded field name and its data type like a typical field definition. In addition, a condition field definition may contain other encoding properties including transformation functions (aggregate, bin, timeUnit) as well as scale and legend (for mark property channels) or format (for text and tooltip channels).

For example, in the following plot, the color of rect marks is driven by a conditional field definition. Drag an interval selection and observe that marks are colored based on their aggregated count if they lie within the interval, and are grey otherwise.

Note: When using a conditional field definition, only a value may be specified as the else (outer) branch.

Conditional Value Definition

// Specification of a Single View
{
  ...,
  "encoding": {           // Encoding
    ...: {
      "condition": {      // Conditional rule for data inside the selection
        // Selection name or a test predicate
        "selection/test": ...,
        // Value if the data is included in the selection (if)
        "value": ...
      },
      ... // A field definition or a value definition for data outside the selection (else)
    },
    ...
  },
  ...
}

A condition value definition uses a constant value encoding when data fall within a selection or satisfy a logical predicate. A field or value definition can be specified as the “else” case when the condition is not satisfied.

A condition value definition must contain either a selection name or a test predicate in addition to the encoded constant value.

For example, in the visualization below, a conditional value definition causes marks that fall within a dragged interval to be larger than those that lie outside it.

A field mapping can also be specified as the else (outer) branch. For example, below, we invert our original example: a conditional value definition sets the rect marks to grey when they do not lie within the selection, and a regular field mapping is used otherwise. Notice, all marks are initially colored grey. This is because empty selections are treated as containing all data values.

Besides specifying selection name, we can also specify a test condition.

This plot uses a conditional value definition value to use a black label for a light background.

The next plot uses a conditional value definition to color data points with null values in grey. Note that if the “else” case value is not specified, default mark color will be applied.