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

Encoding

Edit this page

An integral part of the data visualization process is encoding data with visual properties of graphical marks. The encoding property of a single view specification represents the mapping between encoding channels (such as x, y, or color) and data fields or constant values.

// Specification of a Single View
{
  "data": ... ,
  "mark": ... ,
  "encoding": {     // Encoding
    // Position Channels
    "x": ...,
    "y": ...,
    "x2": ...,
    "y2": ...,

    // Geographic Position Channels
    "longtitude": ...,
    "latitude": ...,
    ...

    // Mark Properties Channels
    "color": ...,
    "opacity": ...,
    "size": ...,
    "shape": ...,

    // Text and Tooltip Channels
    "text": ...,
    "tooltip": ...,

    // Hyperlink Channel
    "href": ...,

    // Key Channel
    "key": ...,

    // Order Channel
    "order": ...,

    // Level of Detail Channel
    "detail": ...,

    // Facet Channels
    "row": ...,
    "column": ...
  },
  ...
}

Encoding Channels

The keys in the encoding object are encoding channels. Vega-lite supports the following groups of encoding channels

Channel Definition

Each channel definition object is either a field definition, which describes the data field encoded by the channel, or a value definition, which describes an encoded constant value.

Field Definition

// Specification of a Single View
{
  ...,
  "encoding": {     // Encoding
    ...: {
      "field": ...,
      "type": ...,
      ...
    },
    ...
  },
  ...
}

To encode a particular field in the data set with an encoding channel, the channel’s field definition must describe the field name and its data type. To facilitate data exploration, Vega-Lite also provides inline field transforms (aggregate, bin, sort, stack, and timeUnit) as a part of a field definition in addition to the top-level transform.

All field definitions support the following properties:

Property Type Description
field String | RepeatRef

Required. A string defining the name of the field from which to pull a data value or an object defining iterated values from the repeat operator.

Note: Dots (.) and brackets ([ and ]) can be used to access nested objects (e.g., "field": "foo.bar" and "field": "foo['bar']"). If field names contain dots or brackets but are not nested, you can use \\ to escape dots and brackets (e.g., "a\\.b" and "a\\[0\\]"). See more details about escaping in the field documentation.

Note: field is not required if aggregate is count.
type Type

Required. The encoded field’s type of measurement ("quantitative", "temporal", "ordinal", or "nominal"). It can also be a "geojson" type for encoding ‘geoshape’.
bin Boolean | BinParams

A flag for binning a quantitative field, or an object defining binning parameters. If true, default binning parameters will be applied.

Default value: false
timeUnit TimeUnit

Time unit (e.g., year, yearmonth, month, hours) for a temporal field. or a temporal field that gets casted as ordinal.

Default value: undefined (None)
aggregate Aggregate

Aggregation function for the field (e.g., mean, sum, median, min, max, count).

Default value: undefined (None)
title String | Null

A title for the field. If null, the title will be removed.

Default value: derived from the field’s name and transformation function (aggregate, bin and timeUnit). If the field has an aggregate function, the function is displayed as part of the title (e.g., "Sum of Profit"). If the field is binned or has a time unit applied, the applied function is shown in parentheses (e.g., "Profit (binned)", "Transaction Date (year-month)"). Otherwise, the title is simply the field name.

Notes:

1) You can customize the default field title format by providing the [fieldTitle property in the config or fieldTitle function via the compile function’s options.

2) If both field definition’s title and axis, header, or legend title are defined, axis/header/legend title will be used.

In addition, field definitions for different encoding channels may support the following properties:

To see a list of additional properties for each type of encoding channels, please see the specific sections for position, mark property, text and tooltip, detail, order, and facet channels.

Value Definition

// Specification of a Single View
{
  ...,
  "encoding": {     // Encoding
    ...: {
      "value": ...
    },
    ...
  },
  ...
}

To map a constant value to an encoding channel, the channel’s value definition must describe the value property. (See the value page for more examples.)

Property Type Description
value Number | String | Boolean

