|
6 | 6 |
|
7 | 7 | The new [auto mark](./README.md#auto) ([Plot.auto](./README.md#plotautodata-options)) automatically selects a mark type that best represents the dimensions of the given data according to some simple heuristics. The auto mark is intended to support fast exploratory analysis where the goal is to get a useful plot as quickly as possible. It’s also great if you’re new to Plot, since you can get started with a minimal API. For example,
|
8 | 8 |
|
9 |
| -[TK image] |
| 9 | +[<img src="./img/auto-dot.webp" width="640" alt="A scatterplot height and weight of olympic athletes.">](https://observablehq.com/@observablehq/plot-auto) |
10 | 10 |
|
11 | 11 | ```js
|
12 | 12 | Plot.auto(olympians, {x: "height", y: "weight"}).plot()
|
13 | 13 | ```
|
14 | 14 |
|
15 |
| -makes a scatterplot (equivalent to [dot](./README.md#dot)); |
| 15 | +makes a scatterplot (equivalent to [dot](./README.md#plotdotdata-options)); while adding **color** |
16 | 16 |
|
17 |
| -[TK image] |
| 17 | +[<img src="./img/auto-bin-color.webp" width="640" alt="A heatmap of .">](https://observablehq.com/@observablehq/plot-auto) |
| 18 | + |
| 19 | +```js |
| 20 | +Plot.auto(olympians, {x: "height", y: "weight", color: "count"}).plot() |
| 21 | +``` |
| 22 | + |
| 23 | +makes a heatmap (equivalent to [rect](./README.md#plotrectdata-options) and [bin](./README.md#plotbinoutputs-options); chosen since _height_ and _weight_ are quantitative); |
| 24 | + |
| 25 | +[<img src="./img/auto-line.webp" width="640" alt="A line chart of Apple stock price.">](https://observablehq.com/@observablehq/plot-auto) |
18 | 26 |
|
19 | 27 | ```js
|
20 | 28 | Plot.auto(aapl, {x: "Date", y: "Close"}).plot()
|
21 | 29 | ```
|
22 | 30 |
|
23 |
| -makes a line chart (equivalent to [lineY](./README.md#line); chosen because the selected *x* dimension *Date* is temporal and monotonic, _i.e._, the data is in chronological order); |
| 31 | +makes a line chart (equivalent to [lineY](./README.md#plotlineydata-options); chosen because the selected *x* dimension *Date* is temporal and monotonic, _i.e._, the data is in chronological order); |
24 | 32 |
|
25 |
| -[TK image] |
| 33 | +[<img src="./img/auto-bin.webp" width="640" alt="A histogram of penguin body mass.">](https://observablehq.com/@observablehq/plot-auto) |
26 | 34 |
|
27 | 35 | ```js
|
28 | 36 | Plot.auto(penguins, {x: "body_mass_g"}).plot()
|
29 | 37 | ```
|
30 | 38 |
|
31 |
| -makes a histogram (equivalent to [rectY](./README.md#rect) and [binX](./README.md#bin); chosen because the _body_mass_g_ column is quantitative); |
| 39 | +makes a histogram (equivalent to [rectY](./README.md#plotrectydata-options) and [binX](./README.md#plotbinxoutputs-options); chosen because the _body_mass_g_ column is quantitative); |
32 | 40 |
|
33 |
| -[TK image] |
| 41 | +[<img src="./img/auto-group.webp" width="640" alt="A vertical bar chart of penguins by island.">](https://observablehq.com/@observablehq/plot-auto) |
34 | 42 |
|
35 | 43 | ```js
|
36 | 44 | Plot.auto(penguins, {x: "island"}).plot()
|
37 | 45 | ```
|
38 | 46 |
|
39 |
| -makes a bar chart (equivalent to [barY](./README.md#bar) and [groupX](./README.md#group); chosen because the _island_ column is categorical). |
| 47 | +makes a bar chart (equivalent to [barY](./README.md#plotbarydata-options) and [groupX](./README.md#plotgroupxoutputs-options); chosen because the _island_ column is categorical). |
40 | 48 |
|
41 | 49 | Plot’s [axes](./README.md#axis) and [grids](./README.md#axis) are now proper marks, affording a high degree of customizability. This has been one of our most asked-for features, closing more than a dozen feature requests!
|
42 | 50 |
|
|
0 commit comments