Scale

Edit this page

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 uses Vega scales, which are derived from the d3-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 to position and mark property channels. To customize the scale of a field, users can provide a scale object as a part of the field definition to customize scale properties (e.g., type, domain, and range).

// Single View Specification
{
  "data": ... ,
  "mark": ... ,
  "encoding": {
    "x": {
      "field": ...,
      "type": ...,
      "scale": {                // scale
        "type": ...,
        ...
      },
      ...
    },
    "y": ...,
    ...
  },
  ...
}

Besides the scale property of each encoding channel, the top-level configuration object (config) also provides scale config (config: {scale: {...}}) for setting default scale properties for all scales.

For more information about guides that visualize the scales, please see the axes and legends pages.

Documentation Overview

Scale Types

The type 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 ("linear", "pow", "sqrt", "log", "time", "utc", "sequential").

2) Discrete Scales – mapping discrete domains to discrete ("ordinal") or continuous ("band" and "point") output ranges.

3) Discretizing Scales – mapping continuous domains to discrete output ranges ("bin-linear" and "bin-ordinal").

Default value: please see the scale type table.

By default, Vega-Lite use the following scale types for the following data types and encoding channels:

  Nominal / Ordinal Quantitative Bin-Quantitative1 Temporal
X, Y Band / Point2 Linear Linear 3 Time
Size, Opacity Point Linear Bin-Linear Time
Color Ordinal Sequential Bin-Ordinal Sequential
Shape Ordinal N/A N/A N/A

1 Quantitative fields with the bin transform. 2 For positional (x and y) ordinal and ordinal fields, "point" is the default scale type for all marks except bar and rect marks, which use "band" scales. 3 For static plots, both "linear" and "bin-linear" work with binned fields on x and y. However, panning and zooming do not work with discretized scales such as "bin-linear", thus we use "linear" as the default scale type for binned fields on x and y.

Scale Domains

By default, a scale in Vega-Lite draws domain values directly from a channel’s encoded field. Users can specify the domain property of a scale to customize its domain values. To sort the order of the domain of the encoded, the sort property of a field definition can be specified.

Property Type Description
domain Number[] | String[] | Boolean[] | DateTime[] | String | SelectionDomain

Customized domain values.

For quantitative fields, domain can take the form of a two-element array with minimum and maximum values. Piecewise scales can be created by providing a domain with more than two entries. If the input field is aggregated, domain can also be a string value "unaggregated", indicating that the domain should include the raw data values prior to the aggregation.

For temporal fields, domain can be a two-element array minimum and maximum values, in the form of either timestamps or the DateTime definition objects.

For ordinal and nominal fields, domain can be an array that lists valid input values.

The selection property can be used to interactively determine the scale domain.

Scale Ranges

The range of the scale represents the set of output visual values. Vega-Lite automatically determines the default range for each encoding channel using the following rules:

Channels Default Range
x The range is always [0, width]. Any directly specified range will be ignored. Range can be customized via the view’s width property or via range steps and paddings properties for band and point scales.
y The range is always [0, height]. Any directly specified range will be ignored. Range can be customized via the view’s height property or via range steps and paddings properties for band and point scales.
opacity Derived from the scale config’s min/maxOpacity.
color Derived from the following named ranges based on the field’s type:
"category" for nominal fields.
"ordinal" for ordinal fields.
"heatmap" for quantitative and temporal fields with "rect" marks and "ramp' for other marks.

See the color scheme section for examples.
size Derived from the following named ranges based on the mark 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 the pre-defined named range "symbol".

To customize range values, users can directly specify range, or the special range properties: rangeStep and padding for band and point scales and scheme for ordinal and sequential color scales.

Property Type Description
range Number[] | String[] | String

The range of the scale. One of:

Notes:

1) For sequential, ordinal, and discretizing color scales, you can also specify a color scheme instead of range.

2) Any directly specified range for x and y channels will be ignored. Range can be customized via the view’s corresponding size (width and height) or via range steps and paddings properties for band and point scales.