Required. A constant value in visual domain (e.g., "red" / “#0099ff” for color, values between 0 to 1 for opacity).

Position Channels

x and y position channels determine the position of the marks, or width/height of horizontal/vertical "area" and "bar". In addition, x2 and y2 can specify the span of ranged area, bar, rect, and rule.

By default, Vega-Lite automatically generates a scale and an axis for each field mapped to a position channel. If unspecified, properties of scales and axes are determined based on a set of rules by the compiler. scale and axis properties of the field definition can be used to customize their properties.

Property Type Description
x PositionFieldDef | ValueDef

X coordinates of the marks, or width of horizontal "bar" and "area".
y PositionFieldDef | ValueDef

Y coordinates of the marks, or height of vertical "bar" and "area".
x2 FieldDef | ValueDef

X2 coordinates for ranged "area", "bar", "rect", and "rule".
y2 FieldDef | ValueDef

Y2 coordinates for ranged "area", "bar", "rect", and "rule".

Position Field Definition

In addition to field, type, bin, timeUnit and aggregate, field definitions for x and y channels may also include these properties:

Property Type Description
scale Scale | Null

An object defining properties of the channel’s scale, which is the function that transforms values in the data domain (numbers, dates, strings, etc) to visual values (pixels, colors, sizes) of the encoding channels.

If null, the scale will be disabled and the data value will be directly encoded.

Default value: If undefined, default scale properties are applied.
axis Axis | Null

An object defining properties of axis’s gridlines, ticks and labels. If null, the axis for the encoding channel will be removed.

Default value: If undefined, default axis properties are applied.
sort Sort

Sort order for the encoded field.

For continuous fields (quantitative or temporal), sort can be either "ascending" or "descending".

For discrete fields, sort can be one of the following:

  • "ascending" or "descending" – for sorting by the values’ natural order in Javascript.
  • A sort field definition for sorting by another field.
  • An array specifying the field values in preferred order. In this case, the sort order will obey the values in the array, followed by any unspecified values in their original order. For discrete time field, values in the sort array can be date-time definition objects. In addition, for time units "month" and "day", the values can be the month or day names (case insensitive) or their 3-letter initials (e.g., "Mon", "Tue").
  • null indicating no sort.

Default value: "ascending"

Note: null is not supported for row and column.
stack String | Null

Type of stacking offset if the field should be stacked. stack is only applicable for x and y channels with continuous domains. For example, stack of y can be used to customize stacking for a vertical bar chart.

stack can be one of the following values:

  • "zero": stacking with baseline offset at zero value of the scale (for creating typical stacked bar and area chart).
  • "normalize" - stacking with normalized domain (for creating normalized stacked bar and area charts.
    -"center" - stacking with center baseline (for streamgraph).
  • null - No-stacking. This will produce layered bar and area chart.

Default value: zero for plots with all of the following conditions are true: (1) the mark is bar or area; (2) the stacked measure channel (x or y) has a linear scale; (3) At least one of non-position channels mapped to an unaggregated field that is different from x and y. Otherwise, null by default.

Note: x2 and y2 do not have their own definitions for scale, axis, sort, and stack since they share the same scales and axes with x and y respectively.

Geographic Position Channels

longitude and latitude channels can be used to encode geographic coordinate data via a projection. In addition, longitude2 and latitude2 can specify the span of geographically projected ranged area, bar, rect, and rule.

Property Type Description
longitude FieldDef

Longitude position of geographically projected marks.
latitude FieldDef

Latitude position of geographically projected marks.
longitude2 FieldDef

Longitude-2 position for geographically projected ranged "area", "bar", "rect", and "rule".
latitude2 FieldDef

Latitude-2 position for geographically projected ranged "area", "bar", "rect", and "rule".

See an example that uses longitude and latitude channels in a map or another example that draws line segments (rules) between points in a map.

Mark Property Channels

Mark properties channels map data fields to visual properties of the marks. By default, Vega-Lite automatically generates a scale and a legend for each field mapped to a mark property channel. If unspecified, properties of scales and legends are determined based on a set of rules by the compiler. scale and legend properties of the field definition can be used to customize their properties. In addition, definitions of mark property channels can include the condition property to specify conditional logic.

Here are the list of mark property channels:

Property Type Description
color MarkPropFieldDef | MarkPropValueDef

Color of the marks – either fill or stroke color based on the filled property of mark definition. By default, color represents fill color for "area", "bar", "tick", "text", "trail", "circle", and "square" / stroke color for "line" and "point".

Default value: If undefined, the default color depends on mark config’s color property.

Note: 1) For fine-grained control over both fill and stroke colors of the marks, please use the fill and stroke channels. If either fill or stroke channel is specified, color channel will be ignored. 2) See the scale documentation for more information about customizing color scheme.
fill MarkPropFieldDef | MarkPropValueDef

