Skip to content

Ridgeline Chart

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