Plot, facet by month and year

Community Help
1

Hi,

I want to facet time series data by Year on the Y axis. I can get the plot showing by the domain of the X axis is the entire ~10 years, and not just the months.

I have tried to manipulate the date field, since the data for each facet is sliced by a Year column, the year for the plot doesn’t matter much:

Plot.line(sum, {
  x: (d) => new Date(2021, d.Month.getMonth(), d.Month.getDay()),
  y: "sum",
  stroke: "Year",
  curve: "step"
}).plot({
  marks: setRuleMarks(0, -100, 100),
  facet: {
    data: sum,
    y: "Year",
    marginRight: 50
  },
  y: {
    ticks: 3
  },
  width,
  height: 700,
  marginLeft: 90
})

untitled
untitled1968×1400 119 KB

It looks OK, apart from the little 2021 label at the bottom left.

But in general, is this the way to do it?

2

Here are two examples

3

Alright, cool. Thanks.

Do you happen to know how to add spacing between the facet plots?

4

yes, this would be the fy: {padding: 0.1} option.

5

Thanks, about the only thing I did not try :slight_smile:

6

Hi @Fil,

I saw you updated this excellent example. Why isn’t it visible in the Plot Gallery? I just realized there are a bunch of useful notebooks hidden in the plot examples collection.

7

Also, I seem to be doing something wrong when applying your approach to Plot.rectY:

Below the first cell, I’ve put my workaround (which works, but ignores the Feb 29 issue).

8

nice! I think you can simplify a bit:
x: (d) => new Date(d.date.getTime()).setUTCFullYear(2023),

9

Thanks!

I’m not sure I understand why the tickFormat fails with rects, though.

10

I think it’s because that scale transform returns a number not a date, and the tickFormat string is for dates