Fill color of the marks. Default value: If undefined, the default color depends on mark config’s color property.

Note: When using fill channel, color channel will be ignored. To customize both fill and stroke, please use fill and stroke channels (not fill and color).
stroke MarkPropFieldDef | MarkPropValueDef

Stroke color of the marks. Default value: If undefined, the default color depends on mark config’s color property.

Note: When using stroke channel, color channel will be ignored. To customize both stroke and fill, please use stroke and fill channels (not stroke and color).
opacity MarkPropFieldDef | MarkPropValueDef

Opacity of the marks – either can be a value or a range.

Default value: If undefined, the default opacity depends on mark config’s opacity property.
shape MarkPropFieldDef | MarkPropValueDef

For point marks the supported values are "circle" (default), "square", "cross", "diamond", "triangle-up", or "triangle-down", or else a custom SVG path string. For geoshape marks it should be a field definition of the geojson data

Default value: If undefined, the default shape depends on mark config’s shape property.
size MarkPropFieldDef | MarkPropValueDef

Size of the mark.

  • For "point", "square" and "circle", – the symbol size, or pixel area of the mark.
  • For "bar" and "tick" – the bar and tick’s size.
  • For "text" – the text’s font size.
  • Size is unsupported for "line", "area", and "rect". (Use "trail" instead of line with varying size)

Mark Property Field Definition

In addition to field, type, bin, timeUnit and aggregate, field definitions for mark property channels may also include these properties:

Property Type Description
scale Scale | Null

An object defining properties of the channel’s scale, which is the function that transforms values in the data domain (numbers, dates, strings, etc) to visual values (pixels, colors, sizes) of the encoding channels.

If null, the scale will be disabled and the data value will be directly encoded.

Default value: If undefined, default scale properties are applied.
legend Legend | Null

An object defining properties of the legend. If null, the legend for the encoding channel will be removed.

Default value: If undefined, default legend properties are applied.
condition ConditionalValueDef | ConditionalValueDef[]

One or more value definition(s) with a selection predicate.

Note: A field definition’s condition property can only contain value definitions since Vega-Lite only allows at most one encoded field per encoding channel.

Mark Property Value Definition

In addition to the constant value, value definitions of mark properties channels can include the condition property to specify conditional logic.

Property Type Description
condition ConditionalFieldDef | ConditionalValueDef | ConditionalValueDef[]

A field definition or one or more value definition(s) with a selection predicate.

See the condition page for examples how to specify condition logic.

Text and Tooltip Channels

Text and tooltip channels directly encode text values of the data fields. By default, Vega-Lite automatically determines appropriate format for quantitative and temporal values. Users can set format property to customize text and time format. Similar to mark property channels, definitions of text and tooltip channels can include the condition property to specify conditional logic.

Property Type Description
text TextFieldDef | TextValueDef

Text of the text mark.
tooltip TextFieldDef | TextValueDef | TextFieldDef[]

The tooltip text to show upon mouse hover.

Text and Tooltip Field Definition

In addition to field, type, bin, timeUnit and aggregate, field definitions for text and tooltip channels may also include these properties:

Property Type Description
format String

The formatting pattern for a text field. If not defined, this will be determined automatically.
condition ConditionalValueDef | ConditionalValueDef[]

One or more value definition(s) with a selection predicate.

Note: A field definition’s condition property can only contain value definitions since Vega-Lite only allows at most one encoded field per encoding channel.

Text and Tooltip Value Definition

In addition to the constant value, value definitions of text and tooltip channels can include the condition property to specify conditional logic.

