Stacked Area Chart
ts
Frame([
StackX(
{
spacing: 0,
sharedScale: true,
},
For(_(streamgraphData).groupBy("x"), (items, xCoord) =>
StackY(
{ spacing: 0, x: v(xCoord) },
For(items, (d) =>
Rect({
name: `${xCoord}-${d.c}`,
h: v(d.y),
w: 0,
fill: v(d.c),
})
)
)
)
),
...For(_(streamgraphData).groupBy("c"), (items, c) =>
ConnectX(
{
mixBlendMode: "normal",
strokeWidth: 1,
},
For(items, (d) => Ref(`${d.x}-${d.c}`))
)
),
]).render(root, { w: 500, h: 300, axes: true });