Skip to content

Commit 6152309

Browse files
committed
more scale docs
1 parent 96c93cb commit 6152309

File tree

1 file changed

+22
-6
lines changed

1 file changed

+22
-6
lines changed

docs/features/scales.md

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1013,19 +1013,35 @@ Note: when the value of the sort option is a string or a function, it is interpr
10131013

10141014
## scale(*options*) <VersionBadge version="0.4.0" /> {#scale}
10151015

1016-
You can also create a standalone scale with Plot.**scale**(*options*). The *options* object must define at least one scale; see [Scale options](#scale-options) for how to define a scale. For example, here is a linear color scale with the default domain of [0, 1] and default scheme *turbo*:
1016+
You can also create a standalone scale with Plot.**scale**(*options*). The *options* object must define at least one scale; see [Scale options](#scale-options) for how to define a scale. For example, here is a categorical color scale with the *Tableau10* color scheme and a domain of fruits:
10171017

10181018
```js
1019-
const color = Plot.scale({color: {type: "linear"}});
1019+
const color = Plot.scale({color: {scheme: "Tableau10", domain: ["apple", "orange", "pear"]}});
10201020
```
10211021

10221022
Both [*plot*.scale](./plots.md#plot_scale) and [Plot.scale](#scale) return scale objects. These objects represent the actual (or “materialized”) scale options used by Plot, including the domain, range, interpolate function, *etc.* The scale’s label, if any, is also returned; however, note that other axis properties are not currently exposed. Point and band scales also expose their materialized bandwidth and step.
10231023

1024-
To reuse a scale across plots, pass the corresponding scale object into another plot specification:
1025-
10261024
```js
1027-
const plot1 = Plot.plot(options);
1028-
const plot2 = Plot.plot({...options, color: plot1.scale("color")});
1025+
color.domain // ["apple", "orange", "pear"]
10291026
```
10301027

10311028
For convenience, scale objects expose a *scale*.**apply**(*input*) method which returns the scale’s output for the given *input* value. When applicable, scale objects also expose a *scale*.**invert**(*output*) method which returns the corresponding input value from the scale’s domain for the given *output* value.
1029+
1030+
```js
1031+
color.apply("apple") // "#4e79a7"
1032+
```
1033+
1034+
To apply a standalone scale object to a plot, pass it to Plot.plot as the corresponding scale options, such as **color**:
1035+
1036+
:::plot
1037+
```js
1038+
Plot.cellX(["apple", "apple", "orange", "pear", "orange"]).plot({color})
1039+
```
1040+
:::
1041+
1042+
As another example, below are two plots with different options where the second plot uses the *color* scale from the first plot:
1043+
1044+
```js
1045+
const plot1 = Plot.plot({...options1});
1046+
const plot2 = Plot.plot({...options2, color: plot1.scale("color")});
1047+
```

0 commit comments

Comments
 (0)