GoFish Graphics

Appearance

Ribbon Chart ​

ts
Frame([
  StackX({ spacing: 64, sharedScale: true },
    For(groupBy(seafood, "lake"), (d) =>
      StackY({ spacing: 2 },
        For(_(d).orderBy("count", "desc"), (d) =>
          Rect({ name: `${d.lake}-${d.species}`, w: 16, h: v(d.count), fill: v(d.species) }))))),
    For(groupBy(seafood, "species"), (items) =>
      ConnectX({ opacity: 0.8 },
        For(items, (d) => Ref(`${d.lake}-${d.species}`)))),
  ]).render(root, { w: 500, h: 300 });