Skip to content

Commit 9bc3fb3

Browse files
mbostockFil
mbostock
and
Fil
authored
labelArrow option (observablehq#1566)
* labelArrow option * labelArrow docs (observablehq#1568) * document labelArrow * *up*, *right*, *down*, *left* * axis options edits * copy edits --------- Co-authored-by: Mike Bostock <[email protected]> --------- Co-authored-by: Philippe Rivière <[email protected]>
1 parent 168e8bf commit 9bc3fb3

File tree

107 files changed

+278
-245
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

107 files changed

+278
-245
lines changed

‎docs/features/legends.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@ When an ordinal *color* scale is used redundantly with a *symbol* scale, the *sy
6262
```js
6363
Plot.plot({
6464
grid: true,
65-
x: {label: "Body mass (g) →"},
66-
y: {label: "↑ Flipper length (mm)"},
65+
x: {label: "Body mass (g)"},
66+
y: {label: "Flipper length (mm)"},
6767
symbol: {legend: true},
6868
marks: [
6969
Plot.dot(penguins, {x: "body_mass_g", y: "flipper_length_mm", stroke: "species", symbol: "species"})

‎docs/features/scales.md‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -574,7 +574,7 @@ The **transform** scale option allows you to apply a function to all values befo
574574
Plot.plot({
575575
y: {
576576
grid: true,
577-
label: `↑ Temperature (°C)`,
577+
label: "Temperature (°C)",
578578
transform: (f) => (f - 32) * (5 / 9) // convert Fahrenheit to Celsius
579579
},
580580
marks: [
@@ -624,7 +624,7 @@ Plot.plot({
624624
},
625625
y: {
626626
transform: (d) => d / 1e6,
627-
label: "↑ Daily trade volume (millions)"
627+
label: "Daily trade volume (millions)"
628628
},
629629
marks: [
630630
Plot.barY(aapl.slice(-40), {x: "Date", y: "Volume"}),
@@ -723,7 +723,7 @@ The **transform** option allows you to apply a function to all values before the
723723
```js
724724
Plot.plot({
725725
y: {
726-
label: "↑ Temperature (°F)",
726+
label: "Temperature (°F)",
727727
transform: (f) => f * 9 / 5 + 32 // convert Celsius to Fahrenheit
728728
},
729729
marks: …
@@ -935,24 +935,28 @@ For a *band* scale, you can further fine-tune padding:
935935

936936
Align defaults to 0.5 (centered). Band scale padding defaults to 0.1 (10% of available space reserved for separating bands), while point scale padding defaults to 0.5 (the gap between the first point and the edge is half the distance of the gap between points, and likewise for the gap between the last point and the opposite edge). Note that rounding and mark insets (e.g., for bars and rects) also affect separation between adjacent marks.
937937

938-
Plot automatically generates [axis](../marks/axis.md) and optionally [grid](../marks/grid.md) marks for position scales. (For more control, declare these marks explicitly.) You can configure the implicit axes with the following scale options:
938+
Plot implicitly generates an [axis mark](../marks/axis.md) for position scales if one is not explicitly declared. (For more control, declare the axis mark explicitly.) The following [axis mark options](../marks/axis.md#axis-options) are also available as scale options, applying to the implicit axis:
939939

940-
* **axis** - *top* or *bottom* (or *both*) for *x* and *fx*; *left* or *right* (or *both*) for *y* and *fy*; null to suppress
940+
* **axis** - the axis **anchor**: *top*, *bottom* (*x* or *fx*); *left*, *right* (*y* or *fy*); *both*; null to suppress
941941
* **ticks** - the approximate number of ticks to generate, or interval, or array of values
942-
* **tickSize** - the length of each tick (in pixels; default 6 for *x* and *y*, or 0 for *fx* and *fy*)
943942
* **tickSpacing** - the approximate number of pixels between ticks (if **ticks** is not specified)
943+
* **tickSize** - the length of each tick (in pixels; default 6 for *x* and *y*, or 0 for *fx* and *fy*)
944944
* **tickPadding** - the separation between the tick and its label (in pixels; default 3)
945945
* **tickFormat** - either a function or specifier string to format tick values; see [Formats](./formats.md)
946946
* **tickRotate** - whether to rotate tick labels (an angle in degrees clockwise; default 0)
947-
* **grid** - whether to draw grid lines across the plot for each tick
948-
* **line** - if true, draw the axis line (only for *x* and *y*)
947+
* **fontVariant** - the font-variant attribute for ticks; defaults to *tabular-nums* if quantitative
949948
* **label** - a string to label the axis
950949
* **labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*
950+
* **labelArrow** - the label arrow: *auto* (default), *up*, *right*, *down*, *left*, *none*, or true
951951
* **labelOffset** - the label position offset (in pixels; default depends on margins and orientation)
952-
* **fontVariant** - the font-variant attribute for ticks; defaults to *tabular-nums* if quantitative
953952
* **ariaLabel** - a short label representing the axis in the accessibility tree
954953
* **ariaDescription** - a textual description for the axis
955954

955+
For an implicit [grid mark](../marks/grid.md), use the **grid** option. For an implicit [frame mark](../marks/frame.md) along one edge of the frame, use the **line** option.
956+
957+
* **grid** - whether to draw grid lines across the plot for each tick
958+
* **line** - if true, draw the axis line (only for *x* and *y*)
959+
956960
Top-level options are also supported as shorthand: **grid** (for *x* and *y* only; see [facets](./facets.md)), **label**, **axis**, **inset**, **round**, **align**, and **padding**. If the **grid** option is true, show a grid using *currentColor*; if specified as a string, show a grid with the specified color; if an approximate number of ticks, an interval, or an array of tick values, show corresponding grid lines.
957961

958962
## Sort mark option

‎docs/features/transforms.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ For example, given a [dataset of highway traffic](https://gist.github.com/chrtze
2828
```js
2929
Plot.plot({
3030
marginLeft: 120,
31-
x: {label: "Vehicles per hour (thousands) →", transform: (x) => x / 1000},
31+
x: {label: "Vehicles per hour (thousands)", transform: (x) => x / 1000},
3232
y: {label: null},
3333
marks: [
3434
Plot.ruleX([0]),
@@ -149,7 +149,7 @@ For greater control, you can also implement a custom **transform** function, all
149149
Plot.plot({
150150
y: {
151151
grid: true,
152-
label: "↑ Unemployment (%)"
152+
label: "Unemployment (%)"
153153
},
154154
color: {
155155
domain: [false, true],

‎docs/marks/area.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ When the baseline is not *y* = 0 but instead represents another dimension of dat
6767
```js
6868
Plot.plot({
6969
y: {
70-
label: "↑ Temperature (°F)",
70+
label: "Temperature (°F)",
7171
grid: true
7272
},
7373
marks: [
@@ -160,7 +160,7 @@ If a **fill** channel is specified, it is assumed to be ordinal or nominal; data
160160
Plot.plot({
161161
y: {
162162
transform: (d) => d / 1000,
163-
label: "↑ Unemployed (thousands)"
163+
label: "Unemployed (thousands)"
164164
},
165165
marks: [
166166
Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry"}),
@@ -181,7 +181,7 @@ Or, as a streamgraph with the **offset** stack transform option:
181181
Plot.plot({
182182
y: {
183183
transform: (d) => d / 1000,
184-
label: "↑ Unemployed (thousands)"
184+
label: "Unemployed (thousands)"
185185
},
186186
marks: [
187187
Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry", offset: "wiggle"}),

‎docs/marks/arrow.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ Plot.plot({
2323
inset: 10,
2424
x: {
2525
type: "log",
26-
label: "Population →"
26+
label: "Population"
2727
},
2828
y: {
29-
label: "↑ Inequality",
29+
label: "Inequality",
3030
ticks: 4
3131
},
3232
color: {

‎docs/marks/axis.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ Plot.plot({
7676
y: {percent: true},
7777
marks: [
7878
Plot.axisX({label: null, lineWidth: 8, marginBottom: 40}),
79-
Plot.axisY({label: "↑ Responses (%)"}),
79+
Plot.axisY({label: "Responses (%)"}),
8080
Plot.barY(responses, {x: "name", y: "value"}),
8181
Plot.ruleY([0])
8282
]
@@ -91,7 +91,7 @@ Or, you can use the **textAnchor** option to extend the *y*-axis tick labels to
9191
Plot.plot({
9292
marginTop: 0,
9393
marginLeft: 4,
94-
x: {ticks: 4, label: "Yield (kg) →"},
94+
x: {ticks: 4, label: "Yield (kg)"},
9595
marks: [
9696
Plot.barX([42, 17, 32], {y: ["🍌 banana", "🍎 apple", "🍐 pear"]}),
9797
Plot.axisY({textAnchor: "start", fill: "var(--vp-c-bg)", dx: 14})
@@ -349,20 +349,23 @@ Note that when an axis mark is declared explicitly (via the [**marks** plot opti
349349

350350
In addition to the [standard mark options](../features/marks.md), the axis mark supports the following options:
351351

352-
* **anchor** - the orientation: *top*, *bottom* (*x* or *fx*); *left*, *right* (*y* or *fy*); *both*; null to suppress
352+
* **anchor** - the axis orientation: *top* or *bottom* for *x* or *fx*; *left* or *right* for *y* or *fy*
353353
* **tickSize** - the length of the tick vector (in pixels; default 6 for *x* or *y*, or 0 for *fx* or *fy*)
354354
* **tickPadding** - the separation between the tick vector and its label (in pixels; default 3)
355355
* **tickFormat** - either a function or specifier string to format tick values; see [Formats](../features/formats.md)
356356
* **tickRotate** - whether to rotate tick labels (an angle in degrees clockwise; default 0)
357-
* **fontVariant** - the font-variant attribute for ticks; defaults to tabular-nums for quantitative axes
357+
* **fontVariant** - the ticks’ font-variant; defaults to *tabular-nums* for quantitative axes
358358
* **label** - a string to label the axis; defaults to the scale’s label, perhaps with an arrow
359359
* **labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*
360+
* **labelArrow** - the label arrow: *auto* (default), *up*, *right*, *down*, *left*, *none*, or true
360361
* **labelOffset** - the label position offset (in pixels; default depends on margins and orientation)
361362
* **color** - the color of the ticks and labels (defaults to *currentColor*)
362363
* **textStroke** - the color of the stroke around tick labels (defaults to *none*)
363364
* **textStrokeOpacity** - the opacity of the stroke around tick labels
364365
* **textStrokeWidth** - the thickness of the stroke around tick labels (in pixels)
365366

367+
The **labelArrow** option controls the arrow (↑, →, ↓, or ←) added to the axis label indicating the direction of ascending value; for example, horizontal position *x* typically increases in value going right→, while vertical position *y* typically increases in value going up↑. If *auto* (the default), the arrow will be added only if the scale is quantitative or temporal; if true, the arrow will also apply to ordinal scales, provided the domain is consistently ordered.
368+
366369
As a composite mark, the **stroke** option affects the color of the tick vector, while the **fill** option affects the color the text labels; both default to the **color** option, which defaults to *currentColor*. The **x** and **y** channels, if specified, position the ticks; if not specified, the tick positions depend on the axis **anchor**. The orientation of the tick labels likewise depends on the **anchor**. See the [text mark](./text.md) for details on available options for the tick and axis labels.
367370

368371
The axis mark’s [**facetAnchor**](../features/facets.md) option defaults to *top-empty* if anchor is *top*, *right-empty* if anchor is *right*, *bottom-empty* if anchor is *bottom*, and *left-empty* if anchor is *left*. This ensures the proper positioning of the axes with respect to empty facets.

‎docs/marks/bar.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ Above, since **y** was specified instead of **y1** and **y2**, the bar spans fro
5353
```js
5454
Plot.plot({
5555
marginLeft: 60,
56-
x: {label: "Frequency →"},
56+
x: {label: "Frequency"},
5757
y: {label: null},
5858
color: {legend: true},
5959
marks: [
@@ -201,7 +201,7 @@ Plot.plot({
201201
marginLeft: 60,
202202
marginRight: 60,
203203
label: null,
204-
x: {label: "Frequency →"},
204+
x: {label: "Frequency"},
205205
y: {padding: 0},
206206
marks: [
207207
Plot.barX(penguins, {fy: "island", y: "sex", x: 1, inset: 0.5}),

‎docs/marks/box.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,11 @@ Plot.plot({
6565
marginLeft: 60,
6666
y: {
6767
grid: true,
68-
label: "↑ Price"
68+
label: "Price"
6969
},
7070
x: {
7171
interval: 0.5,
72-
label: "Carats →",
72+
label: "Carats",
7373
labelAnchor: "right",
7474
tickFormat: (x) => x.toFixed(1)
7575
},
@@ -89,11 +89,11 @@ Plot.plot({
8989
marginLeft: 60,
9090
y: {
9191
grid: true,
92-
label: "↑ Price"
92+
label: "Price"
9393
},
9494
fx: {
9595
interval: 0.5,
96-
label: "Carats →",
96+
label: "Carats",
9797
labelAnchor: "right",
9898
tickFormat: (x) => x.toFixed(1)
9999
},

‎docs/marks/cell.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,9 @@ Plot.plot({
9595
x: {
9696
ticks: simpsons.filter((d) => d.number_in_season === 1).map((d) => d.id),
9797
tickFormat: (x) => simpsons.find((d) => d.id === x).season,
98-
label: "Season →",
99-
labelAnchor: "right"
98+
label: "Season",
99+
labelAnchor: "right",
100+
labelArrow: true
100101
},
101102
color: {
102103
type: "linear",

‎docs/marks/contour.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,8 @@ We can visualize this small grid directly with a [text mark](./text.md) using th
9191
```js
9292
Plot.plot({
9393
grid: true,
94-
x: {domain: [0, grid.width], label: "column →"},
95-
y: {domain: [0, grid.height], label: "↑ row"},
94+
x: {domain: [0, grid.width], label: "column"},
95+
y: {domain: [0, grid.height], label: "row"},
9696
marks: [
9797
Plot.text(grid.values, {
9898
text: Plot.identity,
@@ -208,8 +208,8 @@ As an alternative to interpolating discrete samples, you can supply values as a
208208
```js
209209
Plot.plot({
210210
aspectRatio: 1,
211-
x: {tickSpacing: 80, label: "x →"},
212-
y: {tickSpacing: 80, label: "↑ y"},
211+
x: {tickSpacing: 80, label: "x"},
212+
y: {tickSpacing: 80, label: "y"},
213213
color: {type: "diverging", legend: true, label: "sin(x) cos(y)"},
214214
marks: [
215215
Plot.contour({

0 commit comments

Comments
 (0)