Box Plot

const boxAndWhisker = ({ median, min, max, q1, q3, fill, w = 8 }) => {
  const minName = `min-${Math.random().toString(36).substring(2, 9)}`;
  const maxName = `max-${Math.random().toString(36).substring(2, 9)}`;
  return Frame({ y: 0 }, [
    Rect({ y: 0, w: 0, h: 0 }),
    Rect({ w, h: w / 8, y: min, fill: "gray" }).name(minName),
    Rect({ w, h: w / 8, y: max, fill: "gray" }).name(maxName),
    ConnectY({ mode: "center-to-center", strokeWidth: w / 8 }, [
      Ref(minName),
      Ref(maxName),
    ]),
    Rect({ w, y: q1, h: q3 - q1, fill }),
    Rect({ w, h: w / 8, y: median, fill: "white" }),
  ]);
};

StackX(
  {
    spacing: 24,
    sharedScale: true,
  },
  For(
    groupBy(
      _.orderBy(genderPayGap, (d) => payGrade.indexOf(d["Pay Grade"])),
      "Pay Grade"
    ),
    (d, key) =>
      StackX(
        {
          key,
          spacing: 16,
        },
        For(groupBy(d, "Gender"), (d, key) =>
          boxAndWhisker({
            median: d[0].Median / 150,
            min: d[0].Min / 150,
            max: d[0].Max / 150,
            q1: d[0]["25-Percentile"] / 150,
            q3: d[0]["75-Percentile"] / 150,
            fill: v(key),
            w: 16,
          })
        )
      )
  )
).render(root, { w: 500, h: 600, y: -800 });