Color Schemes

Color schemes provide a set of named color palettes as a scale range for the color channel. Vega-Lite (via Vega) provides a collection of perceptually-motivated color schemes, many of which are drawn from the d3-scale, d3-scale-chromatic, and ColorBrewer projects.

By default, Vega-Lite assigns different default color schemes based on the types of the encoded fields:

  • Quantitative and temporal fields use the pre-defined named color range "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:

1) Set a custom scheme.

Property Type Description
scheme String | SchemeParams

A string indicating a color scheme name (e.g., "category10" or "viridis") or a scheme parameter object.

Discrete color schemes may be used with discrete or discretizing scales. Continuous color schemes are intended for use with sequential scales.

For the full list of supported scheme, please refer to the Vega Scheme reference.

For example, the following plot use the "category20b" scheme.

The scheme property can also be a scheme parameter object, which contain the following properties:

Property Type Description
name String

Required. A color scheme name for sequential/ordinal scales (e.g., "category10" or "viridis").

For the full list of supported scheme, please refer to the Vega Scheme reference.

extent Number[]

For sequential and diverging schemes only, determines the extent of the color range to use. For example [0.2, 1] will rescale the color scheme such that color values in the range [0, 0.2) are excluded from the scheme.

2) Setting the range property to an array of valid CSS color strings.

3) Change the default color schemes using the range config.

Continuous Scales

Continuous scales map a continuous domain (numbers or dates) to a continuous output range (pixel locations, sizes, colors). Supported continuous scale types for quantitative fields are "linear", "log", "pow", "sqrt", and "sequential". Meanwhile, supported continuous scale types for temporal fields are "time", "utc", and "sequential".

By default, Vega-Lite uses "linear" scales for quantitative fields and uses "time" scales for temporal fields for all encoding channels except for color, which uses "sequential" scales for both quantitative and temporal fields.

In addition to type, domain, and range, continuous scales support the following properties:

Property Type Description
clamp Boolean

If true, values that exceed the data domain are clamped to either the minimum or maximum range value

Default value: derived from the scale config’s clamp (true by default).

interpolate String | Object

The interpolation method for range values. By default, a general interpolator for numbers, dates, strings and colors (in RGB space) is used. For color ranges, this property allows interpolation in alternative color spaces. Legal values include rgb, hsl, hsl-long, lab, hcl, hcl-long, cubehelix and cubehelix-long (‘-long’ variants use longer paths in polar coordinate spaces). If object-valued, this property accepts an object with a string-valued type property and an optional numeric gamma property applicable to rgb and cubehelix interpolators. For more, see the d3-interpolate documentation.

Note: Sequential scales do not support interpolate as they have a fixed interpolator. Since Vega-Lite uses sequential scales for quantitative fields by default, you have to set the scale type to other quantitative scale type such as "linear" to customize interpolate.

nice Boolean | Number | String | Object

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, nice can be either a boolean flag or a number. If nice is a number, it will represent a desired tick count. This allows greater control over the step size used to extend the bounds, guaranteeing that the returned ticks will exactly cover the domain.

For temporal fields with time and utc scales, the nice value can be a string indicating the desired time interval. Legal values are "millisecond", "second", "minute", "hour", "day", "week", "month", and "year". Alternatively, time and utc scales can accept an object-valued interval specifier of the form {"interval": "month", "step": 3}, which includes a desired number of interval steps. Here, the domain would snap to quarter (Jan, Apr, Jul, Oct) boundaries.

Default value: true for unbinned quantitative fields; false otherwise.

padding Number

For continuous 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 zero, nice, domainMin, and domainMax properties.

For band scales, shortcut for setting paddingInner and paddingOuter to the same value.

For point scales, alias for paddingOuter.

Default value: For continuous scales, derived from the scale config’s continuousPadding. For band and point scales, see paddingInner and paddingOuter.

round Boolean

If true, rounds numeric output values to integers. This can be helpful for snapping to the pixel grid.

Default value: false.

zero Boolean

