Skip to content

Flower Chart

ts
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();

Frame(
  For(scatterData, (sample) =>
    Frame({ x: sample.x, y: sample.y }, [
      Rect({
        w: 2,
        h: 300 - sample.y,
        fill: color.green[5],
      }),
      Frame(
        {
          coord: Polar(),
        },
        [
          StackX(
            {
              h: _(sample.collection).sumBy("count") / 7,
              spacing: 0,
              alignment: "start",
              sharedScale: true,
            },
            For(sample.collection, (d, i) =>
              Petal({
                w: v(d.count),
                fill: mix(color6[i % 6], white, 0.5),
              })
            )
          ),
        ]
      ),
    ])
  )
).render(root, { w: 500, h: 300 });