Distribution by cohort

import WestCoastCharts from 'west-coast-charts'
import types from 'west-coast-charts/types'
import trellis from 'west-coast-charts/features/trellis'

WestCoastCharts.use(types).use(trellis)

const options = {
  chart: {
    height: "auto",
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "histogram",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Session minutes",
      cohort: "Jan",
      data: [8.6, 6.8, 11, 7.1, 6, 10.4, 16.5, 14, 6, 17.5, 15.6, 13.5, 12.5, 19.4, 12.2, 11.4, 12.2, 14.9, 15.3, 12.2, 15.7, 14.9, 6.9, 10.5, 14.6, 11.1, 18.3, 9.7, 13, 13.7, 7.3, 7.2, 18.6, 15.1, 11.4, 12.4, 4.7, 8.5, 11, 12.5, 17, 8.6, 8.8, 12.5, 10.3, 9, 5.6, 9.9, 16.4, 10.3, 17.8, 14.4, 14.6, 7.6, 13.7, 1.5, 22.1, 16.3, 7.6, 11, 20.4, 9.9, 6.9, 15.9, 10.9, 8.8, 14.2, 11.6, 10.4, 14.6, 14.8, 18.5, 13.5, 15.5, 6.3, 14.6, 13.8, 10.5, 5.3, 13, 11.5, 5.5, 16.8, 4.2, 10.7, 12.8, 13.7, 9.8, 18.3, 17.9, 10.3, 18.1, 8.7, 4.1, 4.5, 7.5, 8, 17, 13.3, 12, 11.7, 13.3, 10.6, 13.3, 11.7, 13.4, 7, 10.1, 10.4, 11.5, 14.6, 14.9, 13.6, 9.6, 10.1, 14.4, 9.6, 12, 12.2, 16.7, 7.8, 17.3, 7.8, 18.8, 14.5, 16.2, 7.8, 12.7, 18.5, 9.7, 15, 15.4, 10.2, 13.2, 12.9, 6.3, 6.6, 11.8, 11.6, 7.1, 14.8, 15.7, 11.5, 11.1, 17.5, 18.4, 2.9, 10.3, 18.9, 1.3, 13.9, 4.9, 17.3, 7.6, 7.8, 7.6, 8.5, 14.4, 11.5, 5.7, 9.6, 19.9, 11, 16.3, 16.5, 10.3, 19.9, 11, 6.3, 7.9, 5.5, 13.8, 11.6, 12.1, 9.6, 16.8, 17.3, 9.8, 10.4, 7.9, 10.8, 9.9, 12.8, 17, 13.7, 11.8, 19, 11.3, 10.3, 13, 9.3, 13.8, 18, 12.4, 8.5, 8.2, 11, 11.1, 13.8, 15.5, 13.3, 12, 15.4, 17.7, 8.2, 12.7, 8, 11.6, 10.4, 9.6, 9.8, 14.5, 15.2, 18.5, 13.3, 7.2, 10.7, 15.6, 11.5, 10, 10.7, 10.9, 7.6, 8.3, 12.3, 9.6, 12, 8.9, 13.2, 15, 17.3, 10.6, 13.9, 18.9, 10.7, 10.8, 13.8, 5.8, 12.7, 12.3, 10.7, 7, 19.4, 7, 10.4, 13.7, 5, 11.8, 19.7, 10.1, 14.9, 17.1, 16.8, 13.2, 6.2, 11.9, 6.8, 14.8, 12.2, 6.5, 9.4, 12.8, 11.7, 14.7, 9.4, 15.6, 7.6, 16.9, 16.9, 2, 16.9, 1.6, 14.7, 6.7, 10, 16.4, 10.2, 21.9, 5.9, 7.7, 17.1, 15.2, 20.2, 11.1, 16.4, 17.5, 17.5, 11.6, 20.4, 6, 10.7, 12.8, 12.6, 1.7, 12.2, 11.8, 10, 10.3, 13, 20.2]
    },
    {
      name: "Session minutes",
      cohort: "Feb",
      data: [14.1, 20.6, 16.4, 13, 16.3, 19.2, 12.5, 20.8, 8.4, 12.7, 16.3, 8.2, 6.6, 21.3, 15.9, 14.7, 11.4, 20.2, 8, 10.3, 13.5, 10.9, 4.3, 8.7, 10.7, 14.1, 11.2, 12.4, 9.9, 7.3, 10.9, 17, 6.8, 5.4, 14.1, 8.8, 16.4, 8.5, 13.2, 15.8, 14.7, 6.7, 11.3, 19.2, 12.6, 15.7, 12.8, 12.7, 14.7, 17.8, 12.9, 10.2, 12.1, 14.8, 18.3, 14.8, 16.8, 13.7, 19.4, 14.4, 16.7, 13.4, 20.5, 11.9, 13.7, 12.4, 13.5, 13.3, 12.8, 11.3, 13.9, 14, 18.9, 11.3, 14, 13.4, 15.8, 11.1, 16.5, 17.4, 12.1, 12.2, 12.5, 11.5, 13, 11.9, 15.8, 12, 8, 15.5, 11.8, 13.7, 6.9, 13, 18.9, 14, 12.7, 9.9, 11.9, 16.9, 10.8, 11.7, 13.1, 16.1, 14.5, 16.5, 15, 12.8, 11.1, 7.4, 8.9, 8.7, 10.5, 13.7, 18.6, 15.5, 11.7, 5.9, 7.9, 15.3, 16.2, 12.6, 10.5, 9.4, 12.7, 12.1, 14, 14.3, 11.6, 15.3, 18.2, 8, 17.4, 10.9, 15.9, 7.6, 11.4, 6.9, 6.2, 19.4, 15.9, 18.3, 9.1, 8, 18.2, 10.2, 17, 9.3, 10.4, 7.1, 16.1, 14, 13.4, 17.4, 9.3, 9.3, 13.6, 11.4, 16.4, 14.1, 14.1, 5.3, 4.4, 13.4, 13.6, 17.7, 9.5, 12.9, 15.3, 3.9, 7.5, 17.9, 12.7, 16.2, 18.3, 15.7, 16.6, 17.2, 16.9, 3.1, 7.5, 9.5, 7.5, 13.2, 10.3, 16.2, 20.2, 21.7, 16, 10.4, 11, 15.5, 11.9, 11.6, 9.4, 13.8, 8.6, 12.8, 7.4, 20.3, 13.5, 9.2, 11.4, 17.4, 13.9, 14.3, 15.8, 10.6, 18, 13.1, 10.7, 8.8, 4.3, 13.9, 8.4, 13.1, 20.7, 10.2, 19.3, 13, 8.4, 13.4, 10.7, 9.6, 9.6, 7.9, 18.6, 11.8, 14.1, 7.9, 12.9, 9.6, 17.7, 8.1, 16.1, 12.1, 16.2, 19.9, 12.5, 15.4, 9.9, 3.9, 19.7, 20.5, 8.5, 9.2, 15.1, 20.7, 10.4, 7.8, 17.6, 13.1, 15, 17.4, 16.1, 10.1, 13.2, 11.2, 18.4, 20.6, 13.2, 15.4, 10.3, 13.8, 13.9, 22.5, 19, 8, 12.4, 16.8, 12.5, 17.2, 10.2, 13, 13.9, 17.1, 11.2, 7, 18.7, 14.6, 13.9, 17.8, 1.9, 5.7, 14.1, 12.7, 13.2, 11.4, 15.4, 18.9, 11, 20.1, 10, 11.6, 8.4, 15, 12.2, 16.2, 18.3, 8.6]
    },
    {
      name: "Session minutes",
      cohort: "Mar",
      data: [10.8, 17.4, 11.7, 20.1, 16.6, 9.9, 19.7, 11.9, 18.7, 18.9, 15.3, 18.6, 15.8, 18.2, 24.7, 12, 11.6, 11.5, 22.5, 21.7, 25.7, 17.7, 20.9, 19.5, 12, 18.4, 10.4, 13.5, 9.2, 23.2, 11, 12.5, 17.1, 6.7, 17.8, 16.1, 15.9, 19.2, 14.7, 21.6, 15.4, 14.1, 11.2, 15.4, 18.2, 14.2, 26.5, 15.6, 18.7, 17.3, 16.6, 21.6, 16.9, 15.4, 17.9, 9.5, 18.1, 20, 16.9, 9.9, 15.5, 15.7, 12.1, 13.3, 18.6, 17.8, 15.7, 15.7, 12.9, 15.1, 12.4, 14.6, 13.7, 11.8, 16.6, 12.7, 10.9, 13, 9.9, 15.6, 14.4, 8.8, 9, 11.6, 19.2, 16.5, 16, 12.8, 10, 19.8, 22.3, 12.1, 13.2, 16.2, 18.4, 12.8, 17.5, 13, 12.8, 10.9, 10, 16.8, 17.4, 19.5, 13.4, 18.1, 7.3, 12.7, 18.5, 12.5, 12.7, 20.2, 12.8, 19.9, 17.2, 16, 18.7, 13.4, 10.9, 15.3, 16.6, 15.1, 10, 15.5, 7.6, 18.6, 18.8, 19.5, 22.3, 17.8, 9.5, 17.6, 15.9, 17.1, 18, 16.6, 16.6, 13, 21.5, 14.2, 18.2, 14.9, 18.8, 13.7, 15.6, 13.9, 12.8, 25.4, 26.9, 2.5, 16.5, 15.9, 19.8, 20.1, 14.2, 11.8, 11.3, 16.2, 13.2, 17.2, 20.7, 17, 22, 14.8, 14.8, 12.8, 21.3, 15.6, 13.1, 18.5, 20.3, 11.1, 15.2, 16.4, 15, 15.4, 20.6, 18.8, 14.4, 15.6, 17.1, 16.4, 17.8, 18.7, 11.9, 7.5, 19.2, 16.2, 17.8, 14.3, 23.7, 13.3, 14.4, 13.8, 10.4, 14.1, 16.7, 14.4, 14, 15.5, 19.8, 25.1, 9.8, 14, 22.5, 10.5, 16.5, 19.7, 12.1, 14.2, 18, 8.1, 18.3, 16.7, 11.3, 19.2, 13.9, 14.6, 17.5, 17.4, 17.9, 22.3, 15.2, 9.2, 14.7, 20.8, 19.5, 14.7, 12.6, 11.5, 16.2, 11.5, 18.2, 15.2, 14.4, 10.5, 12.8, 21.1, 7.7, 12.5, 22.2, 11.2, 9.4, 17.8, 9, 14.4, 11.5, 6.4, 24.1, 16.6, 20.5, 8.2, 19.9, 18, 8.9, 19.8, 18.2, 20.5, 10.2, 12.2, 16, 19, 20.4, 14.5, 12.6, 16, 14, 6.9, 9.4, 14.4, 14.6, 11.9, 14.9, 16.7, 11.6, 12.2, 15.1, 15.3, 20.4, 22, 18.1, 16.1, 13.4, 13.8, 10.8, 14.1, 13, 16.8, 14.4, 17.9, 30.6, 22.8, 12, 10.6, 10.6, 12.1, 9.7, 20.7, 12.5, 21.3]
    },
    {
      name: "Session minutes",
      cohort: "Apr",
      data: [15.1, 14.7, 9.2, 23.7, 13.7, 21.9, 14.3, 12, 22.7, 16.9, 24, 15, 24.4, 16.4, 10.1, 9.1, 19.4, 20, 15.9, 20.9, 13.1, 12.1, 9.7, 21.4, 19.8, 17.3, 14.9, 17.8, 13.1, 9.1, 12.3, 18.8, 18.2, 10.7, 19.5, 15.2, 18.9, 11.2, 18.9, 18.8, 19.4, 19.9, 16.4, 14.8, 18.2, 17, 20.8, 0.3, 16.7, 18.8, 15.4, 21.5, 15.8, 13.3, 22.1, 22.4, 15.9, 16.8, 21.4, 19.7, 9.4, 11.7, 18.2, 15.8, 8, 20.8, 18.1, 18.7, 12.9, 16.2, 19.7, 19.8, 26.9, 10.4, 20.1, 8.2, 15.9, 15.5, 12.4, 19.8, 11.2, 18.9, 11.7, 11.7, 18.4, 18.5, 15, 19.7, 22.6, 11.8, 16.2, 17.7, 14, 17.5, 16.8, 17.8, 12.6, 12.5, 19.4, 11.8, 15.2, 12.9, 22, 19.1, 12.8, 21.9, 8, 11.7, 16.9, 18.1, 24.9, 10.5, 16.5, 12.7, 12, 18.3, 17.8, 15.9, 12.4, 9.2, 18.6, 12.4, 12.4, 22.6, 11.6, 22.7, 20.1, 21, 16.5, 16.9, 9.6, 18, 11.8, 18.5, 13.7, 15.6, 20.8, 14.3, 14.3, 16.5, 23.2, 17.5, 23.8, 11.9, 24.4, 17.6, 12.2, 11.6, 17.4, 17, 17.7, 12, 15, 21, 14.8, 9.9, 16.3, 22.6, 17.8, 17.7, 7.1, 19.1, 22.4, 15.6, 8.3, 22.9, 15.9, 11.8, 14.7, 21.5, 12.2, 24.7, 19.6, 17.3, 22.6, 19, 12.3, 17.5, 18.3, 16.3, 13.4, 18.8, 23.5, 9.4, 11.8, 19.9, 16.5, 12.9, 14.7, 20.1, 17.7, 21.6, 16.3, 15, 11.4, 19, 13.9, 10.5, 15.2, 15.7, 18.4, 20.1, 18.8, 13.2, 19.3, 19.7, 17.2, 10.9, 14.5, 15.1, 12.5, 19.8, 22.7, 22.3, 18.4, 15, 15.4, 11.7, 22.1, 8.2, 21, 21.6, 10.2, 12.6, 13.9, 23.1, 17, 15.6, 16.1, 14.9, 15.1, 21.8, 16.6, 9.7, 17.7, 15.5, 14, 13.5, 13.9, 23.7, 14.2, 15.3, 8.8, 12.6, 7.3, 10.4, 17.1, 13.7, 12.4, 14.9, 10.7, 14.5, 17.2, 18.3, 19.7, 16.1, 25.3, 15.8, 18.3, 18.6, 13.4, 11.7, 10.6, 19.2, 14.3, 18.4, 19.3, 21.1, 18, 16.8, 14.4, 19.8, 13.1, 16.2, 16.8, 17.2, 15.2, 19.4, 18.8, 17.4, 20.8, 21.5, 19, 15.8, 13.3, 23.5, 13.3, 15, 13.9, 14.6, 18.6, 16.5, 10.8, 19.6, 17.7, 25.1, 17.4, 21.6, 16.3, 11.7]
    },
    {
      name: "Session minutes",
      cohort: "May",
      data: [20.8, 18.7, 22.3, 18, 23.7, 16.8, 17.5, 15.2, 20.8, 19, 12.8, 12.9, 13.9, 15.4, 7.5, 14, 16.8, 24.2, 17.5, 19.8, 19.3, 13.1, 18.8, 13.4, 19.8, 15.8, 16.1, 20.8, 21.9, 16.8, 20.8, 21.2, 16.2, 16.6, 17.8, 14.5, 12, 15, 17.5, 14.1, 18.7, 17.6, 18.7, 21.1, 19.9, 17.7, 20.8, 15.8, 17.3, 10.9, 17.8, 19.2, 22.7, 19.2, 20.7, 18.7, 24.4, 25.7, 14.9, 26.8, 16.3, 16.6, 21.9, 18.2, 13.8, 19.5, 12.4, 26.3, 20.3, 21, 20.4, 27.5, 14.9, 24.8, 19.9, 14.2, 22.4, 23.4, 16.4, 18.8, 16.4, 17.5, 18.7, 19.4, 24.3, 20.3, 20.6, 17.7, 17, 17.3, 20.6, 18.8, 14.5, 19.5, 17.9, 14, 18.6, 19.9, 23, 20.6, 6.9, 19.5, 17.9, 19.6, 14, 21.1, 22.5, 12.3, 17.2, 19.9, 18.3, 20.9, 9.9, 16.5, 25.1, 26.2, 20.3, 18.4, 25.3, 21.1, 10.6, 18.3, 22.4, 14.8, 18, 15.9, 20.5, 27.4, 17.9, 26.1, 21.5, 5.3, 17.6, 22.4, 18.5, 12.2, 16, 21.4, 23.1, 12.8, 16.5, 12.6, 13.2, 15, 8.7, 25.2, 15.1, 15.3, 12.3, 19, 16.8, 26.4, 16.2, 20.6, 21.4, 24, 16.1, 12.3, 21.4, 19.5, 21.8, 18.7, 17.5, 22, 20.9, 20.7, 12.1, 15.8, 11, 14.3, 24.2, 13.2, 19.4, 23, 16.8, 14.9, 25.2, 19, 22.2, 16.4, 10.7, 21.8, 21.6, 15.5, 22.4, 18.8, 10.7, 10.6, 13.3, 21, 19.1, 23, 13.8, 13.1, 14.9, 21.7, 14.6, 17.7, 18.5, 20.2, 24.8, 15.9, 7.3, 16.9, 17.2, 21.9, 21.1, 21.6, 13.2, 16.5, 18.6, 12.5, 15.5, 14.6, 12.5, 22.3, 12.4, 12.9, 17.8, 18.8, 18.4, 20.4, 20.3, 11.8, 28.5, 12.4, 26.8, 16.5, 24.7, 20.6, 24.8, 16.8, 17.9, 12.8, 19, 18.1, 16.4, 19.5, 15.3, 20.2, 18.2, 15.9, 23.4, 16.7, 11.6, 13.5, 24.7, 20, 18.4, 22, 19.2, 25.1, 25.7, 20.8, 16.1, 13, 18.6, 17.7, 17.4, 21.2, 15.8, 10.4, 13.6, 23, 21.7, 18.4, 16.8, 18.7, 20.1, 14.2, 17.3, 24.7, 20.6, 19.6, 18.4, 11.6, 17.3, 17.7, 17.2, 13.4, 18.9, 16.4, 16.4, 15.5, 14.5, 17.5, 14.9, 19.1, 15.1, 22.3, 15.7, 18.8, 16.5, 10, 17.9, 15.8, 16.4, 20.6, 23, 22.6]
    },
    {
      name: "Session minutes",
      cohort: "Jun",
      data: [17.2, 20.3, 20.1, 24.5, 18.6, 24.6, 16.1, 12.5, 21.5, 16.5, 20.2, 17.4, 19.2, 17.2, 18.6, 20, 13.3, 18.7, 23, 15, 23.6, 16.6, 21.9, 17.2, 18.3, 19.3, 19.5, 20.7, 7.7, 21.2, 18.6, 14.4, 17.7, 19.8, 15.9, 19.8, 27.4, 21.3, 22.1, 25.8, 17.3, 20.3, 17.5, 16.5, 23.2, 29.7, 18.2, 26.4, 27.8, 18.7, 16.9, 15.9, 18.3, 17.1, 17.7, 27, 19.7, 18.4, 20.7, 17.1, 24.3, 15.9, 14.9, 24, 23.8, 23.8, 11.6, 16.9, 23.2, 24, 15.8, 23.9, 18.8, 18, 13.7, 17.8, 20.2, 21.9, 22.3, 18.6, 21.7, 18.5, 14, 21.8, 16.6, 28.7, 15.9, 23.1, 18.1, 18.4, 16.4, 22.5, 20.8, 13.5, 17.2, 15.7, 21.2, 16.4, 23.9, 17.8, 24.9, 16.2, 24.3, 20, 21.4, 17.6, 19.7, 16, 14.6, 21, 18, 17.7, 19.7, 17.5, 16, 19.8, 17.2, 18.9, 26.8, 19, 17.9, 28.2, 18.8, 17.9, 12.7, 17.5, 16.3, 23.2, 10, 22.1, 15.3, 20, 23.2, 15, 14.7, 15.6, 16.6, 20.1, 21.2, 17, 17.7, 21.6, 19, 16.9, 20.7, 18.9, 23.4, 17.7, 17.1, 14.7, 18.3, 19.9, 16.2, 27.2, 24.7, 18.1, 22.3, 17.8, 24.4, 26.8, 22, 24.1, 20.4, 21.9, 17.1, 17.5, 12.8, 20.3, 27.8, 25.7, 12.3, 23.2, 16.6, 16.4, 12.3, 16.1, 25.4, 19.6, 16.7, 21.1, 27.3, 25.5, 25.7, 22.1, 21.6, 12.4, 16.5, 27, 20, 24.5, 19.5, 19.3, 16.1, 22.3, 15.1, 19.1, 16.5, 20.6, 19.9, 13.8, 22.6, 17.2, 31.5, 24.3, 26.7, 15.2, 17.1, 15.2, 14, 15.3, 22.6, 17.1, 20.1, 24.7, 21.9, 24, 20.5, 21.8, 10.1, 20.5, 18.3, 27.1, 21.1, 14.9, 10, 14.8, 17.6, 16.2, 22.3, 24.8, 19.8, 18.6, 21.1, 15.5, 24.6, 13.9, 26.3, 20.8, 17.8, 17.7, 21, 20.5, 22.1, 16.6, 18.2, 23.5, 33.6, 15.5, 10.5, 18.5, 16.7, 21.7, 12.3, 28.2, 19.7, 20.4, 15.6, 27.4, 20.1, 15.1, 23.7, 22.7, 18, 13.9, 25.8, 13.5, 17.1, 21.6, 23.2, 21.9, 19.2, 20.6, 13.9, 20.8, 22.7, 24.3, 17.7, 23.1, 23.5, 20.3, 16.7, 20.8, 19.3, 16.4, 18.8, 23.7, 16.7, 17.6, 21.9, 27, 20.4, 20.8, 19.9, 15.3, 20.6, 16.3, 17.1, 17.2, 16.1, 13.3]
    }
  ],
  plotOptions: {
    histogram: {
      niceEdges: true
    }
  },
  trellis: {
    by: "cohort",
    columns: 3,
    aspectRatio: 1.7,
    legend: "none",
    header: {
      formatter: (k) => k + ' cohort'
    }
  },
  title: {
    text: "Session length by signup cohort"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render()