Polar Ribbon Chart

Frame({ coord: Polar() }, [
      StackX(
        {
          y: 50,
          x: (-3 * Math.PI) / 6,
          spacing: (2 * Math.PI) / 6,
          alignment: "start",
          sharedScale: true,
          mode: "center-to-center",
        },
        For(groupBy(seafood, "lake"), (items, lake) =>
          StackY(
            { spacing: 2, reverse: true },
            For(_(items).orderBy("count", "desc"), (d) =>
                Rect({
                  w: 0.1,
                  h: v(d.count),
                  fill: v(d.species),
                }).name(`${d.lake}-${d.species}`)
              )
          )
        )
      ),
      For(groupBy(seafood, "species"), (items, species) =>
        ConnectX(
          { opacity: 0.8 },
          For(items, (d) => Ref(`${d.lake}-${d.species}`))
        )
      ),
    ]).render(root, { w: 500, h: 300, x: 200, y: 150 });