Skip to content

Nested Mosaic Plot

ts
const classColor = {
  First: gf.color6[0],
  Second: gf.color6[1],
  Third: gf.color6[2],
  Crew: gf.color6[3],
};

gf.StackY(
  { spacing: 4, alignment: "middle" },
  gf.For(_.groupBy(titanic, "class"), (items, cls) =>
    gf.StackX(
      { h: _(items).sumBy("count") / 10, spacing: 2, alignment: "middle" },
      gf.For(_.groupBy(items, "sex"), (sItems, sex) =>
        gf.StackY(
          {
            w: (_(sItems).sumBy("count") / _(items).sumBy("count")) * 100,
            spacing: 0,
            alignment: "middle",
            sharedScale: true,
          },
          gf.For(_.groupBy(sItems, "survived"), (items, survived) =>
            gf.rect({
              h: gf.v(_(items).sumBy("count")),
              fill: survived === "No" ? gf.gray : classColor[cls],
            })
          )
        )
      )
    )
  )
).render(root, { w: 500, h: 300 });