Skip to content

Commit c3f29b9

Browse files
mbostockFil
andauthored
0.6.10 (#1802)
* Update CHANGELOG * changes * Update CHANGELOG * 0.6.10 * update version badges --------- Co-authored-by: Philippe Rivière <[email protected]>
1 parent 63415aa commit c3f29b9

10 files changed

+88
-6
lines changed

CHANGELOG.md

+82
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,88 @@
22

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

5+
## 0.6.10
6+
7+
[Released August 14, 2023.](https://github.com/observablehq/plot/releases/tag/v0.6.10)
8+
9+
The new **title** and **subtitle** [plot options](https://observablehq.com/plot/features/plots#other-options) specify a primary and secondary heading. Headings are implemented as h2 and h3 elements by default, but you can provide existing elements instead of text for greater control. Like the existing **caption** option, headings add context and assist interpretation.
10+
11+
<img src="./img/title-subtitle.png" width="691" alt="A chart with a title, subtitle, and caption.">
12+
13+
```js
14+
Plot.plot({
15+
title: "For charts, an informative title",
16+
subtitle: "Subtitle to follow with additional context",
17+
caption: "Figure 1. A chart with a title, subtitle, and caption.",
18+
marks: [
19+
Plot.frame(),
20+
Plot.text(["Titles, subtitles, captions, and annotations assist inter­pretation by telling the reader what’s interesting. Don’t make the reader work to find what you already know."], {lineWidth: 30, frameAnchor: "middle"})
21+
]
22+
})
23+
```
24+
25+
When a chart has a title, subtitle, caption, or legend, Plot automatically wraps the chart’s SVG element with an HTML figure element. The new **figure** plot option, if true, wraps the chart in a figure even if it doesn’t have these other elements; likewise, if false, Plot ignores these other elements and returns a bare SVG element. The figure element now has an associated class (`plot-d6a7b5-figure`).
26+
27+
The new **clip** plot option determines the default clipping behavior if the [**clip** mark option](https://observablehq.com/plot/features/marks#mark-options) is not specified; set it to true to enable clipping. This option does not affect axis, grid, and frame marks, whose **clip** option defaults to false.
28+
29+
<img src="./img/clip.png" width="621" alt="A line chart of the AAPL ticker, clipped to the frame.">
30+
31+
```js
32+
Plot.plot({
33+
clip: true,
34+
x: {domain: [new Date(2015, 0, 1), new Date(2015, 3, 1)]},
35+
y: {grid: true},
36+
marks: [
37+
Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.1}),
38+
Plot.lineY(aapl, {x: "Date", y: "Close"}),
39+
Plot.ruleY([0], {clip: false})
40+
]
41+
});
42+
```
43+
44+
The new [bollinger mark](https://observablehq.com/plot/marks/bollinger) composes a line representing a moving average and an area representing volatility as a band; the band thickness is proportional to the deviation of nearby values. The bollinger mark is built on the new [bollinger map method](https://observablehq.com/plot/marks/bollinger#bollinger), and is often used to analyze the price of financial instruments such as stocks.
45+
46+
<img src="./img/bollinger.png" width="668" alt="A bollinger chart of the AAPL ticker, computed on a window of the 20 most recent values and a bandwidth of 2 standard deviations.">
47+
48+
```js
49+
Plot.bollingerY(aapl, {x: "Date", y: "Close", n: 20, k: 2}).plot()
50+
```
51+
52+
The [arrow mark](https://observablehq.com/plot/marks/arrow) supports a new **sweep** option to control the bend orientation. Below, we set this option to *-y* to draw arrows bulging right, independent of the relative vertical positions of its source and target.
53+
54+
[<img src="./img/arc-diagram.png" width="521" alt="Detail of an arc diagram connecting characters in Les Misérables that appear in the same chapters.">](https://observablehq.com/@observablehq/plot-arc-diagram?intent=fork)
55+
56+
```js
57+
Plot.plot({
58+
height: 1080,
59+
marginLeft: 100,
60+
axis: null,
61+
x: {domain: [0, 1]}, // see https://github.com/observablehq/plot/issues/1541
62+
color: {domain: d3.range(10), unknown: "#ccc"},
63+
marks: [
64+
Plot.dot(miserables.nodes, {x: 0, y: "id", fill: "group", sort: {y: "fill"}}),
65+
Plot.text(miserables.nodes, {x: 0, y: "id", text: "id", textAnchor: "end", dx: -6, fill: "group"}),
66+
Plot.arrow(miserables.links, {x: 0, y1: "source", y2: "target", sweep: "-y", bend: 90, headLength: 0, stroke: samegroup, sort: samegroup, reverse: true})
67+
]
68+
})
69+
```
70+
71+
The [auto mark](https://observablehq.com/plot/marks/auto) now does a better job determining the appropriate bar mark implementation, such as with ordinal time series bar charts.
72+
73+
<img src="./img/auto-bar.png" width="596" alt="A stacked bar chart from a time series.">
74+
75+
```js
76+
Plot.auto(timeSeries, {x: "date", y: {value: "value", reduce: "sum"}, color: "type", mark: "bar"}).plot()
77+
```
78+
79+
The [pointerX and pointerY transform](https://observablehq.com/plot/interactions/pointer) now use unscaled distance to decide the closest point across facets, preventing points from distant facets from being considered closest. The pointer transform now correctly reports the closest point when moving between facets, and no longer reports multiple closest points if they are the same distance across facets.
80+
81+
Plot’s documentation now has an [API index](https://observablehq.com/plot/api), version badges pointing to the release notes for a particular feature (or to the pull request for a prerelease feature), and shorter anchors.
82+
83+
The [tip mark](https://observablehq.com/plot/marks/tip) now shows both labels for paired channels such as *y1**y2* or *x1**y2* when the channel labels differ. When the **tip** option is set to true on a [geo mark](https://observablehq.com/plot/marks/geo) without a projection, as when using preprojected planar geometry, the display no longer collapses.
84+
85+
The [stack transform](https://observablehq.com/plot/transforms/stack) now emits a friendlier error message when the supplied value is null.
86+
587
## 0.6.9
688

789
[Released June 27, 2023.](https://github.com/observablehq/plot/releases/tag/v0.6.9)

docs/features/plots.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -248,9 +248,9 @@ When using facets, set the *fx* and *fy* scales’ **round** option to false if
248248

249249
## Other options
250250

251-
By default, [plot](#plot) returns an SVG element; however, if the plot includes a title, subtitle, [legend](./legends.md), or caption, plot wraps the SVG element with an HTML figure element. You can also force Plot to generate a figure element by setting the **figure** option <VersionBadge pr="1761" /> to true.
251+
By default, [plot](#plot) returns an SVG element; however, if the plot includes a title, subtitle, [legend](./legends.md), or caption, plot wraps the SVG element with an HTML figure element. You can also force Plot to generate a figure element by setting the **figure** option <VersionBadge version="0.6.10" pr="1761" /> to true.
252252

253-
The **title** & **subtitle** options <VersionBadge pr="1761" /> and the **caption** option accept either a string or an HTML element. If given an HTML element, say using the [`html` tagged template literal](http://github.com/observablehq/htl), the title and subtitle are used as-is while the caption is wrapped in a figcaption element; otherwise, the specified text will be escaped and wrapped in an h2, h3, or figcaption, respectively.
253+
The **title** & **subtitle** options <VersionBadge version="0.6.10" pr="1761" /> and the **caption** option accept either a string or an HTML element. If given an HTML element, say using the [`html` tagged template literal](http://github.com/observablehq/htl), the title and subtitle are used as-is while the caption is wrapped in a figcaption element; otherwise, the specified text will be escaped and wrapped in an h2, h3, or figcaption, respectively.
254254

255255
:::plot https://observablehq.com/@observablehq/plot-caption
256256
```js
@@ -274,7 +274,7 @@ Unitless numbers ([quirky lengths](https://www.w3.org/TR/css-values-4/#deprecate
274274

275275
The generated SVG element has a class name which applies a default stylesheet. Use the top-level **className** option to specify that class name.
276276

277-
The **clip** option <VersionBadge pr="1792" /> determines the default clipping behavior if the [mark **clip** option](./marks.md#mark-options) is not specified; set it to true to enable clipping. This option does not affect [axis](../marks/axis.md), [grid](../marks/grid.md), and [frame](../marks/frame.md) marks, whose **clip** option defaults to false.
277+
The **clip** option <VersionBadge version="0.6.10" pr="1792" /> determines the default clipping behavior if the [mark **clip** option](./marks.md#mark-options) is not specified; set it to true to enable clipping. This option does not affect [axis](../marks/axis.md), [grid](../marks/grid.md), and [frame](../marks/frame.md) marks, whose **clip** option defaults to false.
278278

279279
The **document** option specifies the [document](https://developer.mozilla.org/en-US/docs/Web/API/Document) used to create plot elements. It defaults to window.document, but can be changed to another document, say when using a virtual DOM implementation for server-side rendering in Node.
280280

docs/marks/arrow.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ The arrow mark supports the [standard mark options](../features/marks.md#mark-op
146146

147147
The **bend** option sets the angle between the straight line connecting the two points and the outgoing direction of the arrow from the start point. It must be within ±90°. A positive angle will produce a clockwise curve; a negative angle will produce a counterclockwise curve; zero will produce a straight line. The **headAngle** determines how pointy the arrowhead is; it is typically between 0° and 180°. The **headLength** determines the scale of the arrowhead relative to the stroke width. Assuming the default of stroke width 1.5px, the **headLength** is the length of the arrowhead’s side in pixels.
148148

149-
The **sweep** option <VersionBadge pr="1740" /> controls the bend orientation. It defaults to 1 indicating a positive (clockwise) bend angle; -1 indicates a negative (anticlockwise) bend angle; 0 effectively clears the bend angle. If *-x*, the bend angle is flipped when the ending point is to the left of the starting point — ensuring all arrows bulge up (down if bend is negative); if *-y*, the bend angle is flipped when the ending point is above the starting point — ensuring all arrows bulge right (left if bend is negative); the sign is negated for *+x* and *+y*.
149+
The **sweep** option <VersionBadge version="0.6.10" pr="1740" /> controls the bend orientation. It defaults to 1 indicating a positive (clockwise) bend angle; -1 indicates a negative (anticlockwise) bend angle; 0 effectively clears the bend angle. If *-x*, the bend angle is flipped when the ending point is to the left of the starting point — ensuring all arrows bulge up (down if bend is negative); if *-y*, the bend angle is flipped when the ending point is above the starting point — ensuring all arrows bulge right (left if bend is negative); the sign is negated for *+x* and *+y*.
150150

151151
## arrow(*data*, *options*) {#arrow}
152152

docs/marks/bollinger.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const k = ref(2);
1010

1111
</script>
1212

13-
# Bollinger mark <VersionBadge pr="1772" />
13+
# Bollinger mark <VersionBadge version="0.6.10" pr="1772" />
1414

1515
The **bollinger mark** is a [composite mark](../features/marks.md#marks) consisting of a [line](./line.md) representing a moving average and an [area](./area.md) representing volatility as a band; the band thickness is proportional to the deviation of nearby values. The bollinger mark is often used to analyze the price of financial instruments such as stocks.
1616

img/arc-diagram.png

78.1 KB
Loading

img/auto-bar.png

5.85 KB
Loading

img/bollinger.png

20.7 KB
Loading

img/clip.png

27 KB
Loading

img/title-subtitle.png

13.5 KB
Loading

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@observablehq/plot",
33
"description": "A JavaScript library for exploratory data visualization.",
4-
"version": "0.6.9",
4+
"version": "0.6.10",
55
"author": {
66
"name": "Observable, Inc.",
77
"url": "https://observablehq.com"

0 commit comments

Comments
 (0)