Interval (or series?) transform for line and area

[mbostock]

It’d be nice to support the interval transform for line and area marks such that if there’s missing data, a gap is automatically drawn rather than interpolating. I imagine that it would only be supported on lineX, lineY, areaX, and areaY, where it would apply to y, x, y, and x respectively.

[Fil]

It would also be useful for textY: #611

[Fil]

I love the idea, which seems simpler than the bin+empty bins filter that we currently have. The difficulty is that instead of a point being defined, we want to control when two consecutive points are connected, and create a multiline. Consecutive points are determined in the final call to shapeLine, but their original values are already scaled and can't be compared with the interval. (It's the first time that an issue comes from having applied the scales on the channels.) 🤔

[mbostock]

Here’s a “real world” example: https://observablehq.com/@mbostock/npm-daily-downloads?name=@observablehq/mtcars

This package is rarely downloaded, and the npm endpoint doesn’t return an entry when there were zero downloads oops, my own data processing was dropping zero-value entries. So you see this:

But what you should see is this:

Visual difference:

The correct graph can be produced by changing the areaY definition:

Plot.areaY(data, {x: "date", y: "value", fill: "steelblue", curve: "step-before"})

To use the bin transform with a null filter:

Plot.areaY(data, Plot.binX({y: "sum", filter: null}, {x: "date", interval: d3.utcDay, y: "value", fill: "steelblue", curve: "step-before"}))

Which makes me think maybe we just need a convenience shorthand? Something like…

function seriesX(interval, options) {
  return binX({y: "sum", filter: null}, {...options, interval});
}

Then you’d say

Plot.areaY(data, Plot.seriesX(d3.utcDay, {x: "date", y: "value", fill: "steelblue", curve: "step-before"}))

Or maybe it’d be something supported by the mark, e.g.,

Plot.areaY(data, {x: "date", series: d3.utcDay, y: "value", fill: "steelblue", curve: "step-before"})

I think we probably don’t want to call this the interval option because that could have a different interpretation (as it does e.g. for the bar mark where x is transformed into x1 and x2).

[Fil]

Yes I think it makes sense as a mark option, since the question is "how do you interpolate over missing values", and that's only for grouped marks. The implementation could be different (in particular, we could keep the x values exact, imply an ascending order, and introduce intermediate points at (x0+p, 0) (x1-p, 0) each time the difference between two consecutive x (x0 and x1) is larger or equal than 2 periods—or something like that?).

[Fil]

Here's a prototype: https://observablehq.com/@fil/npm-daily-downloads-597

[mbostock]

On the npm daily downloads topic, I realized it was me that was introducing the gaps, not the npm API. I was doing something like:

if (value > 0) {
  data.push({date: new Date(date), value});
}

I’ve changed this to instead truncate the series at the earliest non-zero value (without this, the chart would always start at 2015-01-01, rather than the date the package was first created).