Scatter with jitter
Discrete ratings jittered so overlapping points stay visible.
Open the chart without page chrome ↗
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "scatter",
toolbar: {
show: false
}
},
series: [
{
name: "iOS",
data: [
[3.79, 38.7],
[2.16, 20.4],
[4.88, 43.9],
[2.15, 24.1],
[4.07, 41.2],
[5.06, 38.6],
[2.95, 32.4],
[4.09, 42],
[0.79, 0.6],
[0.93, 9.7],
[2.1, 16.6],
[3.12, 18.7],
[0.85, 24.1],
[2.13, 12.5],
[5.19, 32.5],
[2.9, 19.9],
[0.94, 0],
[1.86, 13.7],
[1.92, 17.6],
[2.18, 13.6],
[4.07, 36.1],
[4.91, 39.6],
[3.85, 37.8],
[1.13, 6.6],
[0.89, 10.5],
[3.93, 36.2],
[2.05, 20.2],
[0.84, 17.5],
[1.86, 21.3],
[2, 15],
[2.79, 23.1],
[2.18, 21.8],
[2.79, 37.1],
[5.07, 44.7],
[4.1, 42],
[1.95, 15.1],
[1.07, 2.8],
[5.12, 58.8],
[5.17, 36.5],
[3.91, 21],
[2.24, 9.2],
[4.79, 55.6],
[2.05, 6],
[2.17, 8.8],
[2.88, 15.2],
[1.05, 11.4],
[1.79, 17],
[0.85, 10.8],
[5.02, 37.1],
[2.04, 19.9],
[2.78, 21.8],
[5.08, 55.6],
[1.91, 28.9],
[1.16, 8.4],
[5.16, 45.3],
[0.9, 13.1],
[2.17, 11.6],
[0.96, 19.3],
[3.1, 32.9],
[1.25, 4.2],
[0.91, 2.7],
[1.02, 20.2],
[1.77, 8.6],
[5.02, 52.8],
[1.9, 28],
[4.24, 30.8],
[2.17, 13],
[3.96, 35.1],
[1.25, 2.9],
[3.12, 26.4],
[2.11, 23.3],
[4.07, 28.8],
[2.1, 21.6],
[4.79, 32],
[5.2, 45.1],
[1.82, 17.5],
[3.76, 35.6],
[4.82, 51.3],
[4.2, 36.1],
[3.21, 35.6],
[2.77, 30],
[3.87, 34.9],
[3.1, 32.9],
[4.91, 48.7],
[1.93, 18.4],
[4.07, 28.5],
[5.19, 40.8],
[2.83, 25.2],
[4.94, 54.6],
[1.07, 5.4],
[5.02, 42.7],
[3.15, 26.4],
[3.19, 34.4],
[1.83, 26],
[1.82, 6.6],
[0.78, 18.1],
[2.99, 15.9],
[1.93, 3],
[4.1, 47.8],
[4.94, 56.3],
[3.92, 38.1],
[1.19, 10.7],
[4.1, 29.4],
[2.87, 6.5],
[1.13, 14.5],
[2.07, 15],
[2.11, 17.1],
[1.17, 26.1],
[1.92, 9],
[1.17, 0],
[4.75, 46.8],
[3.78, 29.5],
[2.13, 21.8],
[4.75, 46.6],
[4.22, 44.4],
[1.18, 0.1],
[0.99, 8.1],
[3.1, 33.8],
[1.88, 21.2],
[4.75, 40.2]
]
},
{
name: "Android",
data: [
[3.05, 30.4],
[0.85, 21.3],
[2.17, 6.9],
[2.98, 19],
[1.16, 0],
[0.96, 9.8],
[2.85, 33.9],
[4.85, 48.8],
[5.18, 47.4],
[1.24, 0],
[5.23, 56.9],
[4.16, 26.4],
[0.81, 12.5],
[5.04, 54.3],
[4.02, 45.7],
[2.21, 16.7],
[3.13, 22.8],
[4.87, 50.3],
[4.08, 54.5],
[3.92, 38.9],
[3.95, 41.9],
[3.92, 43.9],
[0.9, 9.4],
[1.24, 9],
[3.03, 28.3],
[4.15, 51.7],
[3.77, 58.8],
[4.9, 51.3],
[3.94, 34.1],
[2.04, 27.3],
[1.87, 34.6],
[0.99, 0],
[4.21, 42.1],
[3.97, 47.7],
[0.95, 19],
[5.09, 55.2],
[1.06, 0],
[1.78, 13],
[0.78, 26.6],
[2.75, 19.7],
[3.08, 46.1],
[4.85, 49.8],
[0.77, 12.3],
[4.93, 42.6],
[3.84, 52.4],
[1.87, 27.9],
[3.24, 35.1],
[4.86, 46.2],
[5.24, 44.5],
[2.75, 16.3],
[4.22, 44.9],
[2.85, 47.6],
[1.2, 19.8],
[4.88, 61.4],
[1.13, 6.5],
[4.09, 38.8],
[2.88, 34.5],
[4.08, 61.6],
[1.9, 27.4],
[4.14, 49.1],
[5.09, 46],
[0.77, 14.1],
[4.89, 65.5],
[4.79, 41.4],
[5.22, 54.8],
[5.15, 61.3],
[0.99, 20.3],
[3.23, 26.1],
[3.78, 47.6],
[2.79, 43.6],
[4.16, 42.2],
[3.98, 33.2],
[2.96, 37.6],
[0.79, 4.5],
[1.88, 23],
[2.24, 18.9],
[3.12, 31.4],
[1.14, 9.8],
[1.94, 24.1],
[0.93, 8.5],
[3.03, 30.1],
[3.84, 40.9],
[4.95, 50.3],
[4.22, 50.5],
[0.79, 22],
[2.19, 35.9],
[5.04, 49.4],
[5.03, 48],
[5.07, 51],
[2.18, 21.2],
[5.13, 40.6],
[3.81, 26.6],
[2.17, 22],
[2.94, 17.6],
[1.03, 17.5],
[5.22, 58.3],
[3.14, 26.9],
[4.02, 46],
[0.77, 7.2],
[5.16, 44.1],
[0.98, 21],
[0.81, 20.5],
[2.77, 32],
[4.18, 50.2],
[2.07, 25],
[3.18, 29.9],
[3.24, 30.3],
[1.07, 24.4],
[1.04, 13.9],
[2.8, 47.4],
[1.23, 11.4],
[2.79, 43.4],
[1.97, 19],
[5.22, 49.6],
[0.83, 22.7],
[3.06, 29.1],
[1.82, 22.6],
[2.9, 35.6],
[4.9, 50.5],
[2.92, 31.1]
]
}
],
xaxis: {
min: 0.5,
max: 5.5,
tickAmount: 5,
labels: {
formatter: (v) => (Math.abs(v - Math.round(v)) < 0.01 ? Math.round(v) + '★' : '')
}
},
yaxis: {
title: {
text: "Minutes per day"
}
},
markers: {
size: 4,
fillOpacity: 0.6,
strokeWidth: 0
},
title: {
text: "Usage by star rating (jittered)"
},
theme: {
mode: "light",
preset: "coastal"
}
}
const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()import WestCoastCharts from 'west-coast-charts'
const options = {
chart: {
height: 380,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "scatter",
toolbar: {
show: false
}
},
series: [
{
name: "iOS",
data: [
[3.79, 38.7],
[2.16, 20.4],
[4.88, 43.9],
[2.15, 24.1],
[4.07, 41.2],
[5.06, 38.6],
[2.95, 32.4],
[4.09, 42],
[0.79, 0.6],
[0.93, 9.7],
[2.1, 16.6],
[3.12, 18.7],
[0.85, 24.1],
[2.13, 12.5],
[5.19, 32.5],
[2.9, 19.9],
[0.94, 0],
[1.86, 13.7],
[1.92, 17.6],
[2.18, 13.6],
[4.07, 36.1],
[4.91, 39.6],
[3.85, 37.8],
[1.13, 6.6],
[0.89, 10.5],
[3.93, 36.2],
[2.05, 20.2],
[0.84, 17.5],
[1.86, 21.3],
[2, 15],
[2.79, 23.1],
[2.18, 21.8],
[2.79, 37.1],
[5.07, 44.7],
[4.1, 42],
[1.95, 15.1],
[1.07, 2.8],
[5.12, 58.8],
[5.17, 36.5],
[3.91, 21],
[2.24, 9.2],
[4.79, 55.6],
[2.05, 6],
[2.17, 8.8],
[2.88, 15.2],
[1.05, 11.4],
[1.79, 17],
[0.85, 10.8],
[5.02, 37.1],
[2.04, 19.9],
[2.78, 21.8],
[5.08, 55.6],
[1.91, 28.9],
[1.16, 8.4],
[5.16, 45.3],
[0.9, 13.1],
[2.17, 11.6],
[0.96, 19.3],
[3.1, 32.9],
[1.25, 4.2],
[0.91, 2.7],
[1.02, 20.2],
[1.77, 8.6],
[5.02, 52.8],
[1.9, 28],
[4.24, 30.8],
[2.17, 13],
[3.96, 35.1],
[1.25, 2.9],
[3.12, 26.4],
[2.11, 23.3],
[4.07, 28.8],
[2.1, 21.6],
[4.79, 32],
[5.2, 45.1],
[1.82, 17.5],
[3.76, 35.6],
[4.82, 51.3],
[4.2, 36.1],
[3.21, 35.6],
[2.77, 30],
[3.87, 34.9],
[3.1, 32.9],
[4.91, 48.7],
[1.93, 18.4],
[4.07, 28.5],
[5.19, 40.8],
[2.83, 25.2],
[4.94, 54.6],
[1.07, 5.4],
[5.02, 42.7],
[3.15, 26.4],
[3.19, 34.4],
[1.83, 26],
[1.82, 6.6],
[0.78, 18.1],
[2.99, 15.9],
[1.93, 3],
[4.1, 47.8],
[4.94, 56.3],
[3.92, 38.1],
[1.19, 10.7],
[4.1, 29.4],
[2.87, 6.5],
[1.13, 14.5],
[2.07, 15],
[2.11, 17.1],
[1.17, 26.1],
[1.92, 9],
[1.17, 0],
[4.75, 46.8],
[3.78, 29.5],
[2.13, 21.8],
[4.75, 46.6],
[4.22, 44.4],
[1.18, 0.1],
[0.99, 8.1],
[3.1, 33.8],
[1.88, 21.2],
[4.75, 40.2]
]
},
{
name: "Android",
data: [
[3.05, 30.4],
[0.85, 21.3],
[2.17, 6.9],
[2.98, 19],
[1.16, 0],
[0.96, 9.8],
[2.85, 33.9],
[4.85, 48.8],
[5.18, 47.4],
[1.24, 0],
[5.23, 56.9],
[4.16, 26.4],
[0.81, 12.5],
[5.04, 54.3],
[4.02, 45.7],
[2.21, 16.7],
[3.13, 22.8],
[4.87, 50.3],
[4.08, 54.5],
[3.92, 38.9],
[3.95, 41.9],
[3.92, 43.9],
[0.9, 9.4],
[1.24, 9],
[3.03, 28.3],
[4.15, 51.7],
[3.77, 58.8],
[4.9, 51.3],
[3.94, 34.1],
[2.04, 27.3],
[1.87, 34.6],
[0.99, 0],
[4.21, 42.1],
[3.97, 47.7],
[0.95, 19],
[5.09, 55.2],
[1.06, 0],
[1.78, 13],
[0.78, 26.6],
[2.75, 19.7],
[3.08, 46.1],
[4.85, 49.8],
[0.77, 12.3],
[4.93, 42.6],
[3.84, 52.4],
[1.87, 27.9],
[3.24, 35.1],
[4.86, 46.2],
[5.24, 44.5],
[2.75, 16.3],
[4.22, 44.9],
[2.85, 47.6],
[1.2, 19.8],
[4.88, 61.4],
[1.13, 6.5],
[4.09, 38.8],
[2.88, 34.5],
[4.08, 61.6],
[1.9, 27.4],
[4.14, 49.1],
[5.09, 46],
[0.77, 14.1],
[4.89, 65.5],
[4.79, 41.4],
[5.22, 54.8],
[5.15, 61.3],
[0.99, 20.3],
[3.23, 26.1],
[3.78, 47.6],
[2.79, 43.6],
[4.16, 42.2],
[3.98, 33.2],
[2.96, 37.6],
[0.79, 4.5],
[1.88, 23],
[2.24, 18.9],
[3.12, 31.4],
[1.14, 9.8],
[1.94, 24.1],
[0.93, 8.5],
[3.03, 30.1],
[3.84, 40.9],
[4.95, 50.3],
[4.22, 50.5],
[0.79, 22],
[2.19, 35.9],
[5.04, 49.4],
[5.03, 48],
[5.07, 51],
[2.18, 21.2],
[5.13, 40.6],
[3.81, 26.6],
[2.17, 22],
[2.94, 17.6],
[1.03, 17.5],
[5.22, 58.3],
[3.14, 26.9],
[4.02, 46],
[0.77, 7.2],
[5.16, 44.1],
[0.98, 21],
[0.81, 20.5],
[2.77, 32],
[4.18, 50.2],
[2.07, 25],
[3.18, 29.9],
[3.24, 30.3],
[1.07, 24.4],
[1.04, 13.9],
[2.8, 47.4],
[1.23, 11.4],
[2.79, 43.4],
[1.97, 19],
[5.22, 49.6],
[0.83, 22.7],
[3.06, 29.1],
[1.82, 22.6],
[2.9, 35.6],
[4.9, 50.5],
[2.92, 31.1]
]
}
],
xaxis: {
min: 0.5,
max: 5.5,
tickAmount: 5,
labels: {
formatter: (v) => (Math.abs(v - Math.round(v)) < 0.01 ? Math.round(v) + '★' : '')
}
},
yaxis: {
title: {
text: "Minutes per day"
}
},
markers: {
size: 4,
fillOpacity: 0.6,
strokeWidth: 0
},
title: {
text: "Usage by star rating (jittered)"
},
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 scatter-scatter-with-jitter.json --out scatter-scatter-with-jitter.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/scatter/scatter-with-jitter/index.md …