From raw observations
Quartiles computed from raw samples; resample to update.
Why it matters violin type computes quartiles and density from raw arrays; resample morphs instead of redrawing
Open the chart without page chrome ↗
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "violin",
toolbar: {
show: false
}
},
series: [
{
name: "Wait (min)",
data: [
{
x: "Week 1",
y: [25.1, 39.5, 31.6, 48.4, 23.1, 18.3, 28.2, 34, 25.1, 17.2, 33.3, 24.6, 30.6, 44.9, 31, 39.5, 30.5, 36.3, 28.3, 35.3, 35.1, 32.9, 29.2, 31, 39.3, 27.7, 29.2, 35, 25.9, 32.2, 41.1, 36.2, 36.1, 23.1, 34.8, 29.9, 38.7, 36.8, 30.4, 29.6, 31.9, 34.9, 26.7, 30.1, 35.7, 37.8, 21.3, 31.8, 26.7, 40.7, 30.6, 32, 22.1, 38.5, 29.6, 37.1, 6.9, 30.6, 27.1, 30.7, 32.6, 30.6, 31, 30.3, 32.4, 32.8, 29, 27.3, 39.8, 29.1, 21.6, 21, 21.4, 49.3, 35.6, 28.7, 39.3, 31.3, 30.4, 36.4, 38.6, 43.4, 28.1, 36.7, 36.7, 30.4, 45.1, 36.8, 24.1, 29.4, 38.8, 40.4, 31.8, 41.3, 31.7, 36.4, 29.8, 35.1, 35.4, 30.7, 37.3, 30.1, 37.5, 33, 40.4, 41.6, 28.9, 29.3, 27.5, 34.8, 33.4, 39.1, 36.5, 32.5, 33, 30.7, 25.8, 27.7, 31.6, 32.2]
},
{
x: "Week 2",
y: [32.9, 35, 32.4, 38.3, 32.4, 31.3, 30.9, 42.5, 31.8, 34.2, 31.2, 24.4, 46.8, 36.2, 29.4, 42.7, 32.3, 39.2, 35.5, 33, 34, 36.7, 28.3, 18.1, 37.9, 31.3, 28.2, 30.1, 37.3, 26.7, 43.4, 35.2, 45.5, 35.6, 29.6, 35.9, 34.8, 37, 26.7, 35.9, 48.4, 34.3, 35.2, 38.7, 40.4, 41.3, 25.8, 36.1, 35, 40.4, 29.2, 47, 21.5, 27.5, 37, 33.6, 46.7, 38.9, 37.4, 33.2, 26.6, 34.1, 30.5, 45.8, 45, 42.8, 39.5, 25, 37.4, 34.7, 31.2, 35.2, 31.3, 44.3, 42.2, 35.3, 24.8, 39.9, 28.7, 31.7, 26.2, 33.5, 33.6, 36.5, 30.7, 29.8, 41.7, 33.8, 36.4, 27.6, 42.8, 42.3, 33.2, 34.6, 32.1, 31.8, 25.6, 40.1, 29.3, 35.8, 23.4, 32.8, 31.8, 31.4, 38.6, 30.9, 33.6, 30.9, 32.9, 34.6, 30.5, 28.3, 44.8, 32, 33.5, 42.6, 28.8, 30.2, 42.7, 27.3]
},
{
x: "Week 3",
y: [29.7, 45.8, 40, 49.1, 44.3, 38, 39.6, 35.5, 42.1, 36.8, 41.1, 45.2, 46.2, 45.2, 32.5, 37, 35.2, 30.9, 46.5, 41.8, 36.9, 46.5, 35.6, 44.9, 37.8, 46.9, 32.8, 38.9, 35.9, 35.1, 29.6, 38.9, 42.9, 45.6, 36.5, 45.7, 39.6, 41.6, 38.9, 51.5, 35.2, 35.5, 42.6, 28.6, 43, 31.9, 35.5, 49.2, 48.6, 41.7, 32.6, 36.9, 43.4, 40, 40.3, 33.2, 42.4, 46.2, 37.7, 40.3, 45.3, 37.7, 33.8, 45.1, 44.5, 40.9, 41.9, 40, 34.7, 38.7, 46.2, 38.3, 45.2, 39.4, 46.2, 42.8, 43, 43.7, 49, 38, 36.1, 42.7, 45.5, 36.4, 51.9, 51.3, 33.4, 44.6, 40, 36, 51.8, 49.9, 44.8, 42.3, 37.8, 35.5, 34.7, 44.1, 53.6, 41.1, 42.5, 48.7, 41, 39.7, 32.4, 34.4, 43.2, 32.1, 39, 43.9, 30.7, 39, 48.7, 44.9, 36, 41, 47.6, 32.7, 43.6, 20.3]
},
{
x: "Week 4",
y: [46.3, 49.7, 41.5, 62.2, 44.2, 44.9, 42.5, 52.2, 44.8, 48.3, 51.8, 52.5, 55.4, 43.5, 45, 53.7, 43.8, 46.3, 45.1, 39.2, 53.1, 44.3, 47, 44.2, 53, 47.8, 50.5, 48.3, 49.3, 46.5, 39.8, 43.2, 49.9, 54.6, 53.6, 46.5, 44.8, 50.7, 33.7, 52.9, 51.2, 56.1, 51.8, 49.8, 53, 40.8, 51, 54.7, 54.2, 46.4, 41, 53.7, 45.1, 35.7, 51.7, 46.6, 44.6, 46.8, 47.8, 41, 53.1, 53, 47.4, 43.2, 44.3, 46.4, 33.5, 47.8, 57.6, 42.2, 41.4, 58.6, 63.4, 52, 43.9, 40.6, 43.7, 48.2, 42, 50.7, 40.4, 57.2, 48.5, 46.8, 45.8, 50.3, 44.6, 50.8, 42.3, 36.7, 47.5, 52.8, 62.3, 54.7, 52.2, 42.9, 31.2, 44.2, 48.3, 38.9, 51.8, 47.9, 50.9, 51.3, 51.1, 58.7, 56.3, 47.4, 57.2, 46.2, 50.7, 51.5, 52.7, 47.7, 53.8, 57.5, 61.3, 46.7, 34.4, 53.9]
}
]
}
],
plotOptions: {
violin: {
box: {
show: true
},
points: {
show: false
}
}
},
title: {
text: "Wait time from raw observations"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()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: "Wait (min)",
data: [
{
x: "Week 1",
y: [25.1, 39.5, 31.6, 48.4, 23.1, 18.3, 28.2, 34, 25.1, 17.2, 33.3, 24.6, 30.6, 44.9, 31, 39.5, 30.5, 36.3, 28.3, 35.3, 35.1, 32.9, 29.2, 31, 39.3, 27.7, 29.2, 35, 25.9, 32.2, 41.1, 36.2, 36.1, 23.1, 34.8, 29.9, 38.7, 36.8, 30.4, 29.6, 31.9, 34.9, 26.7, 30.1, 35.7, 37.8, 21.3, 31.8, 26.7, 40.7, 30.6, 32, 22.1, 38.5, 29.6, 37.1, 6.9, 30.6, 27.1, 30.7, 32.6, 30.6, 31, 30.3, 32.4, 32.8, 29, 27.3, 39.8, 29.1, 21.6, 21, 21.4, 49.3, 35.6, 28.7, 39.3, 31.3, 30.4, 36.4, 38.6, 43.4, 28.1, 36.7, 36.7, 30.4, 45.1, 36.8, 24.1, 29.4, 38.8, 40.4, 31.8, 41.3, 31.7, 36.4, 29.8, 35.1, 35.4, 30.7, 37.3, 30.1, 37.5, 33, 40.4, 41.6, 28.9, 29.3, 27.5, 34.8, 33.4, 39.1, 36.5, 32.5, 33, 30.7, 25.8, 27.7, 31.6, 32.2]
},
{
x: "Week 2",
y: [32.9, 35, 32.4, 38.3, 32.4, 31.3, 30.9, 42.5, 31.8, 34.2, 31.2, 24.4, 46.8, 36.2, 29.4, 42.7, 32.3, 39.2, 35.5, 33, 34, 36.7, 28.3, 18.1, 37.9, 31.3, 28.2, 30.1, 37.3, 26.7, 43.4, 35.2, 45.5, 35.6, 29.6, 35.9, 34.8, 37, 26.7, 35.9, 48.4, 34.3, 35.2, 38.7, 40.4, 41.3, 25.8, 36.1, 35, 40.4, 29.2, 47, 21.5, 27.5, 37, 33.6, 46.7, 38.9, 37.4, 33.2, 26.6, 34.1, 30.5, 45.8, 45, 42.8, 39.5, 25, 37.4, 34.7, 31.2, 35.2, 31.3, 44.3, 42.2, 35.3, 24.8, 39.9, 28.7, 31.7, 26.2, 33.5, 33.6, 36.5, 30.7, 29.8, 41.7, 33.8, 36.4, 27.6, 42.8, 42.3, 33.2, 34.6, 32.1, 31.8, 25.6, 40.1, 29.3, 35.8, 23.4, 32.8, 31.8, 31.4, 38.6, 30.9, 33.6, 30.9, 32.9, 34.6, 30.5, 28.3, 44.8, 32, 33.5, 42.6, 28.8, 30.2, 42.7, 27.3]
},
{
x: "Week 3",
y: [29.7, 45.8, 40, 49.1, 44.3, 38, 39.6, 35.5, 42.1, 36.8, 41.1, 45.2, 46.2, 45.2, 32.5, 37, 35.2, 30.9, 46.5, 41.8, 36.9, 46.5, 35.6, 44.9, 37.8, 46.9, 32.8, 38.9, 35.9, 35.1, 29.6, 38.9, 42.9, 45.6, 36.5, 45.7, 39.6, 41.6, 38.9, 51.5, 35.2, 35.5, 42.6, 28.6, 43, 31.9, 35.5, 49.2, 48.6, 41.7, 32.6, 36.9, 43.4, 40, 40.3, 33.2, 42.4, 46.2, 37.7, 40.3, 45.3, 37.7, 33.8, 45.1, 44.5, 40.9, 41.9, 40, 34.7, 38.7, 46.2, 38.3, 45.2, 39.4, 46.2, 42.8, 43, 43.7, 49, 38, 36.1, 42.7, 45.5, 36.4, 51.9, 51.3, 33.4, 44.6, 40, 36, 51.8, 49.9, 44.8, 42.3, 37.8, 35.5, 34.7, 44.1, 53.6, 41.1, 42.5, 48.7, 41, 39.7, 32.4, 34.4, 43.2, 32.1, 39, 43.9, 30.7, 39, 48.7, 44.9, 36, 41, 47.6, 32.7, 43.6, 20.3]
},
{
x: "Week 4",
y: [46.3, 49.7, 41.5, 62.2, 44.2, 44.9, 42.5, 52.2, 44.8, 48.3, 51.8, 52.5, 55.4, 43.5, 45, 53.7, 43.8, 46.3, 45.1, 39.2, 53.1, 44.3, 47, 44.2, 53, 47.8, 50.5, 48.3, 49.3, 46.5, 39.8, 43.2, 49.9, 54.6, 53.6, 46.5, 44.8, 50.7, 33.7, 52.9, 51.2, 56.1, 51.8, 49.8, 53, 40.8, 51, 54.7, 54.2, 46.4, 41, 53.7, 45.1, 35.7, 51.7, 46.6, 44.6, 46.8, 47.8, 41, 53.1, 53, 47.4, 43.2, 44.3, 46.4, 33.5, 47.8, 57.6, 42.2, 41.4, 58.6, 63.4, 52, 43.9, 40.6, 43.7, 48.2, 42, 50.7, 40.4, 57.2, 48.5, 46.8, 45.8, 50.3, 44.6, 50.8, 42.3, 36.7, 47.5, 52.8, 62.3, 54.7, 52.2, 42.9, 31.2, 44.2, 48.3, 38.9, 51.8, 47.9, 50.9, 51.3, 51.1, 58.7, 56.3, 47.4, 57.2, 46.2, 50.7, 51.5, 52.7, 47.7, 53.8, 57.5, 61.3, 46.7, 34.4, 53.9]
}
]
}
],
plotOptions: {
violin: {
box: {
show: true
},
points: {
show: false
}
}
},
title: {
text: "Wait time from raw observations"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
await chart.render() Waiting for the chart.
Open Data & agent view to read this chart through chart.describe().
Read from the running library through its optional agent/describe module. Text, table and JSON share the same snapshot. Demo data only.
$ wcc chart export boxplot-boxplot-from-raw-observations.json --out boxplot-boxplot-from-raw-observations.svg --with-table Public agent tools 0.2.3, tested with Library 1.1.5; available from the versioned GitHub release and npm. Save a JSON spec first and check the loaded runtime and supported modules before rendering. Command reference
Loading /gallery/boxplot/boxplot-from-raw-observations/index.md …