html`<div style="display: flex; gap: 20px; align-items: flex-start">
<div style="flex: 2">
${Plot.plot({
width: (width * 0.65),
height: 400,
marginTop: 20,
marginBottom: 35,
marginLeft: 20,
marginRight: 20,
x: {
domain: [...new Set(top10PerYearData.map(d => d.year))].sort((a, b) => a - b),
tickFormat: d => d.toString()
},
y: {
axis: null,
domain: [10.5, 0.5]
},
color: {
domain: d3.groupSort(
top10PerYearData,
v => d3.sum(v, d => d.parsed),
d => d["Country, Region"]
).reverse()
},
marks: [
bumpMarks(top10PerYearData, {
x: "year",
z: "Country, Region",
order: "parsed",
reverse: true
}),
Plot.text(top10PerYearData, {
x: "year",
y: "rank",
text: "Country, Region",
dx: 6,
dy: "0.35em",
textAnchor: "start",
fontSize: 10
})
]
})}
</div>
<div style="flex: 1">
${Plot.plot({
width: (width * 0.35),
height: 400,
marginLeft: 70,
marginRight: 40,
x: {
label: "← Migrants",
grid: true,
tickFormat: ","
},
y: {
label: null,
domain: filteredBarsSorted.map(d => d.country)
},
color: { legend: false },
marks: [
Plot.barX(filteredBarsSorted, {
y: "country",
x: "value",
fill: "steelblue",
title: d => `${d.country}: ${d.value.toLocaleString()}`
}),
Plot.text(filteredBarsSorted, {
y: "country",
x: d => d.value,
dx: 5,
text: d => d.value.toLocaleString(),
textAnchor: "start",
fontSize: 12,
fill: "black"
}),
Plot.ruleX([0])
]
})}
</div>
</div>`