File size: 2,942 Bytes
544091e 50128d8 544091e 1983d1c 544091e 50128d8 544091e 50128d8 544091e 50128d8 544091e 50128d8 544091e 1983d1c 544091e 1983d1c 544091e |
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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<!DOCTYPE html>
<html>
<head>
<title>Language Bench</title>
<style>
body {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
font-family: sans-serif;
}
.language-header {
margin-bottom: 10px;
}
.speaker-count {
font-size: 0.8em;
color: #666;
font-weight: normal;
margin: 0;
}
</style>
</head>
<body>
<h1>Language Bench</h1>
<div id="charts"></div>
<script type="module">
// Import Plot using ESM
import * as Plot from "https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm";
async function init() {
const response = await fetch('results.json');
const results = await response.json();
// Get unique languages with their speaker counts
const languageMap = new Map();
results.forEach(r => {
if (!languageMap.has(r.target_language_name)) {
languageMap.set(r.target_language_name, r.speakers);
}
});
// Sort languages by speaker count (descending)
const languages = [...languageMap.entries()]
.sort((a, b) => b[1] - a[1])
.map(([lang]) => lang);
const chartsDiv = document.getElementById('charts');
languages.forEach(language => {
const headerDiv = document.createElement('div');
headerDiv.className = 'language-header';
const h2 = document.createElement('h2');
h2.textContent = language;
h2.style.marginBottom = '5px';
const speakerP = document.createElement('p');
speakerP.className = 'speaker-count';
const speakerCount = (languageMap.get(language) / 1_000_000).toFixed(1);
speakerP.textContent = `${speakerCount}M speakers`;
headerDiv.appendChild(h2);
headerDiv.appendChild(speakerP);
chartsDiv.appendChild(headerDiv);
const languageData = results.filter(r => r.target_language_name === language);
// Create plot using the more idiomatic Observable Plot approach
const plot = Plot.plot({
width: 400,
height: 200,
margin: 30,
y: {
domain: [0, 100],
label: "BLEU"
},
marks: [
Plot.barY(languageData, {
x: d => d.model.split('/')[0],
y: "bleu"
})
]
});
chartsDiv.appendChild(plot);
});
}
init();
</script>
</body>
</html> |