Scale
A scale is a function that maps a data value (e.g., numbers, strings) to a channel / property value (color, size, position). DXR's scales are tightly modeled after that of Vega-Lite's scales.
For the generic visual channels, DXR can infer the best scale specifications given the data type. However, the designer can still customize the scale by modifying the main scale specification parameters: type, domain, and range, as described below.
Scale Type Inferrence
DXR uses the same default scale types for a particular combination of data types and channels as Vega-Lite (documented here):
Scale Domain
A scale's domain describes the range or set of possible input values coming from the data. For quantitative data types, the domain is inferred as [0, max] and for categorical data types, this is inferred as the list of unique values that appear in the data in the form of a string array ["cat1", "cat2", "cat3", ..., "catN"].
Scale Range
A scale's range describes the range or set of possible output values that gets assigned to visual channels. Here are the inferrence or default range for the following channels:
- x, width: [0, width]
- y, height: [0, height]
- z, depth: [0, depth]
- length, size: [0, MAX(width, height, depth)]
- xrotation, yrotation, zrotation: [0, 360]
- xdirection, ydirection, zdirection: [0, 1]
- color: a color scheme is used depending on the type of data (see Color Schemes examples below)
- opacity: [0, 1]
Scale Type: Linear Scale
A linear scale maps an input quantitative (domain) value x to a proportional quantitative (range) value y using: y = mx + b.
Below is a bar chart example with the height and y channels using a linear scale to map the count data attribute domain [0, 100] to a height and y position range [0, 500]. Note that even if the scale parameters are not provided, DXR automatically infers the scale type, domain, and range according to the inferrence rules described above.
Scale Type: Point Scale
A point scale maps a discrete valued domain, e.g., ["cat1", "cat2", ..., "catN"], to a continuous valued quantitative range, e.g., [0, 500]. The point scale subdivides the range into a uniform set of step samples on which the range is sampled. Here is an illustration from the Vega-Lite scale documentation:
Below is an example that uses the point scale to map the categorical data domain Origin: ["Europe", "Japan", "USA"] to x spatial position range [0, 500]. Note that even if the scale parameters are not provided, DXR automatically infers the scale type, domain, and range according to the inferrence rules described above.
Scale Type: Ordinal Scale
An ordinal scale maps a discrete valued domain to a discrete valued range. For example, a categorical data type with a discrete domain, e.g., Origin: ["Europe", "Japan", "USA"], can be mapped to a discrete set of colors from a predefined list of colors or color scheme (see below for more information on color schemes).
Scale Type: Sequential Scale
A sequential scale maps a continuous quantitative data domain to a continuous range using an interpolator, e.g., linear color interpolation. The range and scheme properties (more info below) of a sequential scale can be customized to create different effects as in the example below:
Color Schemes
A color scheme is a list of colors that can be used to describe color ranges. The available color schemes in DXR corresponds to the JSON files found in the Assets/DxR/Resources/ColoSchemes/ directory. To add a custom color scheme to DXR, simply create a JSON file containing the color array of the scheme. The name of the scheme should be the same as the filename, and the file should be in the Assets/DxR/Resources/ColoSchemes/ folder. For example, to create the tableau10 color scheme, we create a file: Assets/DxR/Resources/ColoSchemes/tableau10.json with the contents below.
You can also specify a custom color scheme inline such as the following:
For color channels, the range specification is a keyword that specifies how data categories are mapped to color. Possible values are:
- category - for nominal data fields; uses tableau10 or tableau20 default color schemes.
- ordinal - for ordinal data fields; uses the ramp color scheme.
- sequential - for quantitative data fields; uses the ramp color scheme.
Some examples are provided below.
Category (default color scheme)
Category (custom color scheme)
Ordinal
Sequential (default color range)
Sequential (custom color range)
For sequential scale type, instead of a predefined color scheme, an inline color scheme can be provided as shown below by manually specifying the range.
