Balloon Chart

const colorMap = {
  0: color.red,
  1: color.blue,
  2: color.green,
  3: color.yellow,
  4: color.purple,
  5: color.orange,
};

const scatterData = _(seafood)
  .groupBy("lake")
  .map((lakeData, lake) => ({
    lake,
    x: lakeLocations[lake].x,
    y: lakeLocations[lake].y,
    collection: lakeData.map((item) => ({
      species: item.species,
      count: item.count,
    })),
  }))
  .value();

const Balloon = (options) =>
  Frame(
    {
      x: options?.x - 15 * (options?.scale ?? 1),
      y: options?.y - 25 * (options?.scale ?? 1),
      box: true,
      transform: { scale: { x: options?.scale ?? 1, y: options?.scale ?? 1 } },
    },
    [
      Ellipse({
        cx: 15,
        cy: 15,
        w: 24,
        h: 30,
        fill: (options?.color ?? color.red)[4],
      }),
      Ellipse({
        cx: 12,
        cy: 11,
        w: 7,
        h: 11,
        fill: (options?.color ?? color.red)[3],
      }),
      Rect({
        cx: 15,
        cy: 32,
        w: 8,
        h: 4,
        fill: (options?.color ?? color.red)[5],
        rx: 3,
        ry: 2,
      }),
      Rect({
        cx: 15,
        cy: 32,
        w: 5,
        h: 2.4,
        fill: (options?.color ?? color.red)[6],
        rx: 2,
        ry: 1,
      }),
    ]
  );

Frame(
  { coord: Wavy(), x: 0, y: 0 },
  For(scatterData, (data, i) =>
    Frame([
      Rect({
        x: data.x,
        w: 1,
        y: data.y,
        h: size.height - data.y,
        emY: true,
        fill: black,
      }),
      Balloon({ scale: 1, x: data.x, y: data.y, color: colorMap[i % 6] }),
    ])
  )
).render(root, { w: 500, h: 300 });