observablehq / observablehq/plot

Periodic scales?

Open
#1,888 1 comment 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
HTML
Stars
5.4k
Forks
244
PR merge metrics
No merged PRs in 30d

Description

When dealing with time series, we often want to overlay lines to facilitate year on year comparisons. Or, when we facet by year, we'd like the time axis (within facets) to spread from start to end of year.

A way to do it is to change x though a scale transform, e.g.:

  • d => d3.utcDay.count(d3.utcYear(d.Date), d.Date) (number of days since start of the year), or
  • d => +d.Date - d3.utcYear(d) (number of milliseconds since start of the year), or even
  • d => new Date(+new Date(Date.UTC(1972, 0, 1) + +d - d3.utcYear(d)) (a date between 1st Jan. 1972 and 31 Dec 1972 — a leap year)

This is a bit complex to get right (UTC, DST and leap years can make it hard to adjust), and it can cause issues elsewhere — for example in the tips we want the true data, not a shifted value, and on the date axis we want to suppress the year.

I wonder if we could have a "periodic: year" syntax in the scale definition which took care of all this for us. As it is orthogonal with intervals, we would accept the same DSL — "periodic: 6 months"; "periodic: 1" would plot the fractional value.

Here's a notebook that shows how what I'd like to simplify:
https://observablehq.com/@observablehq/periodic-scale-1888

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Observable notebook and the existing scale-definition DSL, using the issue’s D3 UTC examples as reference. Trace how scale transforms, tooltips, and date-axis labels currently handle time values; done means a periodic syntax can support the proposed intervals while preserving true tooltip data and suppressing the year on the axis.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.