This website is for Vega-Lite v3. 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": ...,
    "xError": ...,
    "yError": ...,
    "xError2": ...,
    "yError2": ...,

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

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

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

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

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

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

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

    // Facet Channels
    "facet": ...,
    "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 Field

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.

See also: field documentation.

Notes: 1) 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. 2) field is not required if aggregate is count.
type String

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

Note:

  • Data values for a temporal field can be either a date-time string (e.g., "2015-03-07 12:32:17", "17:01", "2015-03-16". "2015") or a timestamp number (e.g., 1552199579097).
  • Data type describes the semantics of the data rather than the primitive data types (number, string, etc.). The same primitive data type can have different types of measurement. For example, numeric data can represent quantitative, ordinal, or nominal data.
  • When using with bin, the type property can be either "quantitative" (for using a linear bin scale) or "ordinal" (for using an ordinal bin scale).
  • When using with timeUnit, the type property can be either "temporal" (for using a temporal scale) or "ordinal" (for using an ordinal scale).
  • When using with aggregate, the type property refers to the post-aggregation data type. For example, we can calculate count distinct of a categorical field "cat" using {"aggregate": "distinct", "field": "cat", "type": "quantitative"}. The "type" of the aggregate output is "quantitative".
  • Secondary channels (e.g., x2, y2, xError, yError) do not have type as they have exactly the same type as their primary channels (e.g., x, y).

See also: type documentation.
bin Boolean | BinParams | String | Null

A flag for binning a quantitative field, an object defining binning parameters, or indicating that the data for x or y channel are binned before they are imported into Vega-Lite ("binned").

  • If true, default binning parameters will be applied.

  • If "binned", this indicates that the data for the x (or y) channel are already binned. You can map the bin-start field to x (or y) and the bin-end field to x2 (or y2). The scale and axis will be formatted similar to binning in Vega-lite. To adjust the axis ticks based on the bin step, you can also set the axis’s tickMinStep property.

Default value: false

See also: bin documentation.
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)

See also: timeUnit documentation.
aggregate Aggregate

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

Default value: undefined (None)

See also: aggregate documentation.
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.)

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" without specified x2 or width.

The value of this channel can be a number or a string "width" for the width of the plot.
y PositionFieldDef | ValueDef

Y coordinates of the marks, or height of vertical "bar" and "area" without specified y2 or height.

The value of this channel can be a number or a string "height" for the height of the plot.
x2 FieldDef | ValueDef

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

The value of this channel can be a number or a string "width" for the width of the plot.
y2 FieldDef | ValueDef

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

The value of this channel can be a number or a string "height" for the height of the plot.

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.

See also: scale documentation.
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.

See also: axis documentation.
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-by-encoding definition for sorting by another encoding channel. (This type of sort definition is not available for row and column channels.)
  • 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.

See also: sort documentation.
stack String | Null | Boolean

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" or true: 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 or false - 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.

See also: stack documentation.

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 | ValueDef

Longitude position of geographically projected marks.
latitude FieldDef | ValueDef

Latitude position of geographically projected marks.
longitude2 FieldDef | ValueDef

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

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.

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

Fill opacity of the marks.

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

Stroke opacity of the marks.

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

Shape of the mark.

  1. For point marks the supported values include:
    • plotting shapes: "circle", "square", "cross", "diamond", "triangle-up", "triangle-down", "triangle-right", or "triangle-left".
    • the line symbol "stroke"
    • centered directional shapes "arrow", "wedge", or "triangle"
    • a custom SVG path string (For correct sizing, custom shape paths should be defined within a square bounding box with coordinates ranging from -1 to 1 along both the x and y dimensions.)
  2. 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. ("circle" if unset.)
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)
strokeWidth MarkPropFieldDef | MarkPropValueDef

Stroke width of the marks.

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

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.

See also: scale documentation.
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.

See also: legend documentation.
condition ConditionalValueDef | ConditionalValueDef[]

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

Note: A field definition’s condition property can only contain conditional 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 Any

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[] | Null

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 text formatting pattern for labels of guides (axes, legends, headers) and text marks.

See the format documentation for more examples.

Default value: Derived from numberFormat config for number format and from timeFormat config for time format.
formatType String

The format type for labels ("number" or "time").

Default value:

  • "time" for temporal fields and ordinal and nomimal fields with timeUnit.
  • "number" for quantitative fields as well as ordinal and nomimal fields without timeUnit.
condition ConditionalValueDef | ConditionalValueDef[]

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

Note: A field definition’s condition property can only contain conditional 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 TextFieldDef | TextValueDef

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 or a test predicate.

Note: A field definition’s condition property can only contain conditional 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

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

Property Type Description
facet FacetFieldDef

A field definition for the (flexible) facet of trellis plots.

If either row or column is specified, this channel will be ignored.
row FacetFieldDef

A field definition for the vertical facet of trellis plots.
column FacetFieldDef

A field definition for the horizontal facet of trellis plots.

For more information, read the facet documentation.