Stacked areaY charts break when using optimization

[kgoodrick-uu]

When using the m4 optimization for stacked area charts with more than a cetain number of data points the stack breaks with gaps between segements. Take this minimum example:

import * as vg from "@uwdata/vgplot";

const coord = vg.coordinator();
coord.databaseConnector(vg.wasmConnector());


const parquetUrl = "https://raw.githubusercontent.com/kgoodrick-uu/mosaic-test/main/fake_data.parquet";

await vg.coordinator().exec(vg.loadParquet(
    "profile", parquetUrl,
));

const zoom = vg.Selection.crossfilter();

const baseEncoding = {
    x: "time_stamp",
    y: "power",
    fill: "charger_id",
}

const optimize = true;

const mainPlot = vg.plot(
    vg.areaY(vg.from("profile", {filterBy: zoom, optimize: optimize}), baseEncoding),
    vg.yTickFormat("~s"),
);

const zoomPlot = vg.plot(
    vg.areaY(vg.from("profile", {optimize: optimize}), baseEncoding),
    vg.intervalX({as: zoom}),
    vg.yTickFormat("~s"),
    vg.height(100)
);

vg.vconcat(
    mainPlot,
    zoomPlot,
);

Broken stacking is clearly visible when zoomed into a few hours of data.

If optimize is changed to false stacking behaves as expected

I was not able to recreate this without the zoom (I think it is still there, but once the data is large enough I can no longer see if the stacking is broken). I think there needs to be a certain amount of data before the error is triggered.

My guess is that the optimization is not getting data for each of the groups at each timestamp it is sampling and that causes the strange behavior as some timesteps do not have data for each group.

Expected Behaivor: Stacked areas should remain contiguous and correctly layered when optimize: true is enabled.

[jheer]

Thanks for filing the issue! Unfortunately the m4 algorithm does not directly lend itself to stacking, as it will choose different points to preserve for each series, leading to misaligned points that then fail to stack. So for now, setting optimize: false is the "right" way to create stacked area charts.

At minimum we should sign better sign post this issue in the documentation. Longer term, we would benefit from a new method with similar benefits as m4 but with support for stacking.

[norwayiscoming]

I ran into similar issues with optimization in stacked charts. It might be worth checking if the gaps are due to data point filtering in the m4 algorithm. For instance, trying a simpler dataset or reducing the number of series might help isolate the problem.

Also, debugging the data flow by logging the outputs from the smoothing function may reveal inconsistencies. I had success with manually controlling the data points like this:

const filteredData = vg.filterData(vg.from("profile"), (d) => d.power > 0);
const mainPlot = vg.plot(
    vg.areaY(filteredData, baseEncoding),
    vg.yTickFormat("~s"),
);

Could help ensure the stacking behaves correctly.

---

— sent from GitStar, a social platform for developers