Skip to content

temporal tick format #321

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

Merged
merged 4 commits into from
Apr 16, 2021
Merged

temporal tick format #321

merged 4 commits into from
Apr 16, 2021

Conversation

Fil
Copy link
Contributor

@Fil Fil commented Apr 13, 2021

When a point or band scale is based on time values, use a time format for ticks; the default time format is the multi-time format from utcScale, but can be overridden with tickFormat: "%a". Similarly, if the point or band scale is based on numeric (ie non-ordinal) values, tickFormat: "," is interpreted with d3.format.

closes #212

I'm sorry that this PR is not pretty; a part of the problem is that d3's original scaleBand and scalePoint aren't behaving like scaleLinear and scaleUtc (ie they don't have a tickFormat method). ((The main part though is just me not finding the style.))

As a result, with no specific settings in x we get:

Plot.plot({
  marks: [
    Plot.barY(sales, Plot.stackY({x: "date", y: "units", fill: "fruit"})),
    Plot.text(sales, Plot.stackY({x: "date", y: "units", text: "fruit" }))
  ]
});

Capture d’écran 2021-04-13 à 10 41 45

and x: {tickFormat: "%a"} or whatever if we want to personalize the scale.

src/axis.js Outdated
@@ -206,3 +207,14 @@ function gridFacetY(fx, tx) {
.attr("stroke-opacity", 0.1)
.attr("d", fx.domain().map(v => `M${fx(v) + tx},0h${dx}`).join(""));
}

function maybeFormat(fmt, domain) {
if (fmt == null) return isTemporal(domain) ? scaleUtc().tickFormat() : fmt;
Copy link
Member

Choose a reason for hiding this comment

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

We should use === undefined here; null should be interpreted as “don’t show any tick labels”.

Also, I think we want to use the same default date formatter as Observable Inputs’ Table (which is the same one that’s used by Observable’s inspector and d3-dsv):

https://github.com/observablehq/inputs/blob/853b17d0aada3f756df5a524f2852d9682e2b60a/src/format.js#L35-L46

The reason being: dates in an ordinal dimension, unlike ticks on a temporal scale, are not necessarily at regular intervals. The formatter I recommend will return a string that’s “as small as possible” without losing any information about what date is being shown.

When a point or band scale is based on time values, use a time format for ticks; the default time format is the multi-time format from utcScale, but can be overridden with tickFormat: "%a". Similarly, if the point or band scale is based on numeric (ie non-ordinal) values, tickFormat: "," is interpreted with d3.format.

closes #212
@mbostock mbostock force-pushed the fil/temporal-tick-format branch from d7d49cb to 0da89ef Compare April 15, 2021 23:51
@mbostock mbostock merged commit b09fdbe into main Apr 16, 2021
@mbostock mbostock deleted the fil/temporal-tick-format branch April 16, 2021 00:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Date and number formatting for ordinal axis ticks.
2 participants