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
+10-8Lines changed: 10 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -236,7 +236,7 @@ Plot automatically generates axes for position scales. You can configure these a
236
236
**scale*.**labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*
237
237
**scale*.**labelOffset** - the label position offset (in pixels; default 0, typically for facet axes)
238
238
239
-
Plot does not currently generate a legend for the *color*, *radius*, or *opacity* scales, but when it does, we expect that some of the above options will also be used to configure legends. Top-level options are also supported as shorthand: **grid** (for *x* and *y* only; see [facet.grid](#facet-options)), **inset**, **round**, **align**, and **padding**.
239
+
Plot does not currently generate a legend for the *color*, *radius*, or *opacity* scales, but when it does, we expect that some of the above options will also be used to configure legends. Top-level options are also supported as shorthand: **grid** (for *x* and *y* only; see [facet.grid](#facets)), **inset**, **round**, **align**, and **padding**.
240
240
241
241
### Color options
242
242
@@ -349,7 +349,9 @@ Plot.plot({
349
349
})
350
350
```
351
351
352
-
### Facet options
352
+
## Facets
353
+
354
+
[<imgsrc="./img/frame.png"width="320"height="198"alt="a faceted scatterplot with a frame around each facet">](https://observablehq.com/@data-workflows/plot-facets)
353
355
354
356
The *facet* option enables faceting. When faceting, two additional band scales may be configured:
355
357
@@ -358,7 +360,7 @@ The *facet* option enables faceting. When faceting, two additional band scales m
358
360
359
361
The following *facet* options are supported:
360
362
361
-
* facet.**data** - the data to be split into multiple facets
363
+
* facet.**data** - the data to be split into multiple facets
362
364
* facet.**x** - horizontal facet channel
363
365
* facet.**y** - vertical facet channel
364
366
* facet.**marginTop** - the top margin
@@ -367,18 +369,18 @@ The following *facet* options are supported:
367
369
* facet.**marginLeft** - the left margin
368
370
* facet.**grid** - if true, draw grid lines for each facet
369
371
370
-
Marks that consume the same *data* as the facet will use on each facet the subset of this data that corresponds to the facet channels. Data is faceted according to strict equality (`===`): if a mark’s data is strictly equal to the facet data, the mark is faceted; otherwise, the mark is repeated for each facet. You can disable faceting for a specific mark by giving it a shallow copy of the data.
372
+
Marks whose datais strictly equal to (`===`) the facet data will be filtered within each facet to show the current facet’s subset, whereas other marks will be repeated across facets. You can disable faceting for an individual mark by giving it a shallow copy of the data, say using [*array*.slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice).
371
373
372
374
```js
373
375
Plot.plot({
374
376
facet: {
375
377
data: penguins,
376
378
x:"sex"
377
-
}
379
+
},
378
380
marks: {
379
-
Plot.frame(), // draws a frame on all facets
380
-
Plot.dot(penguins.slice(), {fill:"grey", x:… }), //shallow copy, draws all individuals on each facet
381
-
Plot.dot(penguins, {fill:"blue", x:… }), // draws the facet's data subset in blue
381
+
Plot.frame(), // draws a outline around each facet
382
+
Plot.dot(penguins.slice(), {fill:"grey", x: …}), // draws all penguins on each facet
383
+
Plot.dot(penguins, {fill:"blue", x: …}), // draws only the current facet’s subset
0 commit comments