File size: 1,686 Bytes
f18ff7d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import * as Plot from "npm:@observablehq/plot";
export function languageChart(
languageData,
{ width, height, scoreKey, scoreName } = {}
) {
// Format captions
const formatScore = (score) =>
score > 0 ? score.toFixed(2) : "No benchmark available!";
const formatTitle = (d) =>
d.language_name +
"\n" +
parseInt(d.speakers / 1_000_00) / 10 +
"M speakers\n" +
scoreName +
": " +
formatScore(d[scoreKey]);
return Plot.plot({
width: width,
height: height,
marginBottom: 100,
x: { label: "Number of speakers", axis: null },
y: { label: `${scoreName} (average across models)` },
// color: { scheme: "BrBG" },
marks: [
Plot.rectY(
languageData,
Plot.stackX({
x: "speakers",
order: scoreKey,
reverse: true,
y2: scoreKey, // y2 to avoid stacking by y
title: formatTitle,
tip: true,
fill: (d) => (d[scoreKey] > 0 ? "black" : "pink"),
})
),
Plot.rectY(
languageData,
Plot.pointerX(
Plot.stackX({
x: "speakers",
order: scoreKey,
reverse: true,
y2: scoreKey, // y2 to avoid stacking by y
fill: "grey",
})
)
),
Plot.text(
languageData,
Plot.stackX({
x: "speakers",
y2: scoreKey,
order: scoreKey,
reverse: true,
text: "language_name",
frameAnchor: "bottom",
textAnchor: "end",
dy: 10,
rotate: 270,
opacity: (d) => (d.speakers > 50_000_000 ? 1 : 0),
})
),
],
});
}
|