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.

Sign up for GitHub

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

document multi-line tick format; improve format for custom ticks #1728

Merged
merged 3 commits into from
Jun 27, 2023
Merged

document multi-line tick format; improve format for custom ticks #1728

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a4363a0
document multi-line tick format
Fil Jun 27, 2023
750513c
Update docs/marks/axis.md
Fil Jun 27, 2023
e039fe1
better formats for explicit intervals
mbostock Jun 27, 2023
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
18 changes: 3 additions & 15 deletions docs/marks/axis.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,34 +143,22 @@ Plot.plot({
```
:::

You can emulate [Datawrapper’s time axes](https://blog.datawrapper.de/new-axis-ticks/) using `\n` (the line feed character) for multi-line tick labels, plus a bit of date math to detect the first month of each year.
Time axes default to a consistent multi-line tick format, [à la Datawrapper](https://blog.datawrapper.de/new-axis-ticks/), for example showing the first month of each quarter, and the year:

:::plot https://observablehq.com/@observablehq/plot-datawrapper-style-date-axis
```js
Plot.plot({
x: {tickSpacing: 60},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This example is a little less compelling having to customize the tick settings. (Presumably, ticks: 30 or ticks: d3.utcMonth.every(3) would produce equivalent output?) Maybe that’s fine, but maybe there’s a dataset with a smaller domain that would produce multi-line ticks by default, resulting in a simpler example?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we could do
Plot.line(sftemp, Plot.windowY(7, {x: "date", y: "high"})).plot({y: {nice: true}})

marks: [
Plot.ruleY([0]),
Plot.line(aapl, {x: "Date", y: "Close"}),
Plot.gridX(),
Plot.axisX({
ticks: 20,
tickFormat: (
(formatYear, formatMonth) => (x) =>
x.getUTCMonth() === 0
? `${formatMonth(x)}\n${formatYear(x)}`
: formatMonth(x)
)(d3.utcFormat("%Y"), d3.utcFormat("%b"))
})
]
})
```
:::

:::tip
In the future, Plot may generate multi-line time axis labels by default. If you’re interested in this feature, please upvote [#1285](https://github.com/observablehq/plot/issues/1285).
:::

Alternatively, you can add multiple axes with options for hierarchical time intervals, here showing weeks, months, and years.
The format is inferred from the tick interval, and consists of two fields (*e.g.*, month and year, day and month, minutes and hours…); when a tick has the same second field value as the previous tick (*e.g.*, “19 Jan” after “17 Jan”), only the first field (“19”) is shown for brevity. Alternatively, you can specify multiple explicit axes with options for hierarchical time intervals, here showing weeks, months, and years.
Fil marked this conversation as resolved.
Show resolved Hide resolved

:::plot https://observablehq.com/@observablehq/plot-multiscale-date-axis
```js
Expand Down