chart = html`${countries.map((country, i) => {
const [cx, cy] = d3.geoCentroid(country);
const projection = d3.geoAzimuthalEqualArea().rotate([-cx, -cy]).scale(width / 2.5);
const path = d3.geoPath(projection);
const [[x0, y0], [x1, y1]] = path.bounds(country);
return html`<svg class="country" width="${x1 - x0}" height="${y1 - y0}" viewBox="${x0} ${y0} ${x1 - x0} ${y1 - y0}" fill="currentColor"><path d="${path(country)}"></path><title>${country.properties.name}
${(+(country.properties.area * 6371 * 6371).toPrecision(3)).toLocaleString("en")} km²
Rank ${(i + 1)}</title></svg>`;
})}<style>
.country { vertical-align: middle; padding: 4px; border: solid 1px transparent; }
.country:hover { fill: red; border-color: #ccc; }
</style>`