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, constant visual values, or constant data values (datum).

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

    // Polar Position Channels
    "theta": ...,
    "radius": ...,
    "theta2": ...,
    "radius2": ...,

    // Geographic Position Channels
    "longitude": ...,
    "latitude": ...,
    "longitude2": ...,
    "latitude2": ...,

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

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

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

    // Description Channel
    "description": ...,

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

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

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

    // 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 must be one of the following:

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

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

Vega-Lite automatically infers data types in many cases as discussed below. However, type is required for a field if: (1) the field is not nominal and the field encoding has no specified aggregate (except argmin and argmax), bin, scale type, custom sort order, nor timeUnit or (2) if you wish to use an ordinal scale for a field with bin or timeUnit.

Default value:

1) For a data field, "nominal" is the default data type unless the field encoding has aggregate, channel, bin, scale type, sort, or timeUnit that satisfies the following criteria:

  • "quantitative" is the default type if (1) the encoded field contains bin or aggregate except "argmin" and "argmax", (2) the encoding channel is latitude or longitude channel or (3) if the specified scale type is a quantitative scale.
  • "temporal" is the default type if (1) the encoded field contains timeUnit or (2) the specified scale type is a time or utc scale
  • "ordinal" is the default type if (1) the encoded field contains a custom sort order, (2) the specified scale type is an ordinal/point/band scale, or (3) the encoding channel is order.

2) For a constant value in data domain (datum):

  • "quantitative" if the datum is a number
  • "nominal" if the datum is a string
  • "temporal" if the datum is a date time object

Note:

  • 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.
  • 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).
  • 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" (default, 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"}. The "type" of the aggregate output is "quantitative".
  • Secondary channels (e.g., x2, y2, xError, yError) do not have type as they must 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 | String | TimeUnitParams

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.
band Any
title Text | 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 visual value to an encoding channel, the channel’s value definition must describe the value property. (See the value page for more examples.)

Datum Definition

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

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

Property Type Description
datum PrimitiveValue | DateTime | ExprRef | RepeatRef

A constant value in data domain.

Similar to a field definition, datum definition of different encoding channels may support band, scale, axis, legend, format, or condition properties. However, data transforms (aggregate, bin, timeUnit, sort cannot be applied to a datum definition).

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 PositionDef

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 PositionDef

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 Position2Def

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 Position2Def

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 and Datum Definition

In addition to the general field definition properties, field definitions for x and y channels may include the properties listed below. Similarly, datum definitions for x and y channels also support 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:

Default value: "ascending"

Note: null and sorting by another channel is not supported for row and column.

See also: sort documentation.
impute ImputeParams | Null

An object defining the properties of the Impute Operation to be applied. The field value of the other positional channel is taken as key of the Impute Operation. The field of the color channel if specified is used as groupby of the Impute Operation.

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

Type of stacking offset if the field should be stacked. stack is only applicable for x, y, theta, and radius 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:

Default value: zero for plots with all of the following conditions are true: (1) the mark is bar, area, or arc; (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.

Position Offset Channels

xOffset and yOffset position channels determine additional offset to the x or y position.

Position Offset Field Definition and Datum Definition

In addition to the general field definition properties, field definitions for xOffset and yOffset channels may include the properties listed below. Similarly, datum definitions for x and y channels also support 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.
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:

Default value: "ascending"

Note: null and sorting by another channel is not supported for row and column.

See also: sort documentation.

Example: Grouped Bar Chart

Note: Read here for more details about how to set step size for offset scale.

Example: Jittering

Polar Position Channels

theta and radius position channels determine the position or interval on polar coordinates for arc and text marks.

Property Type Description
theta PolarDef

  • For arc marks, the arc length in radians if theta2 is not specified, otherwise the start arc angle. (A value of 0 indicates up or “north”, increasing values proceed clockwise.)

  • For text marks, polar coordinate angle in radians.
radius PolarDef

The outer radius in pixels of arc marks.
theta2 Position2Def

The end angle of arc marks in radians. A value of 0 indicates up or “north”, increasing values proceed clockwise.
radius2 Position2Def

The inner radius in pixels of arc marks.

Polar Field Definition and Datum Definition

Polar field and datum definitions may include scale, stack, and sort properties, similar to position field and datum definitions.

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 LatLongDef

Longitude position of geographically projected marks.
latitude LatLongDef

Latitude position of geographically projected marks.
longitude2 Position2Def

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

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
angle MarkPropDef

Rotation angle of point and text marks.
color MarkPropDef

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. The fill or stroke encodings have higher precedence than color, thus may override the color encoding if conflicting encodings are specified. 2) See the scale documentation for more information about customizing color scheme.
fill MarkPropDef

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

