Display Most Recent Rolling Average

[timbomckay]

For the past couple of days I've been trying to figure out how to display the most recent rolling average value. Using this fork, I've added the text mark in an effort to accomplish this but it appears to only display the last value from the data though displayed at that average point.

Here's essentially the snippt:

Plot.textY(sftemp,
  Plot.selectLast(
    Plot.windowY({ k: 28 }, { x: "date", y: "high", text: "high" })
  )
)

In this screenshot, I goal is for the red number to be the value of the blue line (shown in bottom tip), but it's displaying the actual data point instead (shown in the top tip).

Am I missing something or is this accomplished a different way?

Full Plot Snippet:

Plot.plot({
  y: {
    grid: true,
    label: "↑ Temperature (°F)"
  },
  marks: [
    Plot.lineY(sftemp, {x: "date", y: "high", strokeOpacity: 0.3, tip: { format: {x:null}}}),
    Plot.lineY(sftemp,
      Plot.windowY({k: 28, anchor, strict}, {x: "date", y: "high", stroke: "blue", tip: { format: {x:null}}})
    ),
    Plot.textY(sftemp,
      Plot.selectLast(
        Plot.windowY(
          {k: 28, anchor, strict},
          {x: "date", y: "high", text: "high", dx: 20, fill: "red", fontWeight: "bold"}
        )
      )
    )
  ],
  marginRight: 50,
})

[Fil]

Plot.windowY({k: 28, anchor, strict, ...options}) is a shorthand notation for:

Plot.map({y: Plot.window({ k: 28, anchor, strict })}, options)

which you can apply to multiple channels like so:

Plot.map({
  text: Plot.window({ k: 28, anchor, strict }),
  y: Plot.window({ k: 28, anchor, strict })
}, options)

See https://observablehq.com/plot/transforms/window

(You can also define window = Plot.window({ k: 28, anchor, strict }) and write Plot.map({text: window, y: window}, options))

[timbomckay]

Hi @Fil, thanks for your response.

It looks like based on that guidance the updated code would be something like this...

const options = { x: "date", y: "high", text: "high" };
+ const window = Plot.window({ k: 28, anchor, strict });

Plot.textY(sftemp,
  Plot.selectLast(
-   Plot.windowY({ k: 28 }, options)
+   Plot.map({ text: window, y: window }, options)
  )
)

Took me a minute but I got there.

I figured it was something with that shorthand and had been playing around with the map, but I didn't know how to get there.

Thanks for the help.

[timbomckay]

Hi @Fil, I'm trying to round the rolling average so we don't have 12.3456 but when I try returning text with Math.round() it doesn't impact the value.

Here's the snippet:

Plot.textY(
  sftemp,
  Plot.selectLast(
    Plot.map(
      {
        text: Plot.window({ k: 28, anchor, strict }),
        y: Plot.window({ k: 28, anchor, strict }),
      },
      {
        x: "date",
        y: "high",
        text: (d) => Math.round(d.high),
        dx: 20,
      },
    ),
  ),
),

I can create a new discussion if that'd be more appropriate, just seemed relevant to this topic.

[Fil]

I believe this creates a rolling average of the rounded values, not the rounded value of the rolling average. You'll need to wrap this in another Plot.map transform.

Plot.plot({
  y: {
    grid: true,
    label: "↑ Temperature (°F)"
  },
  marks: [
    Plot.lineY(sftemp, {
      x: "date",
      y: "high",
      strokeOpacity: 0.3,
      tip: { format: { x: null } }
    }),
    Plot.lineY(
      sftemp,
      Plot.windowY(
        { k: 28, anchor, strict },
        { x: "date", y: "high", stroke: "blue" }
      )
    ),
    Plot.textY(
      sftemp,
      Plot.selectLast(
        Plot.map(
          { text: (series) => series.map(Math.round) },
          Plot.map(
            {
              text: Plot.window({ k: 28, anchor, strict }),
              y: Plot.window({ k: 28, anchor, strict })
            },
            {
              x: "date",
              y: "high",
              text: "high",
              dx: 20,
              fill: "red",
              fontWeight: "bold"
            }
          )
        )
      )
    )
  ],
  marginRight: 50
})

[timbomckay]

Awesome, thanks. Yeah I figured it take another map/transformer but was struggling haha. Still wrapping my head around it. Appreciate the guidance.