Cyclical Timeseries Graph - Fiscal Year

[kcomplexes]

I am trying to create a cyclical timeseries graph, with the X axis based on the fiscal year of Australia (July 1 to June 30).

I've modified the example by Fil on Observable for my purposes: https://observablehq.com/d/a1d34dcc780daf63

However, I cannot seem to get the data to stop 'straight line wrapping' around the graph when plotting in fiscal years.

Plot.plot({
  x: {
    // map all dates to fiscal year by adding or subtracting half a year (182.62 days)
    transform: (d) => {
      let offset = d.getUTCMonth() >= 6 ? -182.62 : 182.62;
      let fiscalDate = d3.utcDay.offset(d, offset);
      return d3.utcDay.offset(fiscalDate, (2000 - fiscalDate.getUTCFullYear()) * 365.24);
    },
    tickFormat: (d) => {
      let month = d.getUTCMonth();
      let adjustedMonth = (month + 7) % 12;
      let adjustedDate = new Date(d.getUTCFullYear(), adjustedMonth, 1);
      return d3.utcFormat("%b")(adjustedDate);
    },
    line: true
  },
  y: { nice: true, grid: true, zero: true },
  marks: [
    Plot.line(data, {
      x: "date",
      y: "extent",
      z: d => d.date.getUTCFullYear()  + (d.date.getUTCMonth() >= 6 ? 1 : 0) , // Separate lines by fiscal month and calendar year
      stroke: d => d.date.getUTCFullYear() === 2015 ? "blue" : "gray", // Change color based on year
    })
  ]
})

Somehow the Z channel is not correctly separating the lines, and I can't work out what I am doing wrong.

Is there an easier way to accomplish transforming and plotting data for a fiscal year?

[Fil]

I'm sending you a suggestion.

[kcomplexes]

That is perfect and so much more elegant than what I was attempting. Thanks Fil!