If true, ensures that a zero baseline value is included in the scale domain.

Default value: true for x and y channels if the quantitative field is not binned and no custom domain is provided; false otherwise.

Note: Log, time, and utc scales do not support zero.

Linear Scales

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 value x: y = mx + b.

Power Scales

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 value x: y = mx^k + b, where k is the exponent 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

The exponent of the pow scale.

Square Root Scales

Square root ("sqrt") scales are a convenient shorthand for power scales with an exponent of 0.5, indicating a square root transform.

Logarithmic Scales

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 value x: y = m loga(x) + b, where a is the logarithmic base.

As log(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

The logarithm base of the log scale (default 10).

Example: The following plot has a logarithmic y-scale.

Time and UTC Scales

Time and UTC scales ("time" and "utc") are continuous scales with a temporal domain: values in the input domain are assumed to be Date objects or timestamps. Time scales use the current local timezone setting. UTC scales instead use Coordinated Universal Time.

Sequential Scales

Sequential scales ("sequential") are similar to linear scales, but use a fixed interpolator to determine the output range. By default, Vega-lite uses sequential scales to encode continuous (quantitative and temporal) fields with colors.

To customize the range of a sequential scale, either a range array listing colors or a color scheme can be specified.

Piecewise Scales

We can use any types of continuous scales ("linear", "pow", "sqrt", "log", "time", "utc", "sequential") to create a diverging color graph by specifying a custom domain with multiple elements.

If range is specified, the number of elements in range should match with the number of elements in domain. Diverging color schemes are also useful as a range for a piecewise scale.

Example

Discrete Scales

Discrete scales map values from a discrete domain to a discrete or continuous range.

Ordinal Scales

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 for color and shape channels. For example, the following plot implicitly has two ordinal scales, which map the values of the field "Origin" to a set of colors and a set of shapes.

The range of an ordinal scale can be an array of desired output values, which are directly mapped to elements in the domain. Both domain and range array can be re-ordered to specify the order and mapping between the domain and the output range. For ordinal color scales, a custom scheme can be set as well.

Band and Point Scales

Band and point scales accept a discrete domain similar to ordinal 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 uniform bands. Band scales are typically used for bar charts with an ordinal or categorical dimension.

In addition to a standard numerical range value (such as [0, 500]), band scales can be given a fixed step 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 the d3-scale documentation illustrates how a band scale works:

Point scales ("point") are a variant of band 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 scale range values may be specified using either a numerical extent ([0, 500]) or a step size ({"step": 20}).

This image from the d3-scale documentation illustrates how a point scale works:

By default, Vega-Lite uses band scales for nominal and ordinal fields on position channels (x and y) of bar or rect marks. For x and y of other marks and size and opacity, 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 range of band and point scales, users can provide the following properties:

Property Type Description
padding Number

For continuous 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 zero, nice, domainMin, and domainMax properties.

For band scales, shortcut for setting paddingInner and paddingOuter to the same value.

For point scales, alias for paddingOuter.

Default value: For continuous scales, derived from the scale config’s continuousPadding. For band and point scales, see paddingInner and paddingOuter.

paddingInner Number

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 the scale config’s bandPaddingInner.

paddingOuter Number

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 the scale config’s bandPaddingOuter for band scales and pointPadding for point scales.

rangeStep Number | Null

The distance between the starts of adjacent bands or points in band and point scales.

If rangeStep is null or if the view contains the scale’s corresponding size (width for x scales and height for y scales), rangeStep will be automatically determined to fit the size of the view.

Default value: derived the scale config’s textXRangeStep (90 by default) for x-scales of text marks and rangeStep (21 by default) for x-scales of other marks and y-scales.

Warning: If rangeStep is null and the cardinality of the scale’s domain is higher than width or height, the rangeStep might become less than one pixel and the mark might not appear correctly.

round Boolean

If true, rounds numeric output values to integers. This can be helpful for snapping to the pixel grid.

Default value: false.

For example, we can set the rangeStep property to make the bands of the bars smaller.

Discretizing Scales

Discretizing scales break up a continuous domain into discrete segments, and then map values in each segment to a range value.

Bin-Linear Scales

Binned linear scales ("bin-linear") are a special type of linear scale for use with binned fields to correctly create legend labels. Vega-Lite always uses binned linear scales with binned quantitative fields on size and opacity channels.

For example, the following plot has a binned field on the size channel.

Bin-Ordinal Scales

Binned ordinal scales ("bin-ordinal") are a special type of ordinal scale for use with binned fields to correctly create legend labels. Vega-Lite always uses binned ordinal scales with binned quantitative fields on the color channel.

For example, the following plot has a binned field on the color channel.

Similar to ordinal color scales, a custom range or scheme can be specified for binned ordinal scales.

Configuration

// Top-level View Specification
{
  ...
  "config": {
    "scale": {
      ...                       // Scale Config
    },
    "range": {
      ...                       // Scale Range Config
    },
    ...
  }
  ...
}

Scale Config

To provide themes for all scales, the scale config (config: {scale: {...}}) can contain the following properties:

Property Type Description
bandPaddingInner Number

Default inner padding for x and y band-ordinal scales.

Default value: 0.1

bandPaddingOuter Number

Default outer padding for x and y band-ordinal scales. If not specified, by default, band scale’s paddingOuter is paddingInner/2.

clamp Boolean

If true, values that exceed the data domain are clamped to either the minimum or maximum range value

maxBandSize Number

The default max value for mapping quantitative fields to bar’s size/bandSize.

If undefined (default), we will use the scale’s rangeStep - 1.

minBandSize Number

The default min value for mapping quantitative fields to bar and tick’s size/bandSize scale with zero=false.

Default value: 2

maxFontSize Number

The default max value for mapping quantitative fields to text’s size/fontSize.

Default value: 40

minFontSize Number

The default min value for mapping quantitative fields to tick’s size/fontSize scale with zero=false

Default value: 8

maxOpacity Number

Default max opacity for mapping a field to opacity.

Default value: 0.8

minOpacity Number

Default minimum opacity for mapping a field to opacity.

Default value: 0.3

maxSize Number

Default max value for point size scale.

minSize Number

Default minimum value for point size scale with zero=false.

Default value: 9

maxStrokeWidth Number

Default max strokeWidth for strokeWidth (or rule/line’s size) scale.

Default value: 4

minStrokeWidth Number

Default minimum strokeWidth for strokeWidth (or rule/line’s size) scale with zero=false.

Default value: 1

pointPadding Number

Default outer padding for x and y point-ordinal scales.

Default value: 0.5

rangeStep Number | Null

Default range step for band and point scales of (1) the y channel and (2) the x channel when the mark is not text.

Default value: 21

round Boolean

If true, rounds numeric output values to integers. This can be helpful for snapping to the pixel grid. (Only available for x, y, and size scales.)

textXRangeStep Number

Default range step for x band and point scales of text marks.

Default value: 90

useUnaggregatedDomain Boolean

Use the source data range before aggregation as scale domain instead of aggregated data for aggregate axis.

This is equivalent to setting domain to "unaggregate" for aggregated quantitative fields by default.

This property only works with aggregate functions that produce values within the raw data domain ("mean", "average", "median", "q1", "q3", "min", "max"). For other aggregations that produce values outside of the raw data domain (e.g. "count", "sum"), this property is ignored.

Default value: false

Range Config

The scale range configuration (config: {range: {...}}) defines key-value mapping for named scale ranges: the keys represent the range names, while the values define valid range 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 String[] | VgScheme

Default range for nominal (categorical) fields.

diverging String[] | VgScheme

Default range for diverging quantitative fields.

heatmap String[] | VgScheme

Default range for quantitative heatmaps.

ordinal String[] | VgScheme

Default range for ordinal fields.

ramp String[] | VgScheme

Default range for quantitative and temporal fields.

symbol String[]

Default range palette for the shape channel.

See this file for the default values of named ranges.