Streamgraph

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