Game scores, sized
Matches per game mode, x = score, bubble = players.
Why it matters via unit scatter layout: swarm lanes on a value axis with area-scaled bubbles (z); beeswarm itself has fixed dot size
Open the chart without page chrome ↗
const options = {
chart: {
height: 400,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "unit",
toolbar: {
show: false
}
},
series: [
{
name: "Solo",
data: [
{
x: 1215,
z: 4
},
{
x: 1019,
z: 3
},
{
x: 878,
z: 1
},
{
x: 1229,
z: 2
},
{
x: 1499,
z: 1
},
{
x: 1488,
z: 1
},
{
x: 1297,
z: 3
},
{
x: 853,
z: 2
},
{
x: 1118,
z: 1
},
{
x: 1040,
z: 2
},
{
x: 1246,
z: 4
},
{
x: 1320,
z: 2
},
{
x: 1459,
z: 3
},
{
x: 1336,
z: 4
},
{
x: 1429,
z: 3
},
{
x: 1481,
z: 2
},
{
x: 1156,
z: 3
},
{
x: 1294,
z: 3
},
{
x: 1421,
z: 2
},
{
x: 1243,
z: 3
},
{
x: 1076,
z: 3
},
{
x: 952,
z: 2
},
{
x: 983,
z: 4
},
{
x: 1220,
z: 4
},
{
x: 1384,
z: 1
},
{
x: 1371,
z: 4
},
{
x: 1067,
z: 1
},
{
x: 1338,
z: 2
},
{
x: 1241,
z: 4
},
{
x: 1060,
z: 2
},
{
x: 1403,
z: 2
},
{
x: 1681,
z: 1
},
{
x: 1300,
z: 3
},
{
x: 983,
z: 1
},
{
x: 1640,
z: 2
},
{
x: 1170,
z: 4
},
{
x: 1525,
z: 4
},
{
x: 1087,
z: 3
},
{
x: 818,
z: 2
},
{
x: 972,
z: 1
},
{
x: 1467,
z: 2
},
{
x: 1542,
z: 2
},
{
x: 1580,
z: 3
},
{
x: 1222,
z: 2
},
{
x: 1436,
z: 2
}
]
},
{
name: "Duo",
data: [
{
x: 1193,
z: 8
},
{
x: 1285,
z: 2
},
{
x: 1688,
z: 4
},
{
x: 1515,
z: 6
},
{
x: 1756,
z: 4
},
{
x: 1911,
z: 8
},
{
x: 1626,
z: 4
},
{
x: 1821,
z: 8
},
{
x: 1392,
z: 2
},
{
x: 1211,
z: 4
},
{
x: 1766,
z: 2
},
{
x: 1348,
z: 2
},
{
x: 1361,
z: 6
},
{
x: 1402,
z: 6
},
{
x: 1251,
z: 4
},
{
x: 1083,
z: 6
},
{
x: 1457,
z: 8
},
{
x: 1343,
z: 8
},
{
x: 1256,
z: 2
},
{
x: 1612,
z: 6
},
{
x: 1588,
z: 8
},
{
x: 1527,
z: 2
},
{
x: 1418,
z: 6
},
{
x: 1583,
z: 2
},
{
x: 1643,
z: 4
},
{
x: 1711,
z: 8
},
{
x: 870,
z: 6
},
{
x: 1496,
z: 2
},
{
x: 1089,
z: 2
},
{
x: 1421,
z: 6
},
{
x: 1716,
z: 6
},
{
x: 1447,
z: 6
},
{
x: 1797,
z: 6
},
{
x: 1536,
z: 6
},
{
x: 1503,
z: 8
},
{
x: 1391,
z: 6
},
{
x: 1618,
z: 8
},
{
x: 1843,
z: 8
},
{
x: 1199,
z: 8
},
{
x: 1709,
z: 2
},
{
x: 1623,
z: 8
},
{
x: 1734,
z: 6
},
{
x: 1586,
z: 2
},
{
x: 1706,
z: 2
},
{
x: 1640,
z: 8
}
]
},
{
name: "Squad",
data: [
{
x: 1877,
z: 3
},
{
x: 2030,
z: 9
},
{
x: 2243,
z: 9
},
{
x: 1834,
z: 3
},
{
x: 1980,
z: 9
},
{
x: 1610,
z: 6
},
{
x: 1599,
z: 9
},
{
x: 1581,
z: 12
},
{
x: 1826,
z: 12
},
{
x: 2150,
z: 9
},
{
x: 1896,
z: 3
},
{
x: 1911,
z: 3
},
{
x: 1755,
z: 9
},
{
x: 1814,
z: 6
},
{
x: 2109,
z: 12
},
{
x: 2055,
z: 12
},
{
x: 1841,
z: 12
},
{
x: 2285,
z: 3
},
{
x: 2136,
z: 6
},
{
x: 1515,
z: 12
},
{
x: 1953,
z: 6
},
{
x: 1408,
z: 3
},
{
x: 2247,
z: 3
},
{
x: 1699,
z: 6
},
{
x: 1952,
z: 6
},
{
x: 1900,
z: 12
},
{
x: 1841,
z: 9
},
{
x: 1388,
z: 9
},
{
x: 1710,
z: 6
},
{
x: 1674,
z: 3
},
{
x: 2321,
z: 12
},
{
x: 1905,
z: 9
},
{
x: 1762,
z: 6
},
{
x: 1736,
z: 6
},
{
x: 1502,
z: 12
},
{
x: 1738,
z: 3
},
{
x: 2169,
z: 6
},
{
x: 2026,
z: 3
},
{
x: 1788,
z: 3
},
{
x: 1872,
z: 12
},
{
x: 2004,
z: 12
},
{
x: 2026,
z: 12
},
{
x: 1782,
z: 9
},
{
x: 1911,
z: 9
},
{
x: 1816,
z: 3
}
]
}
],
plotOptions: {
unit: {
layout: "scatter",
scatter: {
y: "lanes",
spread: "swarm",
xTitle: "Score"
}
}
},
title: {
text: "Match scores by mode"
},
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: 400,
fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
type: "unit",
toolbar: {
show: false
}
},
series: [
{
name: "Solo",
data: [
{
x: 1215,
z: 4
},
{
x: 1019,
z: 3
},
{
x: 878,
z: 1
},
{
x: 1229,
z: 2
},
{
x: 1499,
z: 1
},
{
x: 1488,
z: 1
},
{
x: 1297,
z: 3
},
{
x: 853,
z: 2
},
{
x: 1118,
z: 1
},
{
x: 1040,
z: 2
},
{
x: 1246,
z: 4
},
{
x: 1320,
z: 2
},
{
x: 1459,
z: 3
},
{
x: 1336,
z: 4
},
{
x: 1429,
z: 3
},
{
x: 1481,
z: 2
},
{
x: 1156,
z: 3
},
{
x: 1294,
z: 3
},
{
x: 1421,
z: 2
},
{
x: 1243,
z: 3
},
{
x: 1076,
z: 3
},
{
x: 952,
z: 2
},
{
x: 983,
z: 4
},
{
x: 1220,
z: 4
},
{
x: 1384,
z: 1
},
{
x: 1371,
z: 4
},
{
x: 1067,
z: 1
},
{
x: 1338,
z: 2
},
{
x: 1241,
z: 4
},
{
x: 1060,
z: 2
},
{
x: 1403,
z: 2
},
{
x: 1681,
z: 1
},
{
x: 1300,
z: 3
},
{
x: 983,
z: 1
},
{
x: 1640,
z: 2
},
{
x: 1170,
z: 4
},
{
x: 1525,
z: 4
},
{
x: 1087,
z: 3
},
{
x: 818,
z: 2
},
{
x: 972,
z: 1
},
{
x: 1467,
z: 2
},
{
x: 1542,
z: 2
},
{
x: 1580,
z: 3
},
{
x: 1222,
z: 2
},
{
x: 1436,
z: 2
}
]
},
{
name: "Duo",
data: [
{
x: 1193,
z: 8
},
{
x: 1285,
z: 2
},
{
x: 1688,
z: 4
},
{
x: 1515,
z: 6
},
{
x: 1756,
z: 4
},
{
x: 1911,
z: 8
},
{
x: 1626,
z: 4
},
{
x: 1821,
z: 8
},
{
x: 1392,
z: 2
},
{
x: 1211,
z: 4
},
{
x: 1766,
z: 2
},
{
x: 1348,
z: 2
},
{
x: 1361,
z: 6
},
{
x: 1402,
z: 6
},
{
x: 1251,
z: 4
},
{
x: 1083,
z: 6
},
{
x: 1457,
z: 8
},
{
x: 1343,
z: 8
},
{
x: 1256,
z: 2
},
{
x: 1612,
z: 6
},
{
x: 1588,
z: 8
},
{
x: 1527,
z: 2
},
{
x: 1418,
z: 6
},
{
x: 1583,
z: 2
},
{
x: 1643,
z: 4
},
{
x: 1711,
z: 8
},
{
x: 870,
z: 6
},
{
x: 1496,
z: 2
},
{
x: 1089,
z: 2
},
{
x: 1421,
z: 6
},
{
x: 1716,
z: 6
},
{
x: 1447,
z: 6
},
{
x: 1797,
z: 6
},
{
x: 1536,
z: 6
},
{
x: 1503,
z: 8
},
{
x: 1391,
z: 6
},
{
x: 1618,
z: 8
},
{
x: 1843,
z: 8
},
{
x: 1199,
z: 8
},
{
x: 1709,
z: 2
},
{
x: 1623,
z: 8
},
{
x: 1734,
z: 6
},
{
x: 1586,
z: 2
},
{
x: 1706,
z: 2
},
{
x: 1640,
z: 8
}
]
},
{
name: "Squad",
data: [
{
x: 1877,
z: 3
},
{
x: 2030,
z: 9
},
{
x: 2243,
z: 9
},
{
x: 1834,
z: 3
},
{
x: 1980,
z: 9
},
{
x: 1610,
z: 6
},
{
x: 1599,
z: 9
},
{
x: 1581,
z: 12
},
{
x: 1826,
z: 12
},
{
x: 2150,
z: 9
},
{
x: 1896,
z: 3
},
{
x: 1911,
z: 3
},
{
x: 1755,
z: 9
},
{
x: 1814,
z: 6
},
{
x: 2109,
z: 12
},
{
x: 2055,
z: 12
},
{
x: 1841,
z: 12
},
{
x: 2285,
z: 3
},
{
x: 2136,
z: 6
},
{
x: 1515,
z: 12
},
{
x: 1953,
z: 6
},
{
x: 1408,
z: 3
},
{
x: 2247,
z: 3
},
{
x: 1699,
z: 6
},
{
x: 1952,
z: 6
},
{
x: 1900,
z: 12
},
{
x: 1841,
z: 9
},
{
x: 1388,
z: 9
},
{
x: 1710,
z: 6
},
{
x: 1674,
z: 3
},
{
x: 2321,
z: 12
},
{
x: 1905,
z: 9
},
{
x: 1762,
z: 6
},
{
x: 1736,
z: 6
},
{
x: 1502,
z: 12
},
{
x: 1738,
z: 3
},
{
x: 2169,
z: 6
},
{
x: 2026,
z: 3
},
{
x: 1788,
z: 3
},
{
x: 1872,
z: 12
},
{
x: 2004,
z: 12
},
{
x: 2026,
z: 12
},
{
x: 1782,
z: 9
},
{
x: 1911,
z: 9
},
{
x: 1816,
z: 3
}
]
}
],
plotOptions: {
unit: {
layout: "scatter",
scatter: {
y: "lanes",
spread: "swarm",
xTitle: "Score"
}
}
},
title: {
text: "Match scores by mode"
},
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 beeswarm-game-scores-bubble.json --out beeswarm-game-scores-bubble.svg --with-tablePublic 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/beeswarm/game-scores-bubble/index.md …