Scales are functions that transform a domain of data values (numbers, dates, strings, etc.) to a range of visual values (pixels, colors, sizes). Internally, Vega-Lite usesVega scales, which are derived from thed3-scale library. For more background about scales, please see“Introducing d3-scale” by Mike Bostock.
Vega-Lite automatically creates scales for fields that are mapped toposition andmark property channels. To customize the scale of a field, users can provide ascale
object as a part of thefield definition to customize scale properties (e.g.,type,domain, andrange).
// A Single View or a Layer Specification{ ..., "mark/layer": ..., "encoding": { "x": { "field": ..., "type": ..., "scale": { // scale "type": ..., ... }, ... }, "y": ..., ... }, ...}
Besides thescale
property of each encoding channel, the top-level configuration object (config
) also providesscale config (config: {scale: {...}}
) for setting default scale properties for all scales.
For more information about guides that visualize the scales, please see theaxes andlegends pages.
Thetype
property can be specified to customize the scale type.
Property | Type | Description |
---|---|---|
type | String | The type of scale. Vega-Lite supports the following categories of scale types: 1)Continuous Scales – mapping continuous domains to continuous output ranges ( 2)Discrete Scales – mapping discrete domains to discrete ( 3)Discretizing Scales – mapping continuous domains to discrete output ranges Default value: please see thescale type table. |
By default, Vega-Lite use the following scale types for the followingdata types andencoding channels:
Nominal / Ordinal | Quantitative | Bin-Quantitative1 | Temporal | |
---|---|---|---|---|
X, Y | Band /Point2 | Linear | Linear | Time |
Size, Opacity | Point | Linear | Linear | Time |
Color | Ordinal | Linear | Bin-Ordinal | Linear |
Shape | Ordinal | N/A | N/A | N/A |
1 Quantitative fields with thebin
transform.2 For positional (x and y) nominal and ordinal fields,"band"
scale is the default scale type forbar, image, rect, and rule marks while"point"
is the default scales for all other marks.
By default, a scale in Vega-Lite draws domain values directly from a channel’s encoded field. Users can specify thedomain
property of a scale to customize its domain values. To sort the order of the domain of the encoded, thesort
property of afield definition can be specified.
Property | Type | Description |
---|---|---|
domain | Null[] | String[] | Number[] | Boolean[] |DateTime[] |ExprRef[] | String | ParameterExtent | DomainUnionWith |ExprRef | Customized domain values in the form of constant values or dynamic values driven by a parameter. 1) Constant
2) Constant 3) Constant 4) To combine (union) specified constant domain with the field’s values, 5) Domain can also takes an object defining a field or encoding of a parameter thatinteractively determines the scale domain. |
domainMax | Number |DateTime |ExprRef | Sets the maximum value in the scale domain, overriding the |
domainMin | Number |DateTime |ExprRef | Sets the minimum value in the scale domain, overriding the domain property. This property is only intended for use with scales having continuous domains. |
domainMid | Number |ExprRef | Inserts a single mid-point value into a two-element domain. The mid-point value must lie between the domain minimum and maximum values. This property can be useful for setting a midpoint fordiverging color scales. The domainMid property is only intended for use with scales supporting continuous, piecewise domains. |
domainRaw | ExprRef | An expression for an array of raw values that, if non-null, directly overrides thedomain property. This is useful for supporting interactions such as panning or zooming a scale. The scale may be initially determined using a data-driven domain, then modified in response to user input by setting the rawDomain value. |
A common use case for thedomain
property is to limit, for example, thex
range of values to include in a plot. However, setting the domain property alone is insufficient to achieve the desired effect.
For a time scale, we can set scale domain to an arraydatetime objects, as shown below.
For example, consider the line plot specification below in which thex
domain is restricted to the range[300, 450]
.
There are two approaches to keep the mark from being plotted outside the desiredx
range of values.
The first one is to setclip: true
in mark definition.
The second approach is to usetransform
. Note that these two approaches have slightly different behaviors. Usingtransform
removes unwanted data points, yet settingclip
totrue
clips the mark to be the enclosing group’s width and height.
domainRaw
to bind domain interactivelyThe range of the scale represents the set of output visual values. Vega-Lite automatically determines the default range for eachencoding channel using the following rules:
Channels | Default Range |
---|---|
x | The range isby default[0, width] . |
y | The range isby default[0, height] . |
opacity | Derived from thescale config’smin/maxOpacity . |
color | Derived from the followingnamed ranges based on the field’stype :• "category" fornominal fields.• "ordinal" forordinal fields.• "heatmap" forquantitative andtemporal fields with"rect" marks and"ramp' for other marks.See thecolor scheme section for examples. |
size | Derived from the followingnamed ranges based on themark type:• min/maxBandSize for bar and tick.• min/maxStrokeWidth for line and rule.• min/maxSize for point, square, and circle• min/maxFontSize for text |
shape | Derived from thepre-defined named range"symbol" . |
To customize range values, users can directly specifyrange
or specify the specialscheme
property forordinal andcontinuous color scales.
Property | Type | Description |
---|---|---|
range | String | Number[] | String[] | Number[] |ExprRef[] | FieldRange | The range of the scale. One of:
Notes: 1) For color scales you can also specify a color 2) Any directly specified |
rangeMin | Number | String |ExprRef | Sets the minimum value in the scale range, overriding the |
rangeMax | Number | String |ExprRef | Sets the maximum value in the scale range, overriding the |
In this example, we create a scale that maps the field"l"
to colors specified in the field"c"
:
Note: This only works if there is a 1:1 mapping between the color domain field (l
) and the range field (c
).
We may userangeMin
if we want to override just the minimum value of the range, while keeping the default maximum value of the range.
Similarly, we may userangeMax
if we want to override just the maximum value of the range, while keeping the default minimum value of the range.
Color schemes provide a set of named color palettes as a scale range for thecolor
channel. Vega-Lite (via Vega) provides a collection of perceptually-motivated color schemes, many of which are drawn from thed3-scale,d3-scale-chromatic, andColorBrewer projects.
By default, Vega-Lite assigns differentdefault color schemes based on the types of the encoded fields:
"categorical"
pre-defined named range (the"tableau10"
scheme by default)."ordinal"
pre-defined named color range (the"blues"
color scheme by default)."heatmap"
(the"viridis"
scheme by default) for rect marks and"ramp"
(the"blues"
scheme by default) for other marks.There are multiple ways to customize the scale range for the color encoding channel:
scheme
.Property | Type | Description |
---|---|---|
scheme | ColorScheme |SchemeParams |ExprRef | A string indicating a colorscheme name (e.g., Discrete color schemes may be used withdiscrete ordiscretizing scales. Continuous color schemes are intended for use with color scales. To set a custom scheme, instead set the list of valuesas the scale range. For the full list of supported schemes, please refer to theVega Scheme reference. |
You can customize the scheme by referencing anexisting color scheme. For example, the following plot uses the"category20b"
scheme.
Thescheme
property can also be ascheme parameter object, which contain the following properties:
Property | Type | Description |
---|---|---|
name | ColorScheme | Required. A color scheme name for ordinal scales (e.g., For the full list of supported schemes, please refer to theVega Scheme reference. |
extent | Number[] | The extent of the color range to use. For example |
count | Number | The number of colors to use in the scheme. This can be useful for scale types such as |
range
property to an array of valid CSS color strings.See therange config documentation for details.
In addition totype
,domain
, andrange
, all scales share the following properties:
Property | Type | Description |
---|---|---|
reverse | Boolean |ExprRef | If true, reverses the order of the scale range.Default value: |
round | Boolean |ExprRef | If Default value: |
Continuous scales map a continuous domain (numbers or dates) to a continuous output range (pixel locations, sizes, colors). Supported continuous scale types forquantitative fields are"linear"
,"log"
,"pow"
,"sqrt"
, and"symlog"
. Meanwhile, supported continuous scale types fortemporal fields are"time"
,"utc"
, and"symlog"
.
By default, Vega-Lite uses"linear"
scales for quantitative fields and uses"time"
scales for temporal fields for allencoding channels.
In addition totype
,domain
, andrange
, continuous scales support the following properties:
Property | Type | Description |
---|---|---|
clamp | Boolean |ExprRef | If Default value: derived from thescale config’s |
interpolate | String |ExprRef | ScaleInterpolateParams | The interpolation method for range values. By default, a general interpolator for numbers, dates, strings and colors (in HCL space) is used. For color ranges, this property allows interpolation in alternative color spaces. Legal values include
|
nice | Boolean | Number | String | Object |ExprRef | Extending the domain so that it starts and ends on nice round values. This method typically modifies the scale’s domain, and may only extend the bounds to the nearest round value. Nicing is useful if the domain is computed from data and may be irregular. For example, for a domain of[0.201479…, 0.996679…], a nice domain might be[0.2, 1.0]. For quantitative scales such as linear, For temporal fields with time and utc scales, the Default value: |
padding | Number |ExprRef | Forcontinuous scales, expands the scale domain to accommodate the specified number of pixels on each of the scale range. The scale range must represent pixels for this parameter to function as intended. Padding adjustment is performed prior to all other adjustments, including the effects of the Forband scales, shortcut for setting Forpoint scales, alias for Default value: Forcontinuous scales, derived from thescale config’s |
zero | Boolean |ExprRef | If Default value: Note: Log, time, and utc scales do not support |
Linear scales ("linear"
) are quantitative scales scales that preserve proportional differences. Each range value y can be expressed as a linear function of the domain valuex:y = mx + b.
Power scales ("pow"
) are quantitative scales scales that apply an exponential transform to the input domain value before the output range value is computed. Each range value y can be expressed as a polynomial function of the domain valuex:y = mx^k + b, wherek is theexponent
value. Power scales also support negative domain values, in which case the input value and the resulting output value are multiplied by -1.
Property | Type | Description |
---|---|---|
exponent | Number |ExprRef | The exponent of the |
Square root ("sqrt"
) scales are a convenient shorthand for power scales with anexponent
of0.5
, indicating a square root transform.
Log scales ("log"
) are quantitative scales in which a logarithmic transform is applied to the input domain value before the output range value is computed. Log scales are particularly useful for plotting data that varies over multiple orders of magnitude. The mapping to the range value y can be expressed as a logarithmic function of the domain valuex:y = m loga(x) + b, wherea is the logarithmicbase
.
Aslog(0) = -∞, a log scale domain must be strictly-positive or strictly-negative; the domain must not include or cross zero. A log scale with a positive domain has a well-defined behavior for positive values, and a log scale with a negative domain has a well-defined behavior for negative values. (For a negative domain, input and output values are implicitly multiplied by -1.) The behavior of the scale is undefined if you run a negative value through a log scale with a positive domain or vice versa.
Property | Type | Description |
---|---|---|
base | Number |ExprRef | The logarithm base of the |
Example: The following plot has a logarithmic y-scale.
Symmetric log scales (symlog) are quantitative scales scales that provide scaling similar to log scales, but supports non-positive numbers. Symlog scales are particularly useful for plotting data that varies over multiple orders of magnitude but includes negative- or zero-valued data. For more, see“A bi-symmetric log transformation for wide-range data” by Webber for more.
Property | Type | Description |
---|---|---|
constant | Number |ExprRef | A constant determining the slope of the symlog function around zero. Only used for Default value: |
Time and UTC scales ("time"
and"utc"
) arecontinuous scales with a temporal domain: values in the input domain are assumed to beDate objects or timestamps. Time scales use the current local timezone setting. UTC scales instead useCoordinated Universal Time.
We can use any types of continuous scales ("linear"
,"pow"
,"sqrt"
,"log"
,"symlog"
,"time"
,"utc"
to create a diverging color graph by specifying a customdomain
with multiple elements.
Ifrange
is specified, the number of elements inrange
should match with the number of elements indomain
.Diverging colorscheme
s are also useful as a range for a piecewise scale.
Example
Discrete scales map values from a discrete domain to a discrete or continuous range.
Ordinal scales ("ordinal"
) have a discrete domain and range. These scales function as a “lookup table” from a domain value to a range value.
By default, Vega-Lite automatically creates ordinal scales forcolor
andshape
channels. For example, the following plot implicitly has two ordinal scales, which map the values of the field"Origin"
to a set ofcolor
s and a set ofshape
s.
Therange
of an ordinal scale can be an array of desired output values, which are directly mapped to elements in thedomain
. Bothdomain
andrange
array can be re-ordered to specify the order and mapping between the domain and the output range. For ordinal color scales, a customscheme
can be set as well.
Band and point scales accept a discrete domain similar toordinal scales, but map this domain to a continuous, numeric output range such as pixels.
Band scales ("band"
) compute the discrete output values by dividing the continuous range into uniformbands. Band scales are typically used for bar charts with an ordinal or categorical dimension.
In addition to a standard numericalrange value (such as[0, 500]
), band scales can be given a fixedstep size for each band. The actual range is then determined by both the step size and the cardinality (element count) of the input domain.
This image from thed3-scale documentation illustrates how a band scale works:
Point scales ("point"
) are a variant ofband scales where the internal band width is fixed to zero. Point scales are typically used for scatterplots with an ordinal or categorical dimension. Similar to band scales, point scalerange values may be specified using either a numerical extent ([0, 500]
) or a step size ({"step": 20}
).
This image from thed3-scale documentation illustrates how a point scale works:
By default, Vega-Lite uses band scales for nominal and ordinal fields onposition channels (x
andy
) ofbar orrect marks. Forx
andy
of other marks andsize
andopacity
, Vega-Lite uses point scales by default.
For example, the following bar chart has uses a band scale for its x-position.
To customize the step size of band scales for x/y-fields, we can set the step property of the view’swidth
/height
.
For example, we can either make a bar chart have a fixed width:
or set the width per discrete step:
To customize the range of band and point scales, users can provide the following properties:
Property | Type | Description |
---|---|---|
align | Number |ExprRef | The alignment of the steps within the scale range. This value must lie in the range Default value: |
padding | Number |ExprRef | Forcontinuous scales, expands the scale domain to accommodate the specified number of pixels on each of the scale range. The scale range must represent pixels for this parameter to function as intended. Padding adjustment is performed prior to all other adjustments, including the effects of the Forband scales, shortcut for setting Forpoint scales, alias for Default value: Forcontinuous scales, derived from thescale config’s |
paddingInner | Number |ExprRef | The inner padding (spacing) within each band step of band scales, as a fraction of the step size. This value must lie in the range [0,1]. For point scale, this property is invalid as point scales do not have internal band widths (only step sizes between bands). Default value: derived from thescale config’s |
paddingOuter | Number |ExprRef | The outer padding (spacing) at the ends of the range of band and point scales, as a fraction of the step size. This value must lie in the range [0,1]. Default value: derived from thescale config’s |
Discretizing scales break up a continuous domain into discrete segments, and then map values in each segment to a range value.
Binned linear scales ("bin-linear"
) are a special type of linear scale for use withbinned fields to correctly create legend labels. Vega-Litealways uses binned linear scales with binned quantitative fields on size and opacity channels.
For example, the following plot has a binned field on thesize
channel.
Binned ordinal scales ("bin-ordinal"
) are a special type of ordinal scale for use withbinned fields to correctly create legend labels. Vega-Litealways uses binned ordinal scales with binned quantitative fields on the color channel.
For example, the following plot has a binned field on thecolor
channel.
Similar toordinal color scales, a customrange
orscheme
can be specified for binned ordinal scales.
In addition,bins
property can be used to specify bin boundaries over the scale domain.
Property | Type | Description |
---|---|---|
bins | ScaleBins | Bin boundaries can be provided to scales as either an explicit array of bin boundaries or as a bin specification object. The legal values are:
|
The bin specification object for the scalebins
properties support the following properties:
Property | Type | Description |
---|---|---|
bins | Any |
Quantile scales ("quantile"
) map a sample of input domain values to a discrete range based on computedquantile boundaries. The domain is considered continuous and thus the scale will accept any reasonable input value; however, the domain is specified as a discrete set of sample values. The number of values in (i.e., the cardinality of) the output range determines the number of quantiles that will be computed from the domain. To compute the quantiles, the domain is sorted, and treated as a population of discrete values. The resulting quantile boundaries segment the domain into groups with roughly equals numbers of sample points per group. If therange
is not specified, the domain will be segmented into 4 quantiles (quartiles) by default.
Quantile scales are particularly useful for creating color or size encodings with a fixed number of output values. Using a discrete set of encoding levels (typically between 5-9 colors or sizes) sometimes supports more accurate perceptual comparison than a continuous range. For related functionality seequantize scales, which partition the domain into uniform domain extents, rather than groups with equal element counts. Quantile scales have the benefit of evenly distributing data points to encoded values. In contrast, quantize scales uniformly segment the input domain and provide no guarantee on how data points will be distributed among the output visual values.
Quantize scales ("quantize"
) are similar tolinear scales, except they use a discrete rather than continuous range. Thequantize
scale maps continuous value to a discrete range by dividing the domain into uniform segments based on the number of values in (i.e., the cardinality of) the output range. Each range valuey can be expressed as a quantized linear function of the domain valuex:y = m round(x) + b. If therange
property is not specified, the domain will be divided into 4 uniform segments by default.
Quantize scales are particularly useful for creating color or size encodings with a fixed number of output values. Using a discrete set of encoding levels (typically between 5-9 colors or sizes) sometimes supports more accurate perceptual comparison than a continuous range. For related functionality seequantile scales, which partition the domain into groups with equal element counts, rather than uniform domain extents.
Property | Type | Description |
---|---|---|
nice | Boolean | Number | String | Object |ExprRef | Extending the domain so that it starts and ends on nice round values. This method typically modifies the scale’s domain, and may only extend the bounds to the nearest round value. Nicing is useful if the domain is computed from data and may be irregular. For example, for a domain of[0.201479…, 0.996679…], a nice domain might be[0.2, 1.0]. For quantitative scales such as linear, For temporal fields with time and utc scales, the Default value: |
zero | Boolean |ExprRef | If Default value: Note: Log, time, and utc scales do not support |
Threshold scales ("threshold"
) are similar toquantize scales, except they allow mapping of arbitrary subsets of the domain (not uniform segments) to discrete values in the range. The input domain is still continuous, and divided into slices based on a set of threshold values provided to therequireddomain
property. Therange
property must have N+1 elements, where N is the number of threshold boundaries provided in the domain.
To directly encode the data value, thescale
property can be set tonull
.
For example, the follow bar chart directly encodes color names in the data.
// Top-level View Specification{ ... "config": { "scale": { ... // Scale Config }, "range": { ... // Scale Range Config }, ... } ...}
To provide themes for all scales, the scale config (config: {scale: {...}}
) can contain the following properties:
Property | Type | Description |
---|---|---|
bandPaddingInner | Number |ExprRef | Default inner padding for Default value:
|
barBandPaddingInner | Number |ExprRef | Default inner padding for Default value: |
rectBandPaddingInner | Number |ExprRef | Default inner padding for Default value: |
bandWithNestedOffsetPaddingInner | Number |ExprRef | Default inner padding for Default value: |
offsetBandPaddingInner | Number |ExprRef | Default padding inner for xOffset/yOffset’s band scales. Default Value: |
bandPaddingOuter | Number |ExprRef | Default outer padding for Default value: |
bandWithNestedOffsetPaddingOuter | Number |ExprRef | Default outer padding for Default value: |
offsetBandPaddingOuter | Number |ExprRef | Default padding outer for xOffset/yOffset’s band scales. Default Value: |
continuousPadding | Number |ExprRef | Default padding for continuous x/y scales. Default: The bar width for continuous x-scale of a vertical bar and continuous y-scale of a horizontal bar.; |
pointPadding | Number |ExprRef | Default outer padding for Default value: |
Property | Type | Description |
---|---|---|
maxBandSize | Number | The default max value for mapping quantitative fields to bar’s size/bandSize. If undefined (default), we will use the axis’s size (width or height) - 1. |
minBandSize | Number | The default min value for mapping quantitative fields to bar and tick’s size/bandSize scale. Default value: |
maxFontSize | Number | The default max value for mapping quantitative fields to text’s size/fontSize scale. Default value: |
minFontSize | Number | The default min value for mapping quantitative fields to text’s size/fontSize scale. Default value: |
maxOpacity | Number | Default max opacity for mapping a field to opacity. Default value: |
minOpacity | Number | Default minimum opacity for mapping a field to opacity. Default value: |
maxSize | Number | Default max value for point size scale. |
minSize | Number | Default minimum value for point size scale. Default value: |
maxStrokeWidth | Number | Default max strokeWidth for the scale of strokeWidth for rule and line marks and of size for trail marks. Default value: |
minStrokeWidth | Number | Default minimum strokeWidth for the scale of strokeWidth for rule and line marks and of size for trail marks. Default value: |
Property | Type | Description |
---|---|---|
invalid | ScaleInvalidDataConfig | An object that defines scale outputs per channel for invalid values (nulls and NaNs on a continuous scale).
Example: Setting this Seehttps://vega.github.io/vega-lite/docs/invalid-data.html for more details. |
Property | Type | Description |
---|---|---|
clamp | Boolean |ExprRef | If true, values that exceed the data domain are clamped to either the minimum or maximum range value |
round | Boolean |ExprRef | If true, rounds numeric output values to integers. This can be helpful for snapping to the pixel grid. (Only available for |
xReverse | Boolean |ExprRef | Reverse x-scale by default (useful for right-to-left charts). |
useUnaggregatedDomain | Boolean | Use the source data range before aggregation as scale domain instead of aggregated data for aggregate axis. This is equivalent to setting This property only works with aggregate functions that produce values within the raw data domain ( Default value: |
zero | Boolean | Default Default value: |
The scale range configuration (config: {range: {...}}
) defines key-value mapping for named scale ranges: the keys represent the range names, while the values define validrange
or, for named color ranges,Vega scheme definitions.
By default, Vega-Lite (via Vega) includes the following pre-defined named ranges:
Property | Type | Description |
---|---|---|
category | RangeScheme |Color[] | Defaultcolor scheme for categorical data. |
diverging | RangeScheme |Color[] | Defaultcolor scheme for diverging quantitative ramps. |
heatmap | RangeScheme |Color[] | Defaultcolor scheme for quantitative heatmaps. |
ordinal | RangeScheme |Color[] | Defaultcolor scheme for rank-ordered data. |
ramp | RangeScheme |Color[] | Defaultcolor scheme for sequential quantitative ramps. |
symbol | String[] | Array ofsymbol names or paths for the default shape palette. |
Seethis file for the default values of named ranges.