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": ...,

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

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

    // 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, 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").

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)

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

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.

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 String | SortField | Null

Sort order for the encoded field. Supported sort values include "ascending", "descending" and null (no sorting). For fields with discrete domains, sort can also be a sort field definition object.

Default value: "ascending"

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.

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 mark type. By default, color represents fill color for "area", "bar", "tick", "text", "circle", and "square" / stroke color for "line" and "point".

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

Note: See the scale documentation for more information about customizing color scheme.

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

The symbol’s shape (only for point marks). The supported values are "circle" (default), "square", "cross", "diamond", "triangle-up", or "triangle-down", or else a custom SVG path string. 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 currently unsupported for "line", "area", and "rect".

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

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.

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

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 mosty 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 Conditional | Conditional | Conditional[]

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

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

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 mosty 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 Conditional | Conditional | Conditional[]

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 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).

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

Stack order for stacked marks or order of data points in line marks for connected scatter plots.

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.