You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+11-7Lines changed: 11 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -392,7 +392,7 @@ Plot.plot({
392
392
393
393
[Marks](https://observablehq.com/@data-workflows/plot-marks) visualize data as geometric shapes such as bars, dots, and lines. An single mark can generate multiple shapes: for example, passing a [Plot.barY](#plotbarydata-options) to [Plot.plot](#plotplotoptions) will produce a bar for each element in the associated data. Multiple marks can be layered into [plots](#plotplotoptions).
394
394
395
-
Mark constructors take two arguments: **data** and **options**. Together, these describe a tabular dataset and how to visualize it. Options that are shared by all of a mark’s generated shapes are known as *constants*, while options that vary with the mark’s data are known as *channels*. Channels are typically bound to [scales](#scale-options) and encode abstract values, such as time or temperature, as visual values, such as position or color.
395
+
Mark constructors take two arguments: **data** and **options**. Together these describe a tabular dataset and how to visualize it. Options that are shared by all of a mark’s generated shapes are known as *constants*, while options that vary with the mark’s data are known as *channels*. Channels are typically bound to [scales](#scale-options) and encode abstract values, such as time or temperature, as visual values, such as position or color.
396
396
397
397
A mark’s data is most commonly an array of objects representing a tabular dataset, such as the result of loading a CSV file, while a mark’s options bind channels (such as *x* and *y*) to columns in the data (such as *units* and *fruit*).
398
398
@@ -475,7 +475,7 @@ Insets are specified in pixels. Corner radii are specified in either pixels or p
475
475
476
476
[<imgsrc="./img/area.png"width="320"height="198"alt="an area chart">](https://observablehq.com/@data-workflows/plot-area)
477
477
478
-
[Source](./src/marks/area.js) · [Examples](https://observablehq.com/@data-workflows/plot-area) · Draws regions formed by a baseline (*x1*, *y1*) and a topline (*x2*, *y2*), as in an area chart. Often the baseline represents *y* = 0. While not required, typically the *x* and *y* scales are both quantitative.
478
+
[Source](./src/marks/area.js) · [Examples](https://observablehq.com/@data-workflows/plot-area) · Draws regions formed by a baseline (*x1*, *y1*) and a topline (*x2*, *y2*) as in an area chart. Often the baseline represents *y* = 0. While not required, typically the *x* and *y* scales are both quantitative.
479
479
480
480
The following channels are required:
481
481
@@ -536,33 +536,37 @@ For the required channels, see [Plot.barX](#plotbarxdata-options) and [Plot.barY
536
536
Plot.barX(alphabet, {y:"letter", x:"frequency"})
537
537
```
538
538
539
-
Returns a new horizontal bar with the given *data* and *options*. The following channels are required:
539
+
Returns a new horizontal bar↔︎ with the given *data* and *options*. The following channels are required:
540
540
541
541
***x1** - the starting horizontal position; bound to the *x* scale
542
542
***x2** - the ending horizontal position; bound to the *x* scale
543
543
544
+
If neither the **x1** nor **x2** option is specified, a **x** option may be specified as shorthand to apply an implicit [stackX transform](#plotstackxoptions); this is the typical configuration for a horizontal bar chart with bars aligned at *x* = 0. If the **x** option is not specified, it defaults to the identity function.
545
+
544
546
In addition to the [standard bar channels](#bar), the following optional channels are supported:
545
547
546
548
***y** - the vertical position; bound to the *y* scale, which must be a *band* scale
547
549
548
-
If an **x** option is specified, it is shorthand for the **x2** option with **x1** equal to zero; this is the typical configuration for a horizontal bar chart with bars aligned at *x* = 0. If the **y** channel is not specified, the bar will span the full vertical extent of the plot (or facet).
550
+
If the **y** channel is not specified, the bar will span the full vertical extent of the plot (or facet).
549
551
550
552
#### Plot.barY(*data*, *options*)
551
553
552
554
```js
553
555
Plot.barY(alphabet, {x:"letter", y:"frequency"})
554
556
```
555
557
556
-
Returns a new vertical bar with the given *data* and *options*. The following channels are required:
558
+
Returns a new vertical bar↕︎ with the given *data* and *options*. The following channels are required:
557
559
558
560
***y1** - the starting vertical position; bound to the *y* scale
559
561
***y2** - the ending vertical position; bound to the *y* scale
560
562
563
+
If neither the **y1** nor **y2** option is specified, a **y** option may be specified as shorthand to apply an implicit [stackY transform](#plotstackyoptions); this is the typical configuration for a vertical bar chart with bars aligned at *y* = 0. If the **y** option is not specified, it defaults to the identity function.
564
+
561
565
In addition to the [standard bar channels](#bar), the following optional channels are supported:
562
566
563
567
***x** - the horizontal position; bound to the *x* scale, which must be a *band* scale
564
568
565
-
If a **y** option is specified, it is shorthand for the **y2** option with **y1** equal to zero; this is the typical configuration for a vertical bar chart with bars aligned at *y* = 0. If the **x** channel is not specified, the bar will span the full horizontal extent of the plot (or facet).
569
+
If the **x** channel is not specified, the bar will span the full horizontal extent of the plot (or facet).
566
570
567
571
### Cell
568
572
@@ -854,7 +858,7 @@ Equivalent to [Plot.text](#plottextdata-options), except **y** defaults to the i
[Source](./src/marks/tick.js) · [Examples](https://observablehq.com/@data-workflows/plot-tick) · Draws an orthogonal line at the given horizontal ([Plot.tickX](#plottickxdata-options)) or vertical ([Plot.tickY](#plottickydata-options)) position, with an optional secondary position dimension along a band scale. (If the secondary dimension is quantitative instead of ordinal, use a [rule](#rule).) Ticks are often used to visualize distributions, as in a “barcode” plot.
861
+
[Source](./src/marks/tick.js) · [Examples](https://observablehq.com/@data-workflows/plot-tick) · Draws an orthogonal line at the given horizontal ([Plot.tickX](#plottickxdata-options)) or vertical ([Plot.tickY](#plottickydata-options)) position, with an optional secondary position dimension along a band scale. (If the secondary dimension is quantitative instead of ordinal, use a [rule](#rule).) Ticks are often used to visualize distributions as in a “barcode” plot.
858
862
859
863
For the required channels, see [Plot.tickX](#plottickxdata-options) and [Plot.tickY](#plottickydata-options). The tick mark supports the [standard mark options](#marks), including insets. The **stroke** option defaults to currentColor.
0 commit comments