Skip to content

Commit

Permalink
em dash style
Browse files Browse the repository at this point in the history
  • Loading branch information
mbostock committed Jun 19, 2023
1 parent e785986 commit 5e313d9
Show file tree
Hide file tree
Showing 28 changed files with 48 additions and 48 deletions.
4 changes: 2 additions & 2 deletions docs/community.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ And of course, follow us on [Observable](https://observablehq.com/@observablehq?

We recommend asking for help on the [Observable forum](https://talk.observablehq.com/c/help/6). Or if you prefer chat, join the [Observable community Slack](https://observable-community.slack.com/ssb/redirect).

We encourage you to share your work, no matter how messy, on [Observable](https://observablehq.com). Sharing live code is the easiest way to let people see what you see, and to debug your problem. Strive for a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)it helps people hone in on your problem more quickly.
We encourage you to share your work, no matter how messy, on [Observable](https://observablehq.com). Sharing live code is the easiest way to let people see what you see, and to debug your problem. Strive for a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) — it helps people hone in on your problem more quickly.

When asking for help, don’t just post your code and ask people to fix it. Provide context, and say what you want help with. For example:

Expand All @@ -23,7 +23,7 @@ When asking for help, don’t just post your code and ask people to fix it. Prov
- What behavior are you currently seeing?
- Is the current behavior not what you expect?

If you think you’ve found a bug in Plot, please file a [GitHub issue](https://github.com/observablehq/plot/issues). But don’t use an issue to ask for helpyou’ll have better luck on the forum or Slack.
If you think you’ve found a bug in Plot, please file a [GitHub issue](https://github.com/observablehq/plot/issues). But don’t use an issue to ask for help — you’ll have better luck on the forum or Slack.

## Getting involved

Expand Down
14 changes: 7 additions & 7 deletions docs/features/marks.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ Plot doesn’t have chart types; instead, you construct charts by layering **mar

## Marks are geometric shapes

Plot provides a variety of mark types. Think of marks as the “visual vocabulary”the painter’s palette 🎨, but of shapes instead of colorsthat you pull from when composing a chart. Each mark type produces a certain type of geometric shape.
Plot provides a variety of mark types. Think of marks as the “visual vocabulary” — the painter’s palette 🎨, but of shapes instead of colors — that you pull from when composing a chart. Each mark type produces a certain type of geometric shape.

For example, the [dot mark](../marks/dot.md) draws stroked circles (by default).

Expand Down Expand Up @@ -157,7 +157,7 @@ Plot.plot({

## Marks use scales

Marks are (typically) not positioned in literal pixels, or colored in literal colors, as in a conventional graphics system. Instead you provide abstract values such as time and temperaturemarks are drawn “in data space”and [scales](./scales.md) encode these into visual values such as position and color. And best of all, Plot automatically creates [axes](../marks/axis.md) and [legends](./legends.md) to document the scales’ encodings.
Marks are (typically) not positioned in literal pixels, or colored in literal colors, as in a conventional graphics system. Instead you provide abstract values such as time and temperature — marks are drawn “in data space” — and [scales](./scales.md) encode these into visual values such as position and color. And best of all, Plot automatically creates [axes](../marks/axis.md) and [legends](./legends.md) to document the scales’ encodings.

Data is passed through scales automatically during rendering; the mark controls which scales are used. The **x** and **y** options are typically bound to the *x* and *y* scales, respectively, while the **fill** and **stroke** options are typically bound to the *color* scale. Changing a scale’s definition, say by overriding its **domain** (the extent of abstract input values) or **type**, affects the appearance of all marks that use the scale.

Expand All @@ -178,7 +178,7 @@ Plot.plot({

## Marks have tidy data

A single mark can draw multiple shapes. A mark generally produces a shapesuch as a rectangle or circlefor each element in the data.
A single mark can draw multiple shapes. A mark generally produces a shape — such as a rectangle or circle — for each element in the data.

:::plot defer https://observablehq.com/@observablehq/plot-tidy-data
```js
Expand All @@ -194,7 +194,7 @@ Plot.lineY(aapl, {x: "Date", y: "Close"}).plot()
```
:::

And a line mark isn’t even guaranteed to produce a single polylinethere can be multiple polylines, as in a line chart with multiple series (using **z**).
And a line mark isn’t even guaranteed to produce a single polyline — there can be multiple polylines, as in a line chart with multiple series (using **z**).

:::plot defer https://observablehq.com/@observablehq/plot-multiple-series-line-chart
```js
Expand Down Expand Up @@ -258,10 +258,10 @@ Note that when accessor functions or parallel arrays are used instead of field n
Data comes in different types: quantitative (or temporal) values can be subtracted, ordinal values can be ordered, and nominal (or categorical) values can only be the same or different.

:::info
Because nominal values often need some arbitrary order for display purposesoften alphabeticalPlot uses the term *ordinal* to refer to both ordinal and nominal data.
Because nominal values often need some arbitrary order for display purposes — often alphabetical — Plot uses the term *ordinal* to refer to both ordinal and nominal data.
:::

Some marks work with any type of data, while other marks have certain requirements or assumptions of data. For example, a line should only be used when both *x* and *y* are quantitative or temporal, and when the data is in a meaningful order (such as chronological). This is because the line mark will interpolate between adjacent points to draw line segments. If *x* or *y* is nominalsay the names of countriesit doesn’t make sense to use a line because there is no half-way point between two nominal values.
Some marks work with any type of data, while other marks have certain requirements or assumptions of data. For example, a line should only be used when both *x* and *y* are quantitative or temporal, and when the data is in a meaningful order (such as chronological). This is because the line mark will interpolate between adjacent points to draw line segments. If *x* or *y* is nominal — say the names of countries — it doesn’t make sense to use a line because there is no half-way point between two nominal values.

:::plot https://observablehq.com/@observablehq/plot-dont-do-this
```js
Expand Down Expand Up @@ -357,7 +357,7 @@ Channels are mark options that can be used to encode data. These options allow t
* an accessor function, or
* an array of values of the same length and order as the data.

Not all mark options can be expressed as channels. For example, **stroke** can be a channel but **strokeDasharray** cannot. This is mostly a pragmatic limitationit would be harder to implement Plot if every option were expressible as a channelbut it also serves to guide you towards options that are intended for encoding data.
Not all mark options can be expressed as channels. For example, **stroke** can be a channel but **strokeDasharray** cannot. This is mostly a pragmatic limitation — it would be harder to implement Plot if every option were expressible as a channel — but it also serves to guide you towards options that are intended for encoding data.

:::tip
To vary the definition of a constant option with data, create multiple marks with your different constant options, and then filter the data for each mark to achieve the desired result.
Expand Down
2 changes: 1 addition & 1 deletion docs/features/projections.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ Plot.plot({

Above, a [geo mark](../marks/geo.md) draws polygons representing land and a [sphere mark](../marks/geo.md#sphere-options) draws the outline of the globe. A [dot mark](../marks/dot.md) draws earthquakes as circles sized by magnitude.

The geo mark is “projection aware” so that it can handle all the nuances of projecting spherical polygons to the screenleaning on [d3-geo](https://d3js.org/d3-geo) to provide [adaptive sampling](https://observablehq.com/@d3/adaptive-sampling) with configurable precision, [antimeridian cutting](https://observablehq.com/@d3/antimeridian-cutting), and clipping. The dot mark is not; instead, Plot applies the projection in place of the *x* and *y* scales. Hence, projections work with any mark that consumes continuous **x** and **y** channelsas well as marks that use **x1** & **y1** and **x2** & **y2**. Each mark implementation decides whether to handle projections specially or to treat the projection as any other position scale. (For example, the [line mark](../marks/line.md) is projection-aware to draw geodesics.)
The geo mark is “projection aware” so that it can handle all the nuances of projecting spherical polygons to the screen — leaning on [d3-geo](https://d3js.org/d3-geo) to provide [adaptive sampling](https://observablehq.com/@d3/adaptive-sampling) with configurable precision, [antimeridian cutting](https://observablehq.com/@d3/antimeridian-cutting), and clipping. The dot mark is not; instead, Plot applies the projection in place of the *x* and *y* scales. Hence, projections work with any mark that consumes continuous **x** and **y** channels — as well as marks that use **x1** & **y1** and **x2** & **y2**. Each mark implementation decides whether to handle projections specially or to treat the projection as any other position scale. (For example, the [line mark](../marks/line.md) is projection-aware to draw geodesics.)

:::info
Marks that require *band* scales (bars, cells, and ticks) cannot be used with projections. Likewise one-dimensional marks such as rules cannot be used, though see [#1164](https://github.com/observablehq/plot/issues/1164).
Expand Down
12 changes: 6 additions & 6 deletions docs/features/scales.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ Plot.ruleX(gistemp, {x: "Date", stroke: "Anomaly"}).plot()
```
:::

While the resulting chart looks different, the *color* scale here behaves similarly to the `y` function abovethe only difference is that it interpolates colors (using [d3.interpolateTurbo](https://d3js.org/d3-scale-chromatic/sequential#interpolateTurbo)) instead of numbers (the top and bottom sides of the plot frame):
While the resulting chart looks different, the *color* scale here behaves similarly to the `y` function above — the only difference is that it interpolates colors (using [d3.interpolateTurbo](https://d3js.org/d3-scale-chromatic/sequential#interpolateTurbo)) instead of numbers (the top and bottom sides of the plot frame):

```js
function color(anomaly) {
Expand Down Expand Up @@ -163,7 +163,7 @@ Plot.plot({x: {type: "utc", domain: [1609459200000, 1640995200000], grid: true}}
```
:::

If the scale **type** is *time*, the ticks will be in local timeas with the dates belowrather than UTC.
If the scale **type** is *time*, the ticks will be in local time — as with the dates below — rather than UTC.

:::plot https://observablehq.com/@observablehq/plot-continuous-scales
```js
Expand Down Expand Up @@ -241,7 +241,7 @@ Plot
```
:::

While *point* and *band* scales appear visually similar when only the grid is visible, the two are not identicalthey differ respective to padding. Play with the options below to get a sense of their effect on the scale’s behavior.
While *point* and *band* scales appear visually similar when only the grid is visible, the two are not identical — they differ respective to padding. Play with the options below to get a sense of their effect on the scale’s behavior.

<p>
<label class="label-input">
Expand Down Expand Up @@ -707,7 +707,7 @@ The default range depends on the scale: for position scales (*x*, *y*, *fx*, and

The behavior of the **unknown** scale option depends on the scale type. For quantitative and temporal scales, the unknown value is used whenever the input value is undefined, null, or NaN. For ordinal or categorical scales, the unknown value is returned for any input value outside the domain. For band or point scales, the unknown option has no effect; it is effectively always equal to undefined. If the unknown option is set to undefined (the default), or null or NaN, then the affected input values will be considered undefined and filtered from the output.

For data at regular intervals, such as integer values or daily samples, the [**interval** option](#scale-transforms) can be used to enforce uniformity. The specified *interval*—such as d3.utcMonth—must expose an *interval*.floor(*value*), *interval*.offset(*value*), and *interval*.range(*start*, *stop*) functions. The option can also be specified as a number, in which case it will be promoted to a numeric interval with the given step. The option can alternatively be specified as a string (*second*, *minute*, *hour*, *day*, *week*, *month*, *quarter*, *half*, *year*, *monday*, *tuesday*, *wednesday*, *thursday*, *friday*, *saturday*, *sunday*) naming the corresponding time interval, or a skip interval consisting of a number followed by the interval name (possibly pluralized), such as *3 months* or *10 years*. This option sets the default *scale*.transform to the given interval’s *interval*.floor function. In addition, the default *scale*.domain is an array of uniformly-spaced values spanning the extent of the values associated with the scale.
For data at regular intervals, such as integer values or daily samples, the [**interval** option](#scale-transforms) can be used to enforce uniformity. The specified *interval* — such as d3.utcMonth — must expose an *interval*.floor(*value*), *interval*.offset(*value*), and *interval*.range(*start*, *stop*) functions. The option can also be specified as a number, in which case it will be promoted to a numeric interval with the given step. The option can alternatively be specified as a string (*second*, *minute*, *hour*, *day*, *week*, *month*, *quarter*, *half*, *year*, *monday*, *tuesday*, *wednesday*, *thursday*, *friday*, *saturday*, *sunday*) naming the corresponding time interval, or a skip interval consisting of a number followed by the interval name (possibly pluralized), such as *3 months* or *10 years*. This option sets the default *scale*.transform to the given interval’s *interval*.floor function. In addition, the default *scale*.domain is an array of uniformly-spaced values spanning the extent of the values associated with the scale.

Quantitative scales can be further customized with additional options:

Expand All @@ -732,7 +732,7 @@ Plot.plot({

### Color scale options

The normal scale types*linear*, *sqrt*, *pow*, *log*, *symlog*, and *ordinal*can be used to encode color. In addition, Plot supports special scale types for color:
The normal scale types — *linear*, *sqrt*, *pow*, *log*, *symlog*, and *ordinal* — can be used to encode color. In addition, Plot supports special scale types for color:

* *categorical* - like *ordinal*, but defaults to *tableau10*
* *sequential* - like *linear*
Expand Down Expand Up @@ -921,7 +921,7 @@ Similarly, the *y* and *fy* scales support asymmetric insets with:

The inset scale options can provide “breathing room” to separate marks from axes or the plot’s edge. For example, in a scatterplot with a Plot.dot with the default 3-pixel radius and 1.5-pixel stroke width, an inset of 5 pixels prevents dots from overlapping with the axes. The *scale*.round option is useful for crisp edges by rounding to the nearest pixel boundary.

In addition to the generic *ordinal* scale type, which requires an explicit output range value for each input domain value, Plot supports special *point* and *band* scale types for encoding ordinal data as position. These scale types accept a [*min*, *max*] range similar to quantitative scales, and divide this continuous interval into discrete points or bands based on the number of distinct values in the domain (*i.e.*, the domain’s cardinality). If the associated marks have no effective width along the ordinal dimensionsuch as a dot, rule, or tickthen use a *point* scale; otherwise, say for a bar, use a *band* scale.
In addition to the generic *ordinal* scale type, which requires an explicit output range value for each input domain value, Plot supports special *point* and *band* scale types for encoding ordinal data as position. These scale types accept a [*min*, *max*] range similar to quantitative scales, and divide this continuous interval into discrete points or bands based on the number of distinct values in the domain (*i.e.*, the domain’s cardinality). If the associated marks have no effective width along the ordinal dimension — such as a dot, rule, or tick — then use a *point* scale; otherwise, say for a bar, use a *band* scale.

Ordinal position scales support additional options, all specified as proportions in [0, 1]:

Expand Down
4 changes: 2 additions & 2 deletions docs/features/shorthand.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const gene = "AAAAGAGTGAAGATGCTGGAGACGAGTGAAGCATTCACTTTAGGGAAAGCGAGGCAAGAGCGTTTC

# Shorthand

The most concise form of Plot is its **shorthand** syntax where no options are specifiedonly data. To use this shorthand, the data must have a specific structure: either a one-dimensional array of values [*v₀*, *v₁*, *v₂*, …] or a two-dimensional array of tuples [[*x₀*, *y₀*], [*x₁*, *y₁*], [*x₂*, *y₂*], …].
The most concise form of Plot is its **shorthand** syntax where no options are specified — only data. To use this shorthand, the data must have a specific structure: either a one-dimensional array of values [*v₀*, *v₁*, *v₂*, …] or a two-dimensional array of tuples [[*x₀*, *y₀*], [*x₁*, *y₁*], [*x₂*, *y₂*], …].

While none of these charts are particularly groundbreaking, we hope you find this shorthand convenient the next time you want a quick look at some data. And if the shorthand view is useful, you can then enhance it by adding options!

Expand Down Expand Up @@ -180,7 +180,7 @@ Plot.boxX(numbers).plot()
```
:::

Some of Plot’s transforms support shorthand syntax, too. For example, we can use Plot.rectY with [Plot.binX](../transforms/bin.md) to generate a histogramanother common way to visualize a one-dimensional distribution.
Some of Plot’s transforms support shorthand syntax, too. For example, we can use Plot.rectY with [Plot.binX](../transforms/bin.md) to generate a histogram — another common way to visualize a one-dimensional distribution.

:::plot https://observablehq.com/@observablehq/plot-shorthand-histogram
```js
Expand Down
2 changes: 1 addition & 1 deletion docs/features/transforms.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ Plot.plot({

Plot includes many useful transforms! For example, you can compute a [rolling average](../transforms/window.md) to smooth a noisy signal, [stack layers](../transforms/stack.md) for a streamgraph, or [dodge dots](../transforms/dodge.md) for a beeswarm. Plot’s various built-in transforms include: [bin](../transforms/bin.md), [centroid](../transforms/centroid.md), [dodge](../transforms/dodge.md), [filter](../transforms/filter.md), [group](../transforms/group.md), [hexbin](../transforms/hexbin.md), [interval](../transforms/interval.md), [map](../transforms/map.md), [normalize](../transforms/normalize.md), [reverse](../transforms/sort.md#reverse-options), [select](../transforms/select.md), [shuffle](../transforms/sort.md#shuffle-options), [sort](../transforms/sort.md), [stack](../transforms/stack.md), [tree](../transforms/tree.md), and [window](../transforms/window.md). If these don’t meet your needs, you can even implement a [custom transform](#custom-transforms).

Transforms are never requiredyou can always aggregate and derive data yourself outside of Plot, and then pass in the binned values. For example, we could use [d3.bin](https://d3js.org/d3-array/bin) to compute a histogram of athletes’ weights as an array of {*x0*, *x1*, *length*} objects.
Transforms are never required — you can always aggregate and derive data yourself outside of Plot, and then pass in the binned values. For example, we could use [d3.bin](https://d3js.org/d3-array/bin) to compute a histogram of athletes’ weights as an array of {*x0*, *x1*, *length*} objects.

```js
bins = d3.bin().thresholds(80).value((d) => d.weight)(olympians)
Expand Down
Loading

0 comments on commit 5e313d9

Please sign in to comment.