How to stroke a line with a sliding window

Community Help
1

Following the docs in this notebook, I’ve got this graph that shows a black line with a sliding window:

Plot.plot({
  inset: 8,
  grid: true,
  color: {
    legend: true
  },
  marks: [
    Plot.lineY(
      hr.filter((d) => d.date >= new Date("2022-01-01")),
      Plot.windowY({ k: 7, anchor: "end" }, { x: "date", y: "heartRate" })
    )
  ]
})

I’d like the line to be colored based on the value of heartRate. The natural implementation is to just add "stroke": "heartRate" to the confusingly named¹ options argument of windowY:

Plot.plot({
  inset: 8,
  grid: true,
  color: {
    legend: true
  },
  marks: [
    Plot.lineY(
      hr.filter((d) => d.date >= new Date("2022-01-01")),
      Plot.windowY({ k: 7, anchor: "end" }, { x: "date", y: "heartRate", stroke: "heartRate" })
    )
  ]
})

However, this turns my graph into a series of horizontal lines that seem to mark the extent of each value, which is not at all what I want.

I see the final example on the doc page using map to color the line, but to be honest I can’t make heads or tails of what it’s doing.

So I have two questions:

  1. How do I set the stroke value to the heartRate element of the data?
  2. How would I debug what’s happening? I am throwing around lineYs and maps but I am unable to figure out how they’re transforming my data. I think I could solve this myself if I could figure out how to determine what transform is taking place - how do you who have more experience do so?

footnote 1: for example, the documentation says “The window transform supports the following options:”, but these do not go in the options argument. What goes in the options argument is… actually completely undefined by the documentation?

I just verified that every usage of “option” in that documentation page refers to something that goes in the k argument, and not in the options argument.

edit: this sounds much grumpier than I meant it to! I am not actually grumpy but the tone of the message does not convey that, so I’m just going to apologize

2

Try and add z: null to the options?

3

That returns the graph to a line, so it’s closer, but now the coloring isn’t mapped to the data in any way that I recognize

I added that graph to the bottom of the notebook

4

Well it’s because the stroke channel isn’t “windowed”, try this:

Plot.map(
  { y: Plot.window(24), stroke: Plot.window(24) },
  { x: "date", y: "heartRate", stroke: "heartRate", z: null }
)

I went back to the documentation and each of the options is explained like so: “For additional options to the window transform, replace the number k with an object with properties k, anchor, reduce, or strict.” Not sure how to make that better.

5

Thanks!

I apologize again for sounding grumpy, I will try to go in and make a PR to improve those docs (though I still don’t thoroughly understand how window/map work)

6

No worries! z is how Plot splits the data into series, and by default if you are using avarying stroke color, z will be that color — which is super useful to create multiple lines with different categorical colors. But since you want a single series, and a varying stroke, you need to set z to null.