Note: The fill encoding has higher precedence than color, thus may override the color encoding if conflicting encodings are specified.
stroke MarkPropDef

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

Note: The stroke encoding has higher precedence than color, thus may override the color encoding if conflicting encodings are specified.
opacity MarkPropDef

Opacity of the marks.

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

Fill opacity of the marks.

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

Stroke opacity of the marks.

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

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 MarkPropDef

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)
strokeDash NumericArrayMarkPropDef

Stroke dash of the marks.

Default value: [1,0] (No dash).
strokeWidth MarkPropDef

Stroke width of the marks.

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

Mark Property Field Definition and Datum Definition

Field definitions for mark property channels may also include the properties list below (in addition to field, type, bin, timeUnit and aggregate).

Similarly, datum definitions for mark property channels also support 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 parameter 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 ConditionalFieldDef | ConditionalValueDef | ConditionalValueDef[]

A field definition or one or more value definition(s) with a parameter 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

Text of the text mark.
tooltip StringFieldDefWithCondition | StringValueDefWithCondition | StringFieldDef[] | Null

The tooltip text to show upon mouse hover. Specifying tooltip encoding overrides the tooltip property in the mark definition.

See the tooltip documentation for a detailed discussion about tooltip in Vega-Lite.

Text and Tooltip Field Definition

In addition to the general field definition properties, field definitions for text and tooltip channels may also include these properties:

Property Type Description
format String | Object

When used with the default "number" and "time" format type, the text formatting pattern for labels of guides (axes, legends, headers) and text marks.

See the format documentation for more examples.

When used with a custom formatType, this value will be passed as format alongside datum.value to the registered function.

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

The format type for labels. One of "number", "time", or a registered custom format type.

Default value:

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

One or more value definition(s) with a parameter 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 ConditionalStringFieldDef | ConditionalValueDef | ConditionalValueDef[]

A field definition or one or more value definition(s) with a parameter 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 StringFieldDefWithCondition | StringValueDefWithCondition

A URL to load upon mouse click.

Hyperlink Field Definition

In addition to the general field definition properties, field definitions for the href channel can include the condition property to specify conditional logic.

Property Type Description
condition Any

The example below shows 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 ConditionalStringFieldDef | ConditionalValueDef | ConditionalValueDef[]

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

Description Channel

By setting the description channel, you can add a text description to the mark for ARIA accessibility (SVG output only). The "aria-label" attribute in the generated SVG will be set to this description.

By default, Vega-Lite generates a description based on the encoding similar to default tooltips. To disable automatic descriptions, set config.aria to false. No description will be generated if mark.aria is set to false.

Property Type Description
description StringFieldDefWithCondition | StringValueDefWithCondition

A text description of this mark for ARIA accessibility (SVG output only). For SVG output the "aria-label" attribute will be set to this description.

Description Field Definition

In addition to the general field definition properties, field definitions for the description channel can include these properties:

Property Type Description
format String | Object

When used with the default "number" and "time" format type, the text formatting pattern for labels of guides (axes, legends, headers) and text marks.

See the format documentation for more examples.

When used with a custom formatType, this value will be passed as format alongside datum.value to the registered function.

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

The format type for labels. One of "number", "time", or a registered custom format type.

Default value:

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

One or more value definition(s) with a parameter 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.

Description Value Definition

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

Property Type Description
condition ConditionalStringFieldDef | ConditionalValueDef | ConditionalValueDef[]

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

Level of Detail Channel

Grouping data is another important operation in data visualization. For line and area marks, mapping a unaggregated 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), the order of data points in line marks for connected scatterplots (see an example in the line page), and which data points are plotted on top in a chart (the “zorder”, see an example in the gallery).

Property Type Description
order OrderFieldDef | OrderFieldDef[] | OrderValueDef | OrderOnlyDef

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 the general field definition properties, field definitions for the order channel can include sort.

Property Type Description
sort String

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

Order Value Definition

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

Property Type Description
condition ConditionalValueDef | ConditionalValueDef[]

One or more value definition(s) with a parameter 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.

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.