Plot line, as I increase K value, line chart gets shorter

Community Help
1

I have this issue with Plot line, as I increase the k value, the line charts is getting shorter & shorter ??

How can I fixed this ?

I can’t find the Docs on Plot line chart and k value …

 Plot.lineY( newCase3.data ,Plot.windowY ({ x:"date", y: "cluster_import",  stroke:spectral[0], k:kinput } ) ),

Thanks

https://observablehq.com/@stanleyseow/covid19-my-cluster

2

I think that as the K value increases, the line get narrower as data points are combined/mapped to present an average.

If you increase kinput to the value of newCase3.data.length you will see it’s reduced to 1 entry which is the average of all the data points.

So K is reducing the number of elements in the window and averages the data and the line shrinks to the center as the number of points are reduced.

This is my ‘reckons’ as I’m not a plot expert.

1 Like
3

To add to @hellonearthis — if you want to show data for today, but still smooth it out, you can use a trailing average. By default, Plot.window is “centered” on the data, but you can change that. In v0.1 (which is preloaded on Observable) it was called “shift” but in v0.2 (what you see in the docs today) it’ll be called “anchor”; I have a demo here.

It changes which points get mapped to which average, or, where the average of given points goes:

shift: “leading” / anchor: "start"

1 3 4 8 5 6 …
  ↓ ↙ ↙
  5

shift: “centered” / anchor: "middle"

1 3 4 8 5 6 …
  ↘ ↓ ↙
    5

shift: “trailing” / anchor: "end"

1 3 4 8 5 6 …
  ↘ ↘ ↓
      5

Each has tradeoffs; “trailing” goes up to the present, which is nice, but introduces a lag. “Centered” doesn’t have that kind of lag, but it leaks information from the future into the past: when you look at the smoothed data for a past date, it incorporates information that would not have been available at that time.

Here’s a suggestion you can merge where I’ve made your lines into trailing averages. (Sorry, I should’ve turned off Prettier on my account for a less noisy diff!)

3 Likes
4

Is there a way to expand the shrinking line so it uses the full window width?
It would look good as a way of averaging. Or maybe there is a way to do that, I’m still focused on learning D3 and not spent much time picking up plot.

5

Hm, good question! My only thought is to do it manually by explicitly setting the x domain to start k points later:

Plot.plot({
  x: { domain: d3.extent(data.slice(k - 1), (d) => d[0]) },
  marks: [Plot.lineY(data, Plot.windowY({ k, anchor: "end", x: "0", y: "1" }))]
})
1 Like