Colour-graded jitter

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

WestCoastCharts.use(types)

const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "violin",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Score",
      data: [
        {
          x: "Course 1",
          y: [48.2, 49, 65, 48.2, 61.8, 32.1, 68, 51.6, 42.4, 63.8, 66.5, 38.1, 48.2, 71.1, 94.8, 56.8, 50.3, 47.1, 52.8, 50.5, 37.9, 43, 65.5, 60.4, 57.8, 38.7, 48.2, 47.3, 69.9, 66.6, 68.8, 47.9, 52.1, 54.7, 72, 44.2, 46, 42.5, 54.1, 54.7, 62.3, 76.7, 51.4, 69, 31.4, 69.3, 59.4, 45.3, 58.9, 44.1, 42, 43.2, 60.6, 55.1, 65.1, 57.2, 69.8, 36.4, 73.5, 43, 58.2, 47.6, 46.6, 43.6, 54.3, 48.2, 72.8, 45.1, 56.6, 51.6, 72.1, 60.9, 41.1, 56.2, 55.8, 30.6, 39.8, 60.9, 74.7, 52.1, 44.8, 40.7, 56.1, 33.5, 63.5, 53, 56.6, 45.1, 33, 49.3, 55.5, 63, 49.5, 49.1, 52.3, 38.7, 56.5, 60.7, 31.2, 59.1]
        },
        {
          x: "Course 2",
          y: [74.8, 77.7, 61, 76.6, 87.7, 53, 54.1, 51.1, 78.6, 72.4, 44.5, 64.2, 65.7, 64.2, 72.3, 60.3, 53.8, 57.8, 38.9, 59.4, 61.4, 51.9, 66.6, 56.1, 47, 61, 56.9, 74.3, 78.7, 78.5, 56.3, 51.3, 68.7, 70.2, 94.4, 59.7, 55.1, 49.8, 68.9, 59.7, 67.4, 53.6, 63.1, 79, 71.7, 54.4, 53, 88.5, 71, 72.3, 66.9, 52, 68.9, 83.7, 59.3, 34, 57.2, 55, 71.3, 37.8, 77.3, 70.4, 60.7, 52.7, 67, 60.8, 60.3, 52.3, 54.1, 50.3, 65.7, 63, 62.2, 64.4, 57.9, 78.2, 51.6, 49.2, 68.9, 60.9, 44.9, 44.9, 75.9, 51, 69.5, 66.8, 70.7, 81.6, 57.4, 51.9, 85.3, 73.8, 53.2, 57.9, 74.7, 78.8, 66.9, 64.1, 78.9, 46.3]
        },
        {
          x: "Course 3",
          y: [47.7, 71.3, 73.9, 75.6, 68.4, 72.9, 71.7, 73.2, 74.4, 69.4, 69, 67.5, 87.6, 63.4, 67.4, 75.2, 88.5, 59.2, 77, 80.9, 62.4, 75.1, 76.8, 63.7, 81.2, 88.1, 83.5, 82.4, 59.9, 43.7, 45.9, 100, 73.3, 62, 53.2, 88.9, 68.8, 70, 61.6, 57.2, 82.3, 81.8, 77.6, 80.7, 77.6, 66.4, 99.2, 73.8, 57.8, 82.9, 76.4, 54.9, 68.1, 78.5, 88.3, 48, 63.7, 74.8, 63.2, 83.2, 79.3, 75, 53.7, 76.4, 68.9, 76.5, 55.3, 71.8, 59.4, 70.4, 91.9, 99.5, 91.2, 65.9, 70.6, 60.1, 59.4, 77.3, 93.4, 70.1, 67.8, 64, 69.3, 83.8, 76.6, 61.7, 53.7, 76.2, 56.8, 49.1, 63.3, 63.9, 92, 64.6, 72.7, 63.1, 49.6, 81.8, 63, 71]
        }
      ]
    }
  ],
  plotOptions: {
    violin: {
      points: {
        size: 2.4,
        jitter: 0.8,
        colorScale: {
          colors: ["#e11d48", "#f59e0b", "#10b981"],
          min: 30,
          max: 100
        }
      }
    }
  },
  colors: ["#94a3b8"],
  title: {
    text: "Exam scores, graded by value"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

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