Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

0.6.11 #1854

Merged
merged 10 commits into from
Sep 20, 2023
Merged

0.6.11 #1854

Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,62 @@

Year: **Current (2023)** · [2022](./CHANGELOG-2022.md) · [2021](./CHANGELOG-2021.md)

## 0.6.11

[Released September TK, 2023.](https://github.com/observablehq/plot/releases/tag/v0.6.11)

The **tip** mark option can now pass options to the derived [tip mark](https://observablehq.com/plot/marks/tip); the options object can also specify the **pointer** option to control the derived tip’s pointer mode (_x_, _y_, or _xy_). The new **format** tip mark option enables greater control over order and formatting of channels.

<img src="./img/tip-custom.png" width="674" alt="A tip with a custom order and formatting of the channel values.">

```js
Plot.dot(olympians, {
x: "weight",
y: "height",
stroke: "sex",
channels: {
name: "name",
nationality: "nationality",
sport: "sport"
},
tip: {
format: {
name: true, // show name first
y: (d) => `${d}m`, // units in meters
x: (d) => `${d}kg`, // units in kilograms
stroke: false // suppress stroke channel
}
}
}).plot()
```

Axes for ordinal scales now generalize the scale’s temporal or quantitative **interval** if any, resulting in more readable ticks. For instance, the bar chart below of monthly values now sports multi-line tick labels.

<img src="./img/temporal-ordinal.png" width="672" alt="A temporal bar chart with a multi-line axis.">

```js
Plot.plot({
x: {interval: "month"},
marks: [
Plot.barY(aapl, Plot.groupX({y: "median"}, {x: "Date", y: "Close"}))
]
})
```

Plot now recognizes CSS Color Module [Level 4](https://www.w3.org/TR/css-color-4/) and [Level 5](https://www.w3.org/TR/css-color-5/) syntax as literal colors, making it easier to use modern color syntax such as [oklab()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab), [color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix), and alternative color spaces such as [display-p3](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color).

A channel value can now be given a label by specifying it as a {value, label} object; this may affect the label used in axes, legends, and tips.

This release also includes numerous bug fixes:
- exposed ordinal domains are now correctly deduplicated;
- the default symbol set is now inferred correctly when **fill** is *currentColor*;
- the **fontVariant** axis option now applies to the axis label in addition to ticks;
- the tip mark is no longer briefly visible before asynchronous rendering;
- the bin transform no longer generates undefined colors for empty bins;
- the bin transform now uses the **interval** option to reduce *x1* & *x2* (and *y1* & *y2*);
- the stack transform now correctly handles the *exclude* **facet** option;
- the tree transform now correctly handles escaping with the **delimiter** option.

## 0.6.10

[Released August 14, 2023.](https://github.com/observablehq/plot/releases/tag/v0.6.10)
Expand Down
2 changes: 1 addition & 1 deletion docs/features/marks.md
Original file line number Diff line number Diff line change
Expand Up @@ -490,7 +490,7 @@ All marks support the following style options:

If the **clip** option is *frame* (or equivalently true), the mark is clipped to the frame’s dimensions; if the **clip** option is null (or equivalently false), the mark is not clipped. If the **clip** option is *sphere*, then a [geographic projection](./projections.md) is required and the mark will be clipped to the projected sphere (_e.g._, the front hemisphere when using the orthographic projection).

If the **tip** option is true, a [tip mark](../marks/tip.md) with the [pointer transform](../interactions/pointer.md) will be derived from this mark and placed atop all other marks, offering details on demand. If the **tip** option is set to *x*, *y*, or *xy*, [pointerX](../interactions/pointer.md#pointerX), [pointerY](../interactions/pointer.md#pointerY), or [pointer](../interactions/pointer.md#pointer) will be used, respectively; otherwise the pointing mode will be chosen automatically. (If the **tip** mark option is truthy, the **title** channel is no longer applied using an SVG title element as this would conflict with the tip mark.)
If the **tip** option is true, a [tip mark](../marks/tip.md) with the [pointer transform](../interactions/pointer.md) will be derived from this mark and placed atop all other marks, offering details on demand. If the **tip** option is set to an options object, these options will be passed to the derived tip mark. If the **tip** option (or, if an object, its **pointer** option) is set to *x*, *y*, or *xy*, [pointerX](../interactions/pointer.md#pointerX), [pointerY](../interactions/pointer.md#pointerY), or [pointer](../interactions/pointer.md#pointer) will be used, respectively; otherwise the pointing mode will be chosen automatically. (If the **tip** mark option is truthy, the **title** channel is no longer applied using an SVG title element as this would conflict with the tip mark.)

For all marks except [text](../marks/text.md), the **dx** and **dy** options are rendered as a transform property, possibly including a 0.5px offset on low-density screens.

Expand Down
2 changes: 1 addition & 1 deletion docs/features/scales.md
Original file line number Diff line number Diff line change
Expand Up @@ -940,7 +940,7 @@ Plot implicitly generates an [axis mark](../marks/axis.md) for position scales i
* **tickPadding** - the separation between the tick and its label (in pixels; default 3)
* **tickFormat** - either a function or specifier string to format tick values; see [Formats](./formats.md)
* **tickRotate** - whether to rotate tick labels (an angle in degrees clockwise; default 0)
* **fontVariant** - the font-variant attribute for ticks; defaults to *tabular-nums* if quantitative
* **fontVariant** - the font-variant attribute; defaults to *tabular-nums* if quantitative
* **label** - a string to label the axis
* **labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*
* **labelArrow** - the label arrow: *auto* (default), *up*, *right*, *down*, *left*, *none*, or true <VersionBadge version="0.6.7" />
Expand Down
32 changes: 31 additions & 1 deletion docs/marks/tip.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,37 @@ Plot.rectY(olympians, Plot.binX({y: "sum"}, {x: "weight", y: (d) => d.sex === "m
```
:::

The tip mark does not provide options for formatting channel names or values. When a channel is bound to a scale, the scale’s label is shown instead of the channel name. If you desire greater customization, please upvote [#1612](https://github.com/observablehq/plot/issues/1612).
The order and formatting of channels in the tip can be customized with the **format** option <VersionBadge version="0.6.11" pr="1823" />, which accepts a key-value object mapping channel names to formats. Each [format](../features/formats.md) can be a string (for number or time formats), a function that receives the value as input and returns a string, true to use the default format, and null or false to suppress. The order of channels in the tip follows their order in the format object followed by any additional channels.

A channel’s label can be specified alongside its value as a {value, label} object; if a channel label is not specified, the associated scale’s label is used, if any; if there is no associated scale, or if the scale has no label, the channel name is used instead.

:::plot defer
```js
Plot.dot(olympians, {
x: "weight",
y: "height",
stroke: "sex",
channels: {
name: "name",
nationality: {
value: "nationality",
label: "country"
},
sport: "sport"
},
tip: {
format: {
name: true,
sport: true,
nationality: true,
y: (d) => `${d}m`,
x: (d) => `${d}kg`,
stroke: false
}
}
}).plot()
```
:::

The tip mark supports nine different orientations specified by the **anchor** option: the four sides (*top*, *right*, *bottom*, *left*), the four corners (*top-left*, *top-right*, *bottom-right*, *bottom-left*), and *middle*. Note that when *middle* is used, the tip will obscure its anchor point.

Expand Down
2 changes: 1 addition & 1 deletion docs/transforms/tree.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ Given a text file, you can use `text.split("\n")` to split the contents into mul
The following options control how the tabular data is organized into a hierarchy:

* **path** - a column specifying each node’s hierarchy location; defaults to identity
* **delimiter** - the path separator; defaults to forward slash (/)
* **delimiter** - the path separator, a single character; defaults to forward slash (/)

The **path** column is typically slash-separated, as with UNIX-based file systems or URLs.

Expand Down
Binary file added img/temporal-ordinal.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/tip-custom.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@observablehq/plot",
"description": "A JavaScript library for exploratory data visualization.",
"version": "0.6.10",
"version": "0.6.11",
"author": {
"name": "Observable, Inc.",
"url": "https://observablehq.com"
Expand Down
3 changes: 2 additions & 1 deletion src/channel.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@ export type ChannelName =
| "y"
| "y1"
| "y2"
| "z";
| "z"
| (string & Record<never, never>); // custom channel; see also https://github.com/microsoft/TypeScript/issues/29729

/**
* An object literal of channel definitions. This is also used to represent
Expand Down