An integral part of the data visualization process is encoding data with visual properties of graphical marks. Theencoding
property of a single view specification represents the mapping betweenencoding channels (such asx
,y
, orcolor
) anddata fields, constantvisual values, or constantdata 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": ... }, ...}
The keys in theencoding
object are encoding channels. Vega-Lite supports the following groups of encoding channels
x
,y
,x2
,y2
,xError
,yError
,xError2
,yError2
xOffset
,yOffset
theta
,theta2
,radius
,radius2
longitude
,latitude
,longitude2
,latitude2
angle
,color
(andfill
/stroke
),opacity
,fillOpacity
,strokeOpacity
,shape
,size
,strokeDash
,strokeWidth
text
,tooltip
href
description
detail
key
order
facet
,row
,column
Each channel definition object must be one of the following:
// 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 thefield
name and its datatype
. To facilitate data exploration, Vega-Lite also provides inline field transforms (aggregate
,bin
,sort
,stack
, andtimeUnit
) as a part of a field definition in addition to the top-leveltransform
.
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 See also: Notes: 1) Dots ( |
type | String | The type of measurement ( 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 Default value: 1) For a data
2) For a constant value in data domain (
Note:
See also: |
bin | Boolean |BinParams | String | Null | A flag for binning a
Default value: See also: |
timeUnit | TimeUnit | String |TimeUnitParams | Time unit (e.g., Default value: See also: |
aggregate | Aggregate | Aggregation function for the field (e.g., Default value: See also: |
band | Any | |
title | Text | Null | A title for the field. If Default value: derived from the field’s name and transformation function ( Notes: 1) You can customize the default field title format by providing the 2) If both field definition’s |
In addition, field definitions for different encoding channels may support the following properties:
scale
- The function that transforms values in the data domain (numbers, dates, strings, etc) to visual values (pixels, colors, sizes) forposition andmark property channels.
axis
- The guiding visualization to aid interpretation of scales forposition channels.
legend
- The guiding visualization to aid interpretation ofmark property channels.
format
- The formatting pattern for text value fortext channels.
stack
- Type of stacking offset if aposition field with continuous domain should be stacked.
sort
- Sort order for a field forposition andmark property channels.
condition
- The conditional encoding rule formark property andtext channels.
To see a list of additional properties for each type of encoding channels, please see the specific sections forposition,mark property,text and tooltip,detail,order, andfacet channels.
// 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 thevalue
property. (See thevalue
page for more examples.)
// 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 thedatum
property. (See thedatum
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 supportband
,scale
,axis
,legend
,format
, orcondition
properties. However, data transforms (aggregate
,bin
,timeUnit
,sort
cannot be applied to a datum definition).
x
andy
position channels determine the position of the marks, or width/height of horizontal/vertical"area"
and"bar"
. In addition,x2
andy2
can specify the span of rangedarea
,bar
,rect
, andrule
.
By default, Vega-Lite automatically generates ascale and anaxis 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
andaxis
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 The |
y | PositionDef | Y coordinates of the marks, or height of vertical The |
x2 | Position2Def | X2 coordinates for ranged The |
y2 | Position2Def | Y2 coordinates for ranged The |
In addition to the generalfield definition properties, field definitions forx
andy
channels may include the properties listed below. Similarly,datum definitions forx
andy
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 Default value: If undefined, defaultscale properties are applied. See also: |
axis | Axis | Null | An object defining properties of axis’s gridlines, ticks and labels. If Default value: If undefined, defaultaxis properties are applied. See also: |
sort | Sort | Sort order for the encoded field. For continuous fields (quantitative or temporal), For discrete fields,
Default value: Note: See also: |
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 See also: |
stack | String | Null | Boolean | Type of stacking offset if the field should be stacked.
Default value: See also: |
Note:x2
andy2
do not have their own definitions forscale
,axis
,sort
, andstack
since they share the same scales and axes withx
andy
respectively.
xOffset
andyOffset
position channels determine additional offset to thex
ory
position.
In addition to the generalfield definition properties, field definitions forxOffset
andyOffset
channels may include the properties listed below. Similarly,datum definitions forx
andy
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 Default value: If undefined, defaultscale properties are applied. See also: |
sort | Sort | Sort order for the encoded field. For continuous fields (quantitative or temporal), For discrete fields,
Default value: Note: See also: |
Note: Readhere for more details about how to set step size for offset scale.
theta
andradius
position channels determine the position or interval on polar coordinates forarc
andtext
marks.
Property | Type | Description |
---|---|---|
theta | PolarDef |
|
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 and datum definitions may includescale
,stack
, andsort
properties, similar toposition field and datum definitions.
longitude
andlatitude
channels can be used to encode geographic coordinate data via aprojection. In addition,longitude2
andlatitude2
can specify the span of geographically projected rangedarea
,bar
,rect
, andrule
.
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 |
latitude2 | Position2Def | Latitude-2 position for geographically projected ranged |
Seean example that useslongitude
andlatitude
channels in a map oranother example that draws line segments (rule
s) between points in a map.
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
andlegend
properties of the field definition can be used to customize their properties. In addition, definitions of mark property channels can include thecondition
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 Default value: If undefined, the default color depends onmark config’s Note: 1) For fine-grained control over both fill and stroke colors of the marks, please use the |
fill | MarkPropDef | Fill color of the marks.Default value: If undefined, the default color depends onmark config’s Note: The |
stroke | MarkPropDef | Stroke color of the marks.Default value: If undefined, the default color depends onmark config’s Note: The |
opacity | MarkPropDef | Opacity of the marks. Default value: If undefined, the default opacity depends onmark config’s |
fillOpacity | MarkPropDef | Fill opacity of the marks. Default value: If undefined, the default opacity depends onmark config’s |
strokeOpacity | MarkPropDef | Stroke opacity of the marks. Default value: If undefined, the default opacity depends onmark config’s |
shape | MarkPropDef | Shape of the mark.
Default value: If undefined, the default shape depends onmark config’s |
size | MarkPropDef | Size of the mark.
|
strokeDash | NumericArrayMarkPropDef | Stroke dash of the marks. Default value: |
strokeWidth | MarkPropDef | Stroke width of the marks. Default value: If undefined, the default stroke width depends onmark config’s |
Field definitions for mark property channels may also include the properties list below (in addition tofield
,type
,bin
,timeUnit
andaggregate
).
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 Default value: If undefined, defaultscale properties are applied. See also: |
legend | Legend | Null | An object defining properties of the legend. If Default value: If undefined, defaultlegend properties are applied. See also: |
condition | ConditionalValueDef |ConditionalValueDef[] | One or more value definition(s) witha parameter or a test predicate. Note: A field definition’s |
In addition to the constantvalue
,value definitions of mark properties channels can include thecondition
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. |
Seethecondition
page for examples how to specify condition logic.
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 setformat
property to customize text and time format. Similar to mark property channels, definitions of text and tooltip channels can include thecondition
property to specify conditional logic.
Property | Type | Description |
---|---|---|
text | TextFieldDef | Text of the |
tooltip | StringFieldDefWithCondition | StringValueDefWithCondition | StringFieldDef[] | Null | The tooltip text to show upon mouse hover. Specifying See the |
In addition to the generalfield definition properties, field definitions fortext
andtooltip
channels may also include these properties:
Property | Type | Description |
---|---|---|
format | Format | The text format specifier for formatting number and date/time in labels of guides (axes, legends, headers) and text marks. If the format type is If the format type is b)dynamic time format specifier object if you desire to set a dynamic time format that uses different formats depending on the granularity of the input date (e.g., if the date lies on a year, month, date, hour, etc. boundary). When used with acustom Default value: Derived fromnumberFormat config for number format and fromtimeFormat config for time format. |
formatType | String | The format type for labels. One of Default value:
|
condition | ConditionalValueDef |ConditionalValueDef[] | One or more value definition(s) witha parameter or a test predicate. Note: A field definition’s |
In addition to the constantvalue
,value definitions oftext
andtooltip
channels can include thecondition
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. |
Similar todetail
, 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 thetooltip page for details.
By setting thehref
channel, a mark becomes a hyperlink. The specified URL is loaded upon a mouse click. When thehref
channel is specified, thecursor
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. |
In addition to the generalfield definition properties, field definitions for thehref
channel can include thecondition
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.
In addition to the constantvalue
,value definitions of thehref
channel can include thecondition
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. |
By setting thedescription
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 todefault tooltips. To disable automatic descriptions, setconfig.aria
to false. No description will be generated ifmark.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 |
In addition to the generalfield definition properties, field definitions for thedescription
channel can include these properties:
Property | Type | Description |
---|---|---|
format | Format | The text format specifier for formatting number and date/time in labels of guides (axes, legends, headers) and text marks. If the format type is If the format type is b)dynamic time format specifier object if you desire to set a dynamic time format that uses different formats depending on the granularity of the input date (e.g., if the date lies on a year, month, date, hour, etc. boundary). When used with acustom Default value: Derived fromnumberFormat config for number format and fromtimeFormat config for time format. |
formatType | String | The format type for labels. One of Default value:
|
condition | ConditionalValueDef |ConditionalValueDef[] | One or more value definition(s) witha parameter or a test predicate. Note: A field definition’s |
In addition to the constantvalue
,value definitions of thedescription
channel can include thecondition
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. |
Grouping data is another important operation in data visualization. For line and area marks, mapping a unaggregated data field (field withoutaggregate
function) to any non-position channel will group the lines and stacked areas by the field. Foraggregated plots, all unaggregated fields encoded are used as grouping fields in the aggregation (similar to fields inGROUP 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. |
Here is a scatterplot showing average horsepower and displacement for cars from different origins. We mapOrigin
todetail
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 mapsymbol
variable (stock market ticker symbol) todetail
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 usedetail
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).
The key channel can enable object constancy for transitions over dynamic data. When a visualization’s data is updated (viaVega’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 can define a data field (or a ordered list of data fields) that are used to sorts stacking order for stacked charts (seean example in thestack
page), the order of data points in line marks for connected scatterplots (seean example in theline
page), and which data points are plotted on top in a chart (the “zorder”, seean example in the gallery).
Property | Type | Description |
---|---|---|
order | OrderFieldDef |OrderFieldDef[] | OrderValueDef | OrderOnlyDef | Order of the marks.
Note: In aggregate plots, |
In addition to the generalfield definition properties, field definitions for theorder
channel can includesort
.
Property | Type | Description |
---|---|---|
sort | String | The sort order. One of |
In addition to the constantvalue
,value definitions of theorder
channel can include thecondition
property to specify conditional logic.
Property | Type | Description |
---|---|---|
condition | ConditionalValueDef |ConditionalValueDef[] | One or more value definition(s) witha parameter or a test predicate. Note: A field definition’s |
facet
,row
andcolumn
are special encoding channels that facets single plots intotrellis plots (or small multiples).
Property | Type | Description |
---|---|---|
facet | FacetFieldDef | A field definition for the (flexible) facet of trellis plots. If either |
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 thefacet documentation.