Property Type Description
condition ConditionFieldDef | ConditionalValueDef | ConditionalValueDef[]

A field definition or one or more value definition(s) with a selection predicate.

Multiple Field Definitions for Tooltips

Similar to detail, you can use an array of field definitions. Vega-Lite will display a tooltip with multiple fields. Vega tooltip will display a table that shows the name of the field and its value. See the tooltip page for details.

Hyperlink Channel

By setting the href channel, a mark becomes a hyperlink. The specified URL is loaded upon a mouse click. When the href channel is specified, the cursor mark property is set to "pointer" by default to serve as affordance for hyperlinks.

Property Type Description
href FieldDefWithCondition | ValueDefWithCondition

A URL to load upon mouse click.

Hyperlink Field Definition

In addition to field, type, bin, timeUnit and aggregate, field definitions for the href channel can include the condition property to specify conditional logic.

Property Type Description
condition ConditionalValueDef | ConditionalValueDef[]

One or more value definition(s) with a selection predicate.

Note: A field definition’s condition property can only contain value definitions since Vega-Lite only allows at most one encoded field per encoding channel.

The example below show how the href channel can be used to provide links to external resources with more details.

Hyperlink Value Definition

In addition to the constant value, value definitions of the href channel can include the condition property to specify conditional logic.

Property Type Description
condition ConditionalFieldDef | ConditionalValueDef | ConditionalValueDef[]

A field definition or one or more value definition(s) with a selection predicate.

Level of Detail Channel

Grouping data is another important operation in data visualization. For line and area marks, mapping a unaggregate data field (field without aggregate function) to any non-position channel will group the lines and stacked areas by the field. For aggregated plots, all unaggregated fields encoded are used as grouping fields in the aggregation (similar to fields in GROUP BY in SQL).

detail channel specify an additional grouping field (or fields) for grouping data without mapping the field(s) to any visual properties.

Property Type Description
detail FieldDef | FieldDef[]

Additional levels of detail for grouping data in aggregate views and in line, trail, and area marks without mapping data to a specific visual channel.

Examples

Here is a scatterplot showing average horsepower and displacement for cars from different origins. We map Origin to detail channel to use the field as a group-by field without mapping it to visual properties of the marks.

Here is a line chart showing stock prices of 5 tech companies over time. We map symbol variable (stock market ticker symbol) to detail to use them to group lines.

Here is a ranged dot plot showing life expectancy change in the five largest countries between 1955 and 2000. We use detail here to group the lines such that they range only from one year to another within a country (as opposed to jumping between countries as well).

Key Channel

The key channel can enable object constancy for transitions over dynamic data. When a visualization’s data is updated (via Vega’s View API), the key value will be used to match data elements to existing mark instances.

Property Type Description
key FieldDef

A data field to use as a unique key for data binding. When a visualization’s data is updated, the key value will be used to match data elements to existing mark instances. Use a key channel to enable object constancy for transitions over dynamic data.

Order Channel

order channel can define a data field (or a ordered list of data fields) that are used to sorts stacking order for stacked charts (see an example in the stack page) and the order of data points in line marks for connected scatterplots (see an example in the line page).

Property Type Description
order OrderFieldDef | OrderFieldDef[] | ValueDef

Order of the marks.

  • For stacked marks, this order channel encodes stack order.
  • For line and trail marks, this order channel encodes order of data points in the lines. This can be useful for creating a connected scatterplot. Setting order to {"value": null} makes the line marks use the original order in the data sources.
  • Otherwise, this order channel encodes layer order of the marks.

Note: In aggregate plots, order field should be aggregated to avoid creating additional aggregation grouping.

Order Field Definition

In addition to field, type, bin, timeUnit and aggregate, field definitions for the order channel can include sort.

Property Type Description
sort String

The sort order. One of "ascending" (default) or "descending".

Facet Channels

row and column are special encoding channels that facets single plots into trellis plots (or small multiples).

Property Type Description
row FacetFieldDef

Vertical facets for trellis plots.
column FacetFieldDef

Horizontal facets for trellis plots.

For more information, read the facet documentation.