Skip to content

Commit 4070805

Browse files
committed
Update README
1 parent 20c93b4 commit 4070805

File tree

1 file changed

+10
-8
lines changed

1 file changed

+10
-8
lines changed

README.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,7 @@ Plot automatically generates axes for position scales. You can configure these a
236236
* *scale*.**labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*
237237
* *scale*.**labelOffset** - the label position offset (in pixels; default 0, typically for facet axes)
238238

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**.
240240

241241
### Color options
242242

@@ -349,7 +349,9 @@ Plot.plot({
349349
})
350350
```
351351

352-
### Facet options
352+
## Facets
353+
354+
[<img src="./img/frame.png" width="320" height="198" alt="a faceted scatterplot with a frame around each facet">](https://observablehq.com/@data-workflows/plot-facets)
353355

354356
The *facet* option enables faceting. When faceting, two additional band scales may be configured:
355357

@@ -358,7 +360,7 @@ The *facet* option enables faceting. When faceting, two additional band scales m
358360

359361
The following *facet* options are supported:
360362

361-
* facet.**data** - the data to be split into multiple facets
363+
* facet.**data** - the data to be split into multiple facets
362364
* facet.**x** - horizontal facet channel
363365
* facet.**y** - vertical facet channel
364366
* facet.**marginTop** - the top margin
@@ -367,18 +369,18 @@ The following *facet* options are supported:
367369
* facet.**marginLeft** - the left margin
368370
* facet.**grid** - if true, draw grid lines for each facet
369371

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 data is 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).
371373

372374
```js
373375
Plot.plot({
374376
facet: {
375377
data: penguins,
376378
x: "sex"
377-
}
379+
},
378380
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
382384
}
383385
})
384386
```

0 commit comments

Comments
 (0)