Choropleth Data Map in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<div><span class="lbl">World choropleth with a legend, top five and a table view</span>
<section class="cm" data-choropleth aria-labelledby="cm-world-title">
  <div class="cm-head">
    <div><h2 id="cm-world-title">Trailhead users per 100,000 people</h2><p>Monthly active users of the Trailhead hiking app, September 2026. Sample data.</p></div>
    <div class="cm-switch" role="group" aria-label="View as"><button type="button" data-show="map" aria-pressed="true">Map</button><button type="button" data-show="table" aria-pressed="false">Table</button></div>
  </div>
  <div class="cm-body" data-view="map">
    <figure>
      <div class="cm-frame" data-map-frame>
    <svg viewBox="0 0 1000 433" role="img" aria-label="World map shaded by active users per 100,000 people. Norway is highest at 412, Egypt lowest at 18. All figures are in the table view.">
      <path class="cm-none" d="M988 309l1 0-1 2-3 0 2-2zM994 304l0 2-4 1 0-1zM594 256l11 7 0 1 4 4-2 4 2 3-1 5 3 6-8 4-8 0-2-7-2-1-6-3-3-5-1-7 4-4 0-3 1-2-2-2zM477 164l0 5-9 0 0 8-3 1 0 6-11 0 0 1 0-1 6-1 2-7 4-3 3-7 7-1zM643 119l-3-11 6-2 10 6 7 0 4 2 1 3 1 0 1 3 3 0 1 2 6-6-1 3 7 2-2 2-2 0-2-1 0-1-3 0-1 4-2 0-1 1 3 1 1 3-1 3-4-1 0-2-7-3-5-3-2-4-4 0-2-3-4-2-3 3 0 1zM892 261l9 4 4 5 4 2 1 2-3 0 1 2 4 6 1 0 0 1 4 3-2 1-6-2-5-6-3-2-4 2 0 3-2 1-5-1zM924 264l1 3-1 1-1-3-5-4 1 0zM920 271l-5 2-4-2 1-1 4 0 1-1 0 1 1 0 3-2 0-2 1 0 1 2zM929 270l3 5-2-1zM581 267l1 7 3 5-5 1-1 2-1 9 4 1 0 3-2 0-5-5-4 1-5-3-5 0-1-12-4-1-2 1-1 2-5 1-3-7-11 0 0-1 2-3 3-1 1 2 4-5 2-6 3-4 2-13 0-2 3-2 8 3 1-2 5-2 8 0 2 3 4-1 4 3-1 4 2 1-4 5-1 6-1 5zM616 258l-2-3 0-11 2-4 5-3 4 0 7-10 3-5 0-6 6-2 0 4-4 13-8 13-9 8zM568 226l-3-2 0-4-2-3-2-5-1 0 3-10 3 0-1-12 0-2 3 0 0-6 32 0 2 11 3 2-4 3-1 8-1 6-4 7-1 6-2-11-2-1-1 1 0 3-2 4-4-1-3 2-6 0-3-3-2 1-1 4-2 1zM565 190l1 12-3 0-3 10 1 0 2 5-3 2-2 3-6 2-2 3-8 2-1-5-2-2 0-2 4 1-3-10 0-1-2 0-1-4 1-4 4-3 1-12-2-3-1-5 3-2zM304 189l0 6-8-1 1-1 5 0-1-3-1-1zM304 195l0-6 5 0 4 4-1 1-5-1-2 3zM288 166l3 1-3 1zM291 166l2 1-1 2zM289 171l2 3-1 2-2-2zM353 419l5-2 3 1-4 2-1-1-2 1zM415 3l16-2 21 0 10 1-19 2 15 0 2 0-3 2 14-2 6 1-15 3 5 0-5 3 0 3 2 1-6 1 3 2 0 2-2 0 2 2-4 0 2 1-1 1-6 1 2 3-5-1 5 3 1 2-4 0-4-2 1 1-3 2 8 0-12 5-9 1-6 4-13 3-4 6-4 2 0 2-4 5-3 1-3-3-4 0-5-8 0-4-2-3 1-2-1-1 4-3 3-1 3-3-7 1-2 0 2-4 6 1-4-3-4 0 3-2-2-6-3-1 1-1-5-1-14 0-4-3 9-1-11-1 17-3 1-1-5-1 13-3 0-1 24-1 9 2-3-1zM846 281l7-1-7 3zM577 346l1 1-1 3-3 1-2-2 3-3zM347 350l2 0 9 6 2 2-1 2 1 2-4 3-7-1-2-2zM286 225l0 2-2 2 0-3-3-2-4 2 1 2-1 1-1 0-2-2-4-1 1-4 1 0 3 2 6-2zM272 222l-1 0-1 4-5-6 0 2-2-1 0-4 6 1zM269 218l-6-1-5-6 1 0 8-6 4-1zM271 204l-4 1-8 6-1-1 0-2-4-2 4-4 9-1zM254 206l4 2 0 2-2 0-4-1zM246 206l2-5 4 0-3-4 2 0 0-2 5 0 0 7 2 0-4 4-2 3zM256 195l3-2-1 6-2 3zM332 236l-1 2-6 3-5-1 1 0 1 5 2 1-6 4-2 0-2-1-2-5 1-2-1-4 1-5-5 0-2-3-5 0-2-7-2 0 2-4 4-4-2 1 1 8 2-3-1-4 3-1 1-2 5 5 5-1 4 2 1-2 7 0-2 1 0 2 3 0 2 2 0 2 3 1-3 2 1 2-3 1 0 3zM343 247l-2-1-4 3-3-2-1-3 2-4-1-3-2-1-2-2 0-3 3-1-1-2 3-2 7 7-3 7zM349 245l-4 0-1 2-1 0-4-7 3-7 8 1-1 3 1 4zM319 193l2 1-1 1-4 0 1-2zM288 193l3 2-4 0-1-1zM277 178l11 2 6 6 4 1-10 2 2-2-3-1-1-3-8-2-1 0 1-1-9 2zM585 324l-5 0-4-2 0-3-5-4-2-5 5 0 5-6 4-1 0 1 3 0 4 2-1 12zM580 324l-7 5-4 6-4 0-2-1-5 5-2 0-2-7 0-9 3 0 0-12 6-1 1 2 5-2 2 5 5 4 0 3zM554 332l-1 12-4 2-3-1-1-2-1 2-3-5-2-16-7-16 5-1 2 2 11-1 2 2 6 0 6-1 2-1 3 2-5 2-1-2-6 1 0 12-3 0zM454 209l-2-4 3-4 5-2 7 7 1 7-6-1-8 1 0-3 8-1-4-1zM468 213l-1-7 1-3 17 0-2-31 4 0 22 17 0 2 3 0 0 7-2 5-9 2-4 0-6 4-2 0-3 6-1 4-7 1-3-7-3 2-4-1zM454 185l0-1 11 0 0-6 3-1 0-8 9 0 0-5 10 8-4 0 2 31-17 0-1 3-7-7-5 2 1-13zM507 233l-2 0 0-10-3-6 4-3 2-1 2 2 0 5-2 5zM540 179l1 5 2 3-1 12-4 3-1 4 1 4 2 0 0 1-1 2-3-4-2 2-4-1-5 1-4-1-2 1-4-3-4 1-1 6-2-2-2 1 0-2-3-1-2-6 9-2 2-5 0-7 3-1 17-13 6 3zM507 233l1-8 2-5 0-5 1-6 4-1 4 3 2-1 4 1 5-1 4 1 2-2 3 4 1 2-2 3-5 12-2 1-3-1-2 2-2 5-8 2-4-6zM540 211l3 10-4-1 0 2 2 2 1 5-2 4 0 4 4 8 0 2-8-2-5 0-4 0 0-2-3-6 2-5 2-2 3 1 2-1 5-12 2-3-1-2zM502 217l3 6 0 10-2 1-3-17zM500 217l3 17-8 4-3-1-1-4 2-7-1-4 0-5zM478 220l7-1 3 3 4 0 1 4-2 7 1 4-5-1-8 3 0-5-3-2 1-4 1-3-1-4zM462 212l6 1 0 1 4 1 3-2 3 7-1 1 1 4-1 3-3 1-1-4-1 1-3-6-3 1-3 3-5-7 4-2zM454 213l8-1 0 3-4 2zM477 228l-1 4 3 2 0 5-4-2-7-6 4-5 1-1 1 4zM463 224l3-3 3-1 3 6-4 5-4-3zM485 219l1-4 3-6 2 0 6-4 4 0 2 6 3 1 0 2-4 3-2 0-8 0 0 5-4 0zM576 236l-8 0-5 2-1 2-8-3-3 2 0 2-3 0-4 4-4-8 0-4 2-4 8-2 2-3 6-2 2-3 3-2 2 3 0 4 3 2zM551 241l-2 13-3 4-2 6-4 5-1-2-3 1-1-1-2 2-2-4 2-1-1-2 3-2 0-1 4 2 1-2 0-5-2-1 2-4-3-1-1-3 8 2 0-2 4-4zM531 245l5 0 1 3 3 1-2 4 2 1 0 5-1 2-4-2 0 1-3 2 1 2-2 1-7-9 2-7 5 0zM527 245l4 0 0 4-5 0zM585 279l6 3 2 5-3 10 1 1-8 2 0 3-4 1-5 6-5 0-3-2-2 1-4-5 0-10 6 0 0-6 5 3 4-1 5 5 2 0 0-3-4-1 1-9 1-2zM591 282l2 1 2 7 0 6 3 4 0 4-2 3-2-2 1-5-4-2-1-1 3-10zM595 290l8 0 8-4 1 14-1 2-3 4-6 3-7 7 1 13-1 3-7 4 0 3-2 0 0-3 0-5-1-7 4-6 1-12-4-2-3 0 0-1 0-3 8-2 4 2-1 5 2 2 2-3 0-4-3-4zM586 339l-2 2-2-2 2-3 2 0zM536 268l-2 3-1-2 2-2zM534 272l11 0 3 7 5-1 1-2 2-1 4 1 1 12 5 0 0 6-6 0 0 10 4 5-6 1-6 0-2-2-11 1-2-2-5 1 1-9 5-10zM585 260l0 3-4 4 0-5zM594 147l0 1-1 0-1 2 0 2 2-1-1 7-2-6 1-6 2-1zM594 145l-2 1 2-5 2 1zM637 293l1 10 0 1-1-2-1 1 0 4-9 26-5 2-3-2-2-7 1-5 3-6-1-6 2-4 5-2 4-3 1-3 1 0 3-6zM594 151l-2 1 0-2 1-2 1 0zM454 209l4-1 4 1-8 1zM525 155l-1-6-4-4 2-11 3-2 1 1 0 1 3-1-1 2 0 5-1 2 3 4 0 2-4 4 0 2zM477 164l0-4 9-4 4-3 0-2 7-2-3-10 10-4 18-1-2 11 4 4 1 6 1 4-1 10 3 5 1 0 3 3-17 13-3 1-3 0 0-2-22-17zM594 148l0-1 3 1 5-3 2 4-6 2 3 3-1 2-4 3-3-1 1-7zM639 175l7 0 5-6 0 1 1 2-1 0 0 3-1 5-9-1zM637 173l1-4 1 4zM628 156l1 5-5-2 2-3zM604 149l-2-4 5-3 0-7 3-2 6 0 4 5-1 5 6 5 4 8-1 0-2 0-2 3-5 0-8-7zM650 180l1-5 0-3 1 0 3 4 4 1 3 4-3 6-1 1 0 4-3 1-1 2-2 0-2 3-4 1-4-7 8-4 1-6zM958 303l0-3 1 3zM783 213l-1-3 1-3 7 0 2 1 1-2 2 1 1 6-4 2 1 2-5 2-2-1zM795 207l-2-1-1 2-2-1 0-4-3-3 0-3-3-3-2 0-5 2-1-6-2 0-1-3 2-3 2 1-1-4 1-1 4 6 3 0 2 3-2 2 3 2 8 8zM773 187l-5 2-2 4 5 8-1 3 5 10-2 7-2-11-5-12-4 4-3-1-1-7-3-5-4-3 1-4 1-1-1-6 2 1 1-3 0-6 3-2 2 0 0-3 2-1 2 3 1 5-2 3 1 4 3-1 1 3 2 1-1 2 4 2 2-1 0 2zM831 116l1 1-1-1-1 3 1 2-4 3 1 2 3 2-5 3-4-1 0-4-3-2 3-6 4 1-1-2 3-1 1-2zM714 94l9-4 14 3 1-2-1-2 1-3 9 2 1 2 4 2 8-1 5 3 6 1 5-2 2-2 6 1 0 6 1 1 6-1 6 4-6 0-2 3-5 3-4-1-1 2 3 3-3 2-10 3-2 2-12-4-11 0-5-5-12-3-2-5-9-6zM752 182l-1 4-3-7-3 0 0 3-3 0-2-7-2-1 2-3-3-1 1-3 4 2 0 2 7 1-2 5 1 2 1-2zM745 163l2 3-6 1-3-2 3-4zM703 138l-2 3-7 0-1 1 3 5 3 2-7 14-3-1-3 4 6 8-6 0-2 2-5-5-13 1 0-4 4-2-2-4-6-5 5 1 9-2 1-4 6-2 0-2 2-3-2-2 3 0 1-4-1-3 1-1 8-2 4 4zM672 132l4 1 3 0 4-4 4 5 3-2 4 0 1 1-8 2-1 1 1 3-1 4-3 0 2 2-2 3 0 2-6 2-1 4-9 2-5-1 2-3-5-8 1-8 4 0 1-1 3-1 0-3 2-2zM676 133l1-3-1-3-3-1 1-1 2 0 1-4 3 0 0 1 2 1-4 0 0 2 11 1 2 2 2 1 1 3-4 0-3 2-4-5-4 4zM680 116l2-1 4 1 1-3 13 2 3 1-4 4-3 0 0 2-5 1-2 3-11-1 0-2 4 0 2 0 2-2-7-2zM633 118l4-2 6 3 2 0 0-1 3-3 4 2 2 3 4 0 2 4 5 3 7 3 0 2-2-1-2 2 0 3-3 1-1 1-4 0-1-3-11-5-5 0-3 3-1-6-3-1 1-2-2 0 0-3 3 1 2-1-4-4-2 1 1 2zM629 156l-4-8-6-5 1-5-4-5-3-7 2-1 4 3 1 0 3-3 1 3 2 1 1 2 5 3 4 0 4-1 3-3 5 0 11 5 1 3-1 8 5 8-2 3 6 5 2 4-4 2 0 4-12-2-3-5-4 2-3-1-6-3-5-8-3 0zM594 147l0-2 2-3-2-1 0-4 1-3 8 0 7-1-3 2 0 7-5 3-5 3zM620 128l-1 0-2-3-2 0-3-2-1-3 4 0zM566 73l7 2 0 2 5 5-3 1 1 3-2 0 0 2-13-2-4 1-1-7 5-1 2-3-1-1zM554 97l2 2-4 5-2 0-3 1-6-2-1-1 2-4 2 1 7-3zM565 98l3-1 3 1 3 4 0 1-2 0-2 3 0-4zM562 75l1 1-2 3-5 1-2-1 0-2-4-1-1-2 9-1zM563 69l3 4-4 2-4-2-9 1 1-5 2-1 2 3 2 0 0-3zM564 63l-1 6-7-1 0-1-2-1-1-2zM557 110l1 1 6 1 4-2 4 2-2 3 1 2-5 1 0 1-8 0-1-3 1-3zM554 121l-2 4-2-2-1-5 2-3 1 3zM541 103l6 2 1 2 0 1-8-1-1 1 8 7 0 1-7-4-3-5-1 0-1 1-1-2 4 0 1-2zM515 90l0 2-1 1-8-5 2 0 4-1zM951 321l3 3-3 0-4-7zM948 286l1 1-2 0-1-2zM945 284l-3 0 0-2zM942 278l1 2-5-3zM727 229l-1 3-3 1-2-7 1-5zM829 174l-1 8-3-5 2-6zM469 43l-1 2 2 2-11 5-9-2 2-1-4-1 4-2-5 0 2-2 3-1 3 2 4-1 2 1zM618 118l4 2 1-2 6 5-2 0-1 6-2-1-1-3-3 3-5-8 4 0zM619 128l-4-3 2 0zM601 113l14 3 3 2 1 2-4 0-4 0-5-1-1-4zM833 212l-2-3 4 2 0 2zM839 221l1-3 1 0 0 2 2-3 0 3-3 4zM850 226l1 4-1 3-1-4-2 2 1 4-4-2 0-4-2-2-4 4 0-1 1-3 3-2 1 1 4-2 0-3 2 2zM828 223l-4 3 6-10 1 3zM835 194l1 4-2 3 1 6 6 1 1 4-3-3-1 1-2-2-4 0 1-2-1-1 0 1-3-3 1-10zM837 216l-1-2 4 1 0 2-3 2zM846 214l1 3-2-1 1 3-1 1-2-4 2 0 0-1-2-3zM777 232l3 1 1 1 2-1 4 4 0 7 3 3-2 2-6-5zM827 239l-5 0-4 9-2 1-3-1-6 2-2-4 4 1 0-3 5-1 3-5 1 2 2-1 0-4 5-5 1 3 5 2zM820 235l0 4-2 1-1-2zM534 103l6-1 1 1-2 1-1 2-4 0 1 0zM555 95l-1 2-3-1-7 3-2-1 0-2 4-2zM600 206l1-8 4-3 3 6 11 11-2 0-7-6-4 0-2-1-1 2zM341 318l2 6 6 1 1 5 3 0 0 6 0 2-2 3-8-1 1-6-8-4-6-6 1-8 8-1zM642 192l4 7-2 1-1 3-9 5-12 4-2 0-1-2-2-6 0-4 2-4 9 1 1 1 5-5zM586 139l4-1-1 2zM586 139l3 1-3 1-2-2zM568 182l0 6-3 0 0 2-22-13-3 2-2 1-6-3-3-3-1 0-3-5 1-10-1-4 1-1 0-2 4-4 0-2 10 3 2 3 9 3 2-2-1-3 3-3 5 0 7 4-1 5zM632 227l-7 10-4 0-5 3-3-1-3 3-4-1-6-3-2-3-4-6-3-1 3-3 1-6 4-7 1-6 3 1 1-2 2 1 4 0 7 6-2 5 3 1 0 1 3 4zM617 212l2 0 0 2-1 1 1 1-1 2-3-1zM635 216l0 6-3 5-11-4-3-4 0-1 1-2 3 3zM594 256l-10 0-2 1 1-6 4-5-2-1 1-4 7-1 1-1 3 8-3 5zM584 256l2 2-1 2-4 2 1-5zM547 115l-8-7 1-1 8 1 1 3-1 1zM557 116l1 3-4 2-2-3 3-2zM547 105l3-1 7 6 1 3-1 3-2 0 0-1-2-2-2 2-3-3 1-1-1-3 0-1zM551 115l-2 3-2-2 0-1 1-3zM552 118l-1-3 2-2 2 2 0 1zM330 218l2 0 0 2-3 0zM586 241l-4-3-4 1-2-3-8-10-2-1 2-1 1-4 2-1 3 3 6 0 3-2 4 1 2-4 0-3 1-1 2 1 2 11-3 3 3 1 4 6-4 4-1 1z"/>
      <path class="cm-b4" data-tip="Norway: 412 per 100,000" d="M529 9l3-1 9 3-5 1-3 4-2 0-4-2 1 0-8-5zM565 35l-5 1 1-2-3-1-3 1-3 3-8-1-2 0 0 2-4-1 0 2-2 0-6 9 0 2-2 0-2 3 1 3 1 2 0 3-3 4-1-2-5 4-3 0-3-1-2-10 12-7 8-9 9-6 8-1 3-2 7-1 7 2-2 1zM551 8l-7 2-12-2 11-1zM548 13l-4 1-4 0 1-1-1-1 4 0z"/>
      <path class="cm-b4" data-tip="New Zealand: 388 per 100,000" d="M953 382l-5 4-2 1-1-1 3-3 0-2-2-1 7-7-1-9 1 0 2 2 0 7 1-2 0 3 1 1 5-1zM928 393l14-10-1 3 3-1-1 2-7 5 0 2-5 1-6 6-5 2-6-2 1-1z"/>
      <path class="cm-b4" data-tip="Sweden: 356 per 100,000" d="M525 65l3-4 0-3-1-2-1-3 2-3 2 0 0-2 6-9 2 0 0-2 4 1 0-2 2 0 6 3 2 6-4 0-2 2 1 2-7 5-1 4 4 4-2 3-2 1-2 7-3 0-1 2-3 1z"/>
      <path class="cm-b4" data-tip="Finland: 331 per 100,000" d="M560 36l0 2 4 2-2 2 4 3-1 2 2 3-1 1 4 2-6 7-12 2-4-2-1-6 1-2 7-5-3-2-2-6-6-3 8 1 3-3 3-1 3 1z"/>
      <path class="cm-b4" data-tip="Australia: 322 per 100,000" d="M877 384l1 0-5 8 0-1-3 2-2 0 2-9 3 1zM833 357l-6 2-2 3-10 0-6 4-4 0-3-3 4-6 0-9-1-11 1 1-1-3 2 2-1-6 4-8 0 2 8-6 12-3 4-5 3-6 1 3 1 0 0-2 1-1 1 0 5-7 4-1 3 4 3 0 0-2 4-6 6-1 0-2-2-1 2-1 7 4 4-1 1 1-3 4-3 5 12 9 2-1 3-8 2-8 3-6 2 12 2-1 2 3 0 13 5 4 1 7 3 0-1 3 4 6 0 3-1 6-7 12-12 13-3 5-13 6-2-2 1-2-5 3-7-3 0-6-3-1 2-4-5 2 6-7-7 6-2-1 0-6-6-4z"/>
      <path class="cm-b4" data-tip="Switzerland: 305 per 100,000" d="M524 100l-1 1 3 1 0 1-3 0-1 1-5 1-1-2-1 1 0-2 2-2 1-1z"/>
      <path class="cm-b3" data-tip="Canada: 284 per 100,000" d="M199 95l-4-4-4-2 2-4-2-2 1-6 3-3-2-2 0-6-2-4-6 3-1-3-4-1 24-27 8 3 17-4 0 1 4-2 3 3 4-2-1 2 7-1 11 2 1 2-4 1 4 1 8-1 1 2 3-2-1-1 2-1 5 0 2 2 5 1 7 0 3-3 3 1-2 3 7-5-3-3 6-5 4 2 1 3-3 1 4 1-2 3 4-2 2 1-2 2 1 2 6-4 2-3 6 0 2 2-3 3-1 2-5 2-5 0-6 5-10 3-1 2-3 1-8 5-4 6 3 0 0 5 3 0 11 6 6 0-2 6 0 3 3 3 5-4 0-5-1-1 10-6 1-5-2-2 4-3 2-7 9 0 4 3 4 1-2 6 3 2 9-6 4 10-1 2 8 5 1 2 2 2-1 3-12 6-15 0-7 4-8 7 7-5 10-3 2 2-3 2 0 6 3 1 4 0 3-4 0 3 1 1-16 7-2 0 1-3 5-2-7 0-1-2 1-4-3-1-8 8-8 0-7 4-4 0-2 1 0 2-10 3-1-1 4-5 1-5-4-5-7-5-8 1-6-2-1-2-1 1zM313 55l5-2-4 2zM338 26l-2-1 2-1 7 1zM320 56l3-1-2 2zM314 20l-2 1-5 0 5-2zM315 11l2 1-1 1-5 0 1-2zM323 22l-7-1 1-3-7-2 2-1 9 1 1 1-1 1 3 1 13-1 4 2-5 2zM286 13l2 0-1 1-6 0zM288 11l2 1-6 0zM366 88l-4 5 1-1 2 0-1 1 5 1-1 3 2-1 0 4-2 2-2 0 0-3-3 3-2 0 2-2-2-1-7 0 1-2 6-7 4-3 1 0zM317 47l6 4-2 1-4-2-7 3 0-2-3 0 6-6zM339 27l2-1 6 3 0 1 4-1 1 2 5 1 2 4-5 1 8 2 2 3 3 0-7 5-4-4-3 1-1 1 4 4 1 3-2 2-7-3 4 5-10-3-2-1 1-1-5-3-7 2-1-1 2-3 9 0 5-5 0-2-6-2 1-1-4-3-5 1-15-2-1-1 3-1-3 0 1-2 6-4 6-1-3 2 1 2 3-2 6-1 2 2-2 2zM310 23l8 0-14 5 2-4zM258 18l11-4 6 0-4 3zM185 80l3-1-4 6-1-4zM300 10l8 1 0 2-10-1 3-1-2 0zM197 97l-5-1-2-3-2-1 0-2 6 1zM257 22l7 0 2 2-21 7 0-1-4-1 9-5-1-2zM287 18l4 0-3 2-13 2-3 0 1-1 5-1-12 0 8-3 10 2-1-2 3-1 2 0zM284 25l1 1-1 5 5 2-5 2 1 1-2 1-6-1-17 2 0-2-5 0 0-2 11-1-11-1-1-1 6-1-6-1 6-3 7-1 1 0-2 1 5 0 2 1 4-1 1 1-1 2 2-1 1-3zM295 26l-1-1 4-2 6 1-3 2 2 1-2 2-6 1-4-3zM285 24l4 0-4 2-1-2zM308 16l0 1-3 3-4 1-2-1 2-1-4 0 2-2zM321 7l8-1 7 2 1 2-8 2-7 0-1-1 3-1-5-1zM332 4l26-2 30 1-13 2 4 0-13 4-12 1 3 0-2 1 1 1-11 3 3 1-6 1-17 0 4-2 1-2 5 1-4-2 8-2-2-1 0-1 10-1-10 0zM339 41l-4 0 2-2 3 0zM298 35l0 1-2 1-6-2 5-2zM343 92l4 1 2 2zM342 101l0 2 4 0-3 2-2-2z"/>
      <path class="cm-b3" data-tip="Austria: 268 per 100,000" d="M542 98l-2 4-6 1-4-2-4 1-3-1 1-1 8 0 0-3 1-1 2 1 2-2 5 1z"/>
      <path class="cm-b3" data-tip="Denmark: 262 per 100,000" d="M523 77l-3 0-1-6 5-3 0 3 1 1-2 3zM529 73l1 2-1 2-3-3z"/>
      <path class="cm-b3" data-tip="United Kingdom: 241 per 100,000" d="M485 80l-3 0 0-4 5 2zM493 82l0-2-2-2-3-2 0-2-1 2-1-5 2-5 5 0-2 3 4 0-2 5 2 0 6 9 3 1-1 2 0 2-2 2-8 0-6 2-1 0 6-4-4-1-1-1 3-1-1-2 0-2z"/>
      <path class="cm-b3" data-tip="Ireland: 228 per 100,000" d="M485 80l1 2-2 3-5 2-3-1 2-3-1-3 5-4 0 4z"/>
      <path class="cm-b3" data-tip="Germany: 214 per 100,000" d="M534 80l2 9-6 2 3 5-1 1 0 3-8 0-6-1 2-4-5-1 0-2 0-2-1-4 2-1 0-4 5-1-1-3 3 0 3 3 4-2z"/>
      <path class="cm-b3" data-tip="United States: 207 per 100,000" d="M199 95l68 0 1-1 1 2 6 2 8-1 7 5 4 5-1 5-4 5 1 1 10-3 0-2 2-1 4 0 7-4 8 0 8-8 3 1-1 4 1 2 0 1-10 6-2 2 2 2-10 3 4 0-5 0-4 6-1-2 0 4-3 4 1-3 0-4-1 4-2-1 2 1-1 8-17 13-1 5 1 10-2 5-2 0-1-2-2-6 1-2-2-5-4 1-2-2-9 0 0 4-10-2-4 1-8 5-1 6-5-1-3-10-4-1-2 2-2-1-5-8-12 2-8-5-7 1-2-5-5-2-2-18 3-8 6-9 2-8 4 0 0 3zM76 188l2 2-3 2-1-3 1-2zM122 61l2 0-3 1-1-1zM146 68l2 1-7 2zM204 34l-24 27 4 1 1 3 6-3 2 4 0 6 2 2-3 3-2-2 1-2-1-3 1-3-6 0-4-4-8-1-5-3-3 1-2 2-10 2 8-6-13 6 0 1-4 2-15 7-19 4 21-7 9-6-6 1 0-1-2 1 1-2-5 2 3-3-1-1-3 0-2-2 2-1-1-2 3-1 6-3 10-2 0-2 3-1-10 1-3-1 0-3 10-2 2 0-2 1 5 0-2-5-2-1 3-1 28-7 2 0 0 2zM121 51l5 1-3 1-3-1z"/>
      <path class="cm-b2" data-tip="South Korea: 196 per 100,000" d="M826 131l5-3 5 6 1 6-6 2-3-8 1 0z"/>
      <path class="cm-b2" data-tip="Netherlands: 189 per 100,000" d="M516 81l0 4-2 1 1 4-3-3-4 1 3-6z"/>
      <path class="cm-b2" data-tip="France: 176 per 100,000" d="M357 239l-4 7-4-1 1-4-1-4 1-3 3 1zM515 94l5 1-2 4-1 1-2 2 0 2 1-1 1 2 2 7-3 2-5-1-3 1 0 2-7-1-6-2 2-8-4-5-4-2 0-2 7 0-1-3 3 1 5-2 1-3 2-1 8 5zM522 115l2-1 0 5-2 0z"/>
      <path class="cm-b2" data-tip="Japan: 173 per 100,000" d="M865 126l-1 4 3 7 0 2-8 2-2 4-3-4-10 2 3 3 1 5-2 2-1-2-1-3-4-3 3-1 3-6 8 0 0-6 3 2 3-5-2-9 2-1zM864 111l1-1 2 3-3 1 0 3-6-2 1 4-3 0-2-4 0-2 3 0-3-7zM848 145l3-3 3 2-1 2-2-1 0 2z"/>
      <path class="cm-b2" data-tip="Czechia: 164 per 100,000" d="M536 89l10 5-4 2-5-1-2 2-2-1-3-5z"/>
      <path class="cm-b2" data-tip="Spain: 158 per 100,000" d="M481 133l1-3-1-5 3-6-1-1-3 0-1-2-2 2-1-4 4-2 15 1 6 2 7 1 0 2-3 2-3 0-3 6 1 2-6 6-5 0-3 3-3-3z"/>
      <path class="cm-b2" data-tip="Chile: 152 per 100,000" d="M336 421l2 7 4 0-2 3-7-2-12-7 10 4 1-4zM309 309l4 6 0 3 3 8 2 0 0 4-3 2 2 7-3 5-1 10 4 9 0 6-2 2 2 6-1 1 1 11 5 8-1 1 1 12-1 1 1 4 3 0 2 5 8 0-4 2 0 3-1 0-10-5-5-11 0-3 1-2-4-1 2-3-1-5 3 1 0-7-2-1 0 4-2 0 0-13-3-6 1-1 2-15-3-11 0-24-1-10z"/>
      <path class="cm-b2" data-tip="Portugal: 142 per 100,000" d="M477 118l2-2 1 2 3 0 1 1-3 6 1 5-1 3-4 1 0-5-2-1 3-7z"/>
      <path class="cm-b2" data-tip="Italy: 131 per 100,000" d="M526 102l4-1 4 2 1 3-4 1 1 4 6 6 2 0 0 2 7 4 0 1-4-2-1 2 2 2 0 1-2 3-1 0 0-3-2-3-11-8-2-5-4-1-3 2-2-7 5-1 1-1 3 0zM538 130l2-1-1 6-7-4 0-1zM522 121l1-1 2 2 0 4-2 1-2-6z"/>
      <path class="cm-b2" data-tip="Nepal: 126 per 100,000" d="M736 163l1 5-14-4-9-4 2-5 3 1 10 6z"/>
      <path class="cm-b2" data-tip="Poland: 118 per 100,000" d="M556 80l1 7 1 4-3 4-9-1-10-5-2-9 8-3 5 1 7 1z"/>
      <path class="cm-b2" data-tip="Greece: 104 per 100,000" d="M569 139l-4 1-4-1 1-1zM558 119l8 0 0-1 2 1-1 2-6 0 2 2-2 1-3-1 2 3-1 1 3 2 0 2-2-1 1 2-2 0 1 3-4-1-4-9 2-4z"/>
      <path class="cm-b1" data-tip="Argentina: 96 per 100,000" d="M336 421l3 4 7 3 0 1-4-1-4 0zM347 350l0 12 5 8-1 6-4 2-8 0 2 6-4 1-2-1-1 1 1 3 2 1 1-1 1 2-3 3 0 5-2 0-2 1 0 3 6 3 0 3-3 1 0 4-3 3 3 4-8 0-2-5-3 0-1-4 1-1-1-12 1-1-5-8-1-11 1-1-2-6 2-2 0-6-4-9 1-10 3-5-2-7 3-2 0-4 2-3 4 1 2 2 0-3 4 1 6 6 8 4-1 6 8 1 2-3 0-2 1-1 2 2 0 2z"/>
      <path class="cm-b1" data-tip="Romania: 92 per 100,000" d="M570 106l4 1-2 1 0 4-4-2-4 2-6-1-1-1-7-6 2 0 4-5 5 0 4-1 5 4z"/>
      <path class="cm-b1" data-tip="South Africa: 87 per 100,000" d="M544 345l1-2 1 2 3 1 4-2 1-12 2 7 2 0 5-5 2 1 4 0 4-6 7-5 5 0 1 7 0 5-2 0-2 3 2 2 2-2 2 0-2 6-12 13-6 4-9 0-6 3-5-2-1-5 1-3zM577 346l-2 0-3 3 2 2 3-1 1-3z"/>
      <path class="cm-b1" data-tip="Turkey: 79 per 100,000" d="M616 133l-6 0-7 1-8 0-1 3-1-1 1-2-4 0-1 2-4 0-3-2-2 0-3 2-5-2-4-5 1-2-2-2 3-3 4 0 1-2 4 0 6-3 4 0 9 4 5-1 3-1 5 1 1 3 3 2-2 1zM566 118l5-1 2 3-3 0-3 3 0-2 1-2z"/>
      <path class="cm-b1" data-tip="Brazil: 71 per 100,000" d="M360 362l-1-2 1-2-2-2-9-6-2 0 9-11 0-2-2-2-1 1 0-6-3 0-1-5-6-1-2-6 2-7-3-3 0-3-5 0-2-8-10-4-4-3 0-6-3 1-5 3-3 0-3 0 0-5-2 2-6-2 1-1-3-5 2-3 1-4 6-4 2 0 1-10-1-5 2 0 0-1-2-1 0-2 5 0 1-1 2 3 2 1 2 0 6-4-2-1-1-5-1 0 5 1 6-3 1-2 2 1 1 3-2 4 1 3 3 2 4-3 2 1 1 0 1-2 4 0 4 1 4-7 1 0 2 8 1 0 0 2-2 3 1 1 5 0 0 4 2-2 8 3 1 3 3-1 10 2 8 6 4 1 3 7-1 6-10 13 0 15-4 13-3 4-7 1-7 5-2 3-1 9z"/>
      <path class="cm-b1" data-tip="Ukraine: 67 per 100,000" d="M576 86l5-1 2 3 2 0 1 2 12 3 0 6-2 0-1 2-6 2-2 1 0 1-4 0-4-1 0-2-3 1-2 4-4-1 2-3 2 0 0-1-3-4-3-1-3 1-4 1-5 0-2-2 1-2 3-4-1-4 4-1 13 2 0-2z"/>
      <path class="cm-b1" data-tip="Mexico: 64 per 100,000" d="M191 148l7-1 8 5 12-2 5 8 2 1 2-2 4 1 3 10 5 1-4 11 3 12 4 2 8-2 2-1 2-6 9-2 1 3-4 8-1-1-3 2-5 0 0 2-2 0 3 4-4 0-2 5-4-5-2 0-5 1-18-8-4-3-1-4 2-3-1-5-7-9 0-3-5-8-1-7-1-1-2-1-2 5 5 12 1 7 3 3-2 2-5-6 1-4-6-6 3-2-3-4z"/>
      <path class="cm-b1" data-tip="Ecuador: 61 per 100,000" d="M291 253l-1 5-3 3-3 1-4 7-1-2-2 0 0-3 1-3 0-1-1 1-2-1 0-4 3-6 3-2 4 3 3 0z"/>
      <path class="cm-b1" data-tip="Peru: 58 per 100,000" d="M306 266l-2 0-6 4-1 4-2 3 3 5-1 1 6 2 2-2 0 5 3 0 3 5-2 8 2 5-2 3-1 3-17-12-12-24-4-4 1-1-2-3 3-4 0 3 2 0 1 2 4-7 3-1 3-3 1-5 4 4 2 3 6 0 2 1-1 4z"/>
      <path class="cm-b1" data-tip="Bolivia: 55 per 100,000" d="M308 288l3 0 5-3 3-1 0 6 4 3 10 4 2 8 5 0 0 3 3 3-2 7-2-3-8 1-1 8-4-1 0 3-2-2-4-1-2 3-2 0-3-8 0-3-4-6 2-3-2-5 2-8z"/>
      <path class="cm-b1" data-tip="Russia: 54 per 100,000" d="M674 6l8 1 7 2 1 2-13-1-6-2zM695 10l7 2-10 1 0-3zM773 18l14 1 1 2-10 0-6-1-1-2zM794 20l6 0-5 1-5-1zM783 25l3-2 5 2zM584 7l12 0-7 1zM554 79l-7-1 0-1 3-1 4 1zM608 24l4-3-1-1 9-3 13-1 2 1-18 5-4 5 2 2 5 3-9-1-5-1 0-2 1 0 0-2 3-2zM840 81l14 14-4-1 1 5 6 5-3-2 0 3-2-3-8-13-6-7 1-2-2-1zM832 117l-1-1-1-2 2 0-4-6 1-1 4 0-1-10-5 2-4 0-7-5-5-1-10-10-7-2-5 1-1 1 2 3 0 6-2 2-4-2-6-1-2 2-5 2-6-1-5-3-8 1-4-2-1-2-9-2-1 3 1 2-1 2-14-3-9 4-12-5-4 0-4-1 0 1-13-10 1-1-7 3-1-1-5-1-2-3-5-1-8 4-8 1-1 1 2 2-3 3 5 2 0 2-4 0-8-1-2 1-9-3-4 0-4 3 0 2-3-1-1 6 4 2 4 4-5 6 6 9-1 2-4-2-3-2-14-3-9-6 3-3-2-1 4-2-2 0 1-2 2 0 0-6-12-3-1-2-2 0-2-3-5 1-1-3 3-1-5-5 0-2-7-2-3-4 1-6 2-1-2-2 6-7-4-2 1-1-2-3 1-2-4-3 2-2-4-2 0-2 5-1 2-1 10 2 11 4 1 2-6 3-11-2 4 2 1 4 5 2-2-3 1-1 6 2 2-1-2-2 4-3 4 1 1-2-4-5 6 1 2 2-3 0 1 2 2 1 3-1 0-2 11-3 1 0-1 1 10-1 3 1 2-2-3-1 1-1 19 5 1-2-6-2-3-4 4-6 6 1 1 2-1 2 4 2 1 4 3 2-2 6 3 0 3-4-2-2 0-2-4-1 1-3-4-2 2-2-1-2 3 1 0 3 3 0-2-1 3-2 9 2-5-5 12-1-3-1 1-2 11-2 14-1 0-2 4-1 8 3 7-1 8 2 1 2-6 2 7 1 3 2 3-1 17 2-1-2 8 0 16 7-1-2 4 1 12 0-4-3 2-1 20 2 11 3 13 0 8 4 14 0 7 2 1-1-4-3 12 1 12 2 16 13-6-5 3 3-1 2-3-1 11 7-4-1-6 3-3 4 1 1-5-2-4 2-2-1-1 2-4-1 1 5 5 2 3 4-2 0 2 3 2 1-3 2 2 3-3 1 2 3-2 3-13-14-3-4-1-3 3-1 4-9-2-4-3 1 1 2-2 3-6-3-4 1-2 4 4 2-8 1-1-2-4 0-2 1-14 1-7 12 9 3 1-1 3 0 6 3 6 15-1 7-3 9-2 2-4-2zM871 29l2 2-3 0zM583 105l4 0 4 1 0 1-6 3-1-1 0-1-3-1z"/>
      <path class="cm-b0" data-tip="Colombia: 49 per 100,000" d="M314 249l-2-3-1 1-5 0 0 2 2 1 0 1-2 0 1 5-1 10-2-1 1-4-2-1-6 0-2-3-4-4-3-2-3 0-4-3 1-4 4-4-2-11 2-2 0-2 5-3 2-5 4 0 5-4 2 1-1 1-4 4-2 4 2 0 2 7 5 0 2 3 5 0-1 5 1 4-1 2z"/>
      <path class="cm-b0" data-tip="Thailand: 47 per 100,000" d="M790 207l-7 0-1 3 1 3-5-1 0-2-2 0-2 11 4 8 5 4-2 1-1-1-3-1-4-6-1 2 1-7 2-7-5-10 1-3-5-8 2-4 5-2 1 3 2 0 1 6 5-2 2 0 3 3 0 3 3 3z"/>
      <path class="cm-b0" data-tip="Kenya: 44 per 100,000" d="M609 268l-4-4 0-1-11-7 0-4 3-5-3-8 4-4 2 3 6 3 4 1 3-3 3 1-2 4 0 11 2 3-4 3z"/>
      <path class="cm-b0" data-tip="Morocco: 41 per 100,000" d="M494 139l3 10-7 2 0 2-4 3-9 4 0 4-1 1-7 1-3 7-4 3-2 7-6 1 7-16 5-6 3 0 6-6-1-4 1-4 7-5 3-6z"/>
      <path class="cm-b0" data-tip="China: 38 per 100,000" d="M799 194l-2-1-1-3 2-1 4-1 1 1-1 4zM703 116l0-2 1-1-4-5 6-2 0-6 5 1 1-1-1-3 2 0 1-3 2 2 9 6 2 5 12 3 5 5 11 0 12 4 2-2 10-3 3-2-3-3 1-2 4 1 5-3 2-3 6 0-6-4-6 1-1-1 0-6 4 2 2-2 0-6-2-3 1-1 5-1 7 2 10 10 5 1 7 5 4 0 5-2 1 10-4 0-1 1 4 6-2 0 1 2-2-2-1 2-3 1 1 2-4-1-3 6-7 3 0-5-2-1-4 5-2 0-1 2 7 5 2-2 5 1 1 2-3 0-3 6 3 2 7 8 1 3-1 1 3 2 0 6-1 0-4 12-6 5-4 2-1-1-2 2-6 2 0 3-2 0 0-3-5-1-3-1-2-3-4-2-2 2-6 1-1 1 1 4-2-1 0-2-2 1-4-2 1-2-2-1-1-3-3 1-1-4 2-3-1-5-2-3-2 1-3-1 1-1-2-2-2 1-2-1-5 5-2 0-4-2-3 4-1-3-1 1-7-1-10-6-3-1-8-4-1-4 2 1 0-2-2-4-4-4-4-1-4-4-1-1-1-3-2-1-2-2 2-3 5-1 0-2 3 0z"/>
      <path class="cm-b0" data-tip="Kazakhstan: 33 per 100,000" d="M714 94l-1 3-2 0 1 3-1 1-5-1 0 6-6 2 4 5-1 1 0 2-3-1-13-2-1 3-4-1-2 1-6 6-1-2-3 0-1-3-1 0-1-3-4-2-7 0-10-6-6 2 3 11-6-3-4 2 0-3-3-1-4-5 3 0-1-2 5 0-2-5-4-1-5 2-4-4-4-2 1-6 3 1 0-2 4-3 4 0 9 3 2-1 8 1 4 0 0-2-5-2 3-3-2-2 1-1 8-1 8-4 5 1 2 3 5 1 1 1 7-3-1 1 13 10 0-1 4 1 4 0z"/>
      <path class="cm-b0" data-tip="Vietnam: 29 per 100,000" d="M788 219l5-2-1-2 4-2-1-6 0-6-8-8-3-2 2-2-2-3-3 0-4-6 6-1 2-2 4 2 2 3 3 1-4 3-1 5 10 13 2 11-10 10 0-4z"/>
      <path class="cm-b0" data-tip="Indonesia: 26 per 100,000" d="M892 261l-2 21-2-3-7 1 3-4-1-6-12-6-2 2 0-3-2-1 4-2-4 0-4-4 5-2 4 1 1 7 3 1 6-5zM846 281l0 2-2 2-3 1 2-3zM872 275l1-5 1 3zM827 239l-1 3 2 3-1 2 4 3-4 0-1 5-2 2-2 9 0-2-3 2-1-2-4-1-3 1-1-2-4 0 0-4-3-7 2-5 2 4 6-2 3 1 2-1 4-9zM859 262l3 1 1 2-8-1 1-2zM852 265l-2-2 3 0zM855 246l2 3 0 3-1 0 0 4-2-7zM841 250l4 0 2-3-1 4-12 1-1 2 3 3 7-2-1 1-1 0-4 3 5 11-2 1-1-1 2-3-3 1-1-1-1-6-2 1 0 8-2 1-1-1 1-6-2-2 3-11 3-3zM833 286l-4-3 3 0 2 2zM836 280l4-1 0 1-4 1-4 0 0-1zM827 280l2-1 1 2-7 1 4-3zM801 273l0 1 5 1 1-2 5 2 1 2 7 3-3 1-22-5 0-1-3 0 2-3zM790 256l1 4 2 0 2 3-2 8-3 1-5-6-9-14-2-5-10-12 6 1 10 10 2 0 3 2 3 4-1 3z"/>
      <path class="cm-b0" data-tip="India: 22 per 100,000" d="M760 162l0 3-2 0-3 2 0 6-1 3-2-1 1 6-1 1-3-5-1 2-1-2 2-5-7-1 0-2-4-2-1 3 3 1-2 3 2 1 2 7-1 1-5 0 0 5-4 2-7 8 0 1-4 3 0 17-2 1-1 2 1 1-2 1-2 3-3-3-10-23-5-17-5 1-4-3 1-2-1-1-4-3 2-2 6 0-6-8 3-4 3 1 7-14-3-2-3-5 1-1 7 0 2-3 4 4 2 4 0 2-2-1 1 4 8 4-2 5 9 4 14 4-1-5 1-1 1 3 3 2 6-1-2-3 2 0 5-5 2 1 2-1 2 2-1 1z"/>
      <path class="cm-b0" data-tip="Saudi Arabia: 21 per 100,000" d="M593 158l3 1 4-3 1-2-3-3 6-2 7 3 8 7 5 0 5 2 6 6 2 6 2 0 0 2 2 4 9 1 1 2-1 6-8 4-8 1-5 5-1-1-9-1-2 4-5-10-6-6-2-8-3-2-7-12-1 0z"/>
      <path class="cm-b0" data-tip="Egypt: 18 per 100,000" d="M600 182l-32 0-2-26 1-5 10 2 5-2 3 2 0-1 6 0 2 6-2 6-5-7 10 19 0 2z"/>
    </svg>
        <div class="cm-tip" data-map-tip hidden aria-hidden="true"></div>
      </div>
      <ul class="cm-legend" aria-label="Active users per 100,000 people">
        <li><span class="cm-sw b0" aria-hidden="true"></span><b>Under 50</b> 11 countries</li>
        <li><span class="cm-sw b1" aria-hidden="true"></span><b>50–99</b> 11 countries</li>
        <li><span class="cm-sw b2" aria-hidden="true"></span><b>100–199</b> 12 countries</li>
        <li><span class="cm-sw b3" aria-hidden="true"></span><b>200–299</b> 7 countries</li>
        <li><span class="cm-sw b4" aria-hidden="true"></span><b>300 and over</b> 6 countries</li>
        <li><span class="cm-sw none" aria-hidden="true"></span>No data</li>
      </ul>
    </figure>
    <div class="cm-top">
      <h3>Highest rates</h3>
      <ol>
        <li>Norway <span>412</span><div class="cm-bar" aria-hidden="true"><i style="width:100%"></i></div></li>
        <li>New Zealand <span>388</span><div class="cm-bar" aria-hidden="true"><i style="width:94%"></i></div></li>
        <li>Sweden <span>356</span><div class="cm-bar" aria-hidden="true"><i style="width:86%"></i></div></li>
        <li>Finland <span>331</span><div class="cm-bar" aria-hidden="true"><i style="width:80%"></i></div></li>
        <li>Australia <span>322</span><div class="cm-bar" aria-hidden="true"><i style="width:78%"></i></div></li>
      </ol>
      <p class="cm-note">Countries in grey have fewer than 1,000 users, too few to report. Borders: Natural Earth.</p>
    </div>
  </div>
  <div class="cm-body" data-view="table" hidden>
    <div class="cm-scroll" tabindex="0" role="region" aria-labelledby="cm-world-cap">
      <table class="cm-table">
        <caption id="cm-world-cap">Active users per 100,000 people, 47 countries</caption>
        <thead><tr><th scope="col">Rank</th><th scope="col">Country</th><th scope="col">Per 100,000</th><th scope="col">Band</th></tr></thead>
        <tbody>
          <tr><td>1</td><th scope="row">Norway</th><td>412</td><td><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td>2</td><th scope="row">New Zealand</th><td>388</td><td><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td>3</td><th scope="row">Sweden</th><td>356</td><td><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td>4</td><th scope="row">Finland</th><td>331</td><td><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td>5</td><th scope="row">Australia</th><td>322</td><td><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td>6</td><th scope="row">Switzerland</th><td>305</td><td><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td>7</td><th scope="row">Canada</th><td>284</td><td><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td>8</td><th scope="row">Austria</th><td>268</td><td><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td>9</td><th scope="row">Denmark</th><td>262</td><td><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td>10</td><th scope="row">United Kingdom</th><td>241</td><td><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td>11</td><th scope="row">Ireland</th><td>228</td><td><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td>12</td><th scope="row">Germany</th><td>214</td><td><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td>13</td><th scope="row">United States</th><td>207</td><td><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td>14</td><th scope="row">South Korea</th><td>196</td><td><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td>15</td><th scope="row">Netherlands</th><td>189</td><td><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td>16</td><th scope="row">France</th><td>176</td><td><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td>17</td><th scope="row">Japan</th><td>173</td><td><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td>18</td><th scope="row">Czechia</th><td>164</td><td><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td>19</td><th scope="row">Spain</th><td>158</td><td><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td>20</td><th scope="row">Chile</th><td>152</td><td><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td>21</td><th scope="row">Portugal</th><td>142</td><td><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td>22</td><th scope="row">Italy</th><td>131</td><td><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td>23</td><th scope="row">Nepal</th><td>126</td><td><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td>24</td><th scope="row">Poland</th><td>118</td><td><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td>25</td><th scope="row">Greece</th><td>104</td><td><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td>26</td><th scope="row">Argentina</th><td>96</td><td><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td>27</td><th scope="row">Romania</th><td>92</td><td><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td>28</td><th scope="row">South Africa</th><td>87</td><td><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td>29</td><th scope="row">Turkey</th><td>79</td><td><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td>30</td><th scope="row">Brazil</th><td>71</td><td><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td>31</td><th scope="row">Ukraine</th><td>67</td><td><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td>32</td><th scope="row">Mexico</th><td>64</td><td><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td>33</td><th scope="row">Ecuador</th><td>61</td><td><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td>34</td><th scope="row">Peru</th><td>58</td><td><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td>35</td><th scope="row">Bolivia</th><td>55</td><td><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td>36</td><th scope="row">Russia</th><td>54</td><td><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td>37</td><th scope="row">Colombia</th><td>49</td><td><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td>38</td><th scope="row">Thailand</th><td>47</td><td><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td>39</td><th scope="row">Kenya</th><td>44</td><td><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td>40</td><th scope="row">Morocco</th><td>41</td><td><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td>41</td><th scope="row">China</th><td>38</td><td><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td>42</td><th scope="row">Kazakhstan</th><td>33</td><td><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td>43</td><th scope="row">Vietnam</th><td>29</td><td><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td>44</td><th scope="row">Indonesia</th><td>26</td><td><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td>45</td><th scope="row">India</th><td>22</td><td><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td>46</td><th scope="row">Saudi Arabia</th><td>21</td><td><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td>47</td><th scope="row">Egypt</th><td>18</td><td><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section></div>
<div><span class="lbl">Tile grid map with the value in every tile</span>
<section class="cm" aria-labelledby="cm-us-title">
  <div class="cm-head"><div><h2 id="cm-us-title">Trail club members per 10,000 residents</h2><p>One tile per state, placed roughly where the state is. Sample data.</p></div></div>
  <ul class="cm-tiles" style="margin-top:20px" aria-label="Members per 10,000 residents by state">
    <li class="cm-tile b4" style="grid-area:1/1"><span class="sr-only">Alaska: 41</span><b aria-hidden="true">AK</b><span aria-hidden="true">41</span></li>
    <li class="cm-tile b3" style="grid-area:1/12"><span class="sr-only">Maine: 37</span><b aria-hidden="true">ME</b><span aria-hidden="true">37</span></li>
    <li class="cm-tile b2" style="grid-area:2/7"><span class="sr-only">Wisconsin: 22</span><b aria-hidden="true">WI</b><span aria-hidden="true">22</span></li>
    <li class="cm-tile b4" style="grid-area:2/11"><span class="sr-only">Vermont: 46</span><b aria-hidden="true">VT</b><span aria-hidden="true">46</span></li>
    <li class="cm-tile b3" style="grid-area:2/12"><span class="sr-only">New Hampshire: 39</span><b aria-hidden="true">NH</b><span aria-hidden="true">39</span></li>
    <li class="cm-tile b4" style="grid-area:3/2"><span class="sr-only">Washington: 44</span><b aria-hidden="true">WA</b><span aria-hidden="true">44</span></li>
    <li class="cm-tile b3" style="grid-area:3/3"><span class="sr-only">Idaho: 33</span><b aria-hidden="true">ID</b><span aria-hidden="true">33</span></li>
    <li class="cm-tile b4" style="grid-area:3/4"><span class="sr-only">Montana: 48</span><b aria-hidden="true">MT</b><span aria-hidden="true">48</span></li>
    <li class="cm-tile b0" style="grid-area:3/5"><span class="sr-only">North Dakota: 9</span><b aria-hidden="true">ND</b><span aria-hidden="true">9</span></li>
    <li class="cm-tile b2" style="grid-area:3/6"><span class="sr-only">Minnesota: 26</span><b aria-hidden="true">MN</b><span aria-hidden="true">26</span></li>
    <li class="cm-tile b1" style="grid-area:3/7"><span class="sr-only">Illinois: 12</span><b aria-hidden="true">IL</b><span aria-hidden="true">12</span></li>
    <li class="cm-tile b1" style="grid-area:3/8"><span class="sr-only">Michigan: 19</span><b aria-hidden="true">MI</b><span aria-hidden="true">19</span></li>
    <li class="cm-tile b2" style="grid-area:3/10"><span class="sr-only">New York: 21</span><b aria-hidden="true">NY</b><span aria-hidden="true">21</span></li>
    <li class="cm-tile b2" style="grid-area:3/11"><span class="sr-only">Massachusetts: 27</span><b aria-hidden="true">MA</b><span aria-hidden="true">27</span></li>
    <li class="cm-tile b4" style="grid-area:4/2"><span class="sr-only">Oregon: 42</span><b aria-hidden="true">OR</b><span aria-hidden="true">42</span></li>
    <li class="cm-tile b1" style="grid-area:4/3"><span class="sr-only">Nevada: 18</span><b aria-hidden="true">NV</b><span aria-hidden="true">18</span></li>
    <li class="cm-tile b4" style="grid-area:4/4"><span class="sr-only">Wyoming: 51</span><b aria-hidden="true">WY</b><span aria-hidden="true">51</span></li>
    <li class="cm-tile b1" style="grid-area:4/5"><span class="sr-only">South Dakota: 15</span><b aria-hidden="true">SD</b><span aria-hidden="true">15</span></li>
    <li class="cm-tile b0" style="grid-area:4/6"><span class="sr-only">Iowa: 8</span><b aria-hidden="true">IA</b><span aria-hidden="true">8</span></li>
    <li class="cm-tile b0" style="grid-area:4/7"><span class="sr-only">Indiana: 7</span><b aria-hidden="true">IN</b><span aria-hidden="true">7</span></li>
    <li class="cm-tile b1" style="grid-area:4/8"><span class="sr-only">Ohio: 11</span><b aria-hidden="true">OH</b><span aria-hidden="true">11</span></li>
    <li class="cm-tile b1" style="grid-area:4/9"><span class="sr-only">Pennsylvania: 17</span><b aria-hidden="true">PA</b><span aria-hidden="true">17</span></li>
    <li class="cm-tile b1" style="grid-area:4/10"><span class="sr-only">New Jersey: 14</span><b aria-hidden="true">NJ</b><span aria-hidden="true">14</span></li>
    <li class="cm-tile b1" style="grid-area:4/11"><span class="sr-only">Connecticut: 16</span><b aria-hidden="true">CT</b><span aria-hidden="true">16</span></li>
    <li class="cm-tile b1" style="grid-area:4/12"><span class="sr-only">Rhode Island: 13</span><b aria-hidden="true">RI</b><span aria-hidden="true">13</span></li>
    <li class="cm-tile b2" style="grid-area:5/2"><span class="sr-only">California: 29</span><b aria-hidden="true">CA</b><span aria-hidden="true">29</span></li>
    <li class="cm-tile b4" style="grid-area:5/3"><span class="sr-only">Utah: 47</span><b aria-hidden="true">UT</b><span aria-hidden="true">47</span></li>
    <li class="cm-tile b4" style="grid-area:5/4"><span class="sr-only">Colorado: 56</span><b aria-hidden="true">CO</b><span aria-hidden="true">56</span></li>
    <li class="cm-tile b0" style="grid-area:5/5"><span class="sr-only">Nebraska: 6</span><b aria-hidden="true">NE</b><span aria-hidden="true">6</span></li>
    <li class="cm-tile b1" style="grid-area:5/6"><span class="sr-only">Missouri: 10</span><b aria-hidden="true">MO</b><span aria-hidden="true">10</span></li>
    <li class="cm-tile b1" style="grid-area:5/7"><span class="sr-only">Kentucky: 14</span><b aria-hidden="true">KY</b><span aria-hidden="true">14</span></li>
    <li class="cm-tile b2" style="grid-area:5/8"><span class="sr-only">West Virginia: 23</span><b aria-hidden="true">WV</b><span aria-hidden="true">23</span></li>
    <li class="cm-tile b2" style="grid-area:5/9"><span class="sr-only">Virginia: 20</span><b aria-hidden="true">VA</b><span aria-hidden="true">20</span></li>
    <li class="cm-tile b1" style="grid-area:5/10"><span class="sr-only">Maryland: 15</span><b aria-hidden="true">MD</b><span aria-hidden="true">15</span></li>
    <li class="cm-tile b0" style="grid-area:5/11"><span class="sr-only">Delaware: 5</span><b aria-hidden="true">DE</b><span aria-hidden="true">5</span></li>
    <li class="cm-tile b3" style="grid-area:6/3"><span class="sr-only">Arizona: 31</span><b aria-hidden="true">AZ</b><span aria-hidden="true">31</span></li>
    <li class="cm-tile b2" style="grid-area:6/4"><span class="sr-only">New Mexico: 28</span><b aria-hidden="true">NM</b><span aria-hidden="true">28</span></li>
    <li class="cm-tile b0" style="grid-area:6/5"><span class="sr-only">Kansas: 4</span><b aria-hidden="true">KS</b><span aria-hidden="true">4</span></li>
    <li class="cm-tile b1" style="grid-area:6/6"><span class="sr-only">Arkansas: 12</span><b aria-hidden="true">AR</b><span aria-hidden="true">12</span></li>
    <li class="cm-tile b2" style="grid-area:6/7"><span class="sr-only">Tennessee: 24</span><b aria-hidden="true">TN</b><span aria-hidden="true">24</span></li>
    <li class="cm-tile b2" style="grid-area:6/8"><span class="sr-only">North Carolina: 25</span><b aria-hidden="true">NC</b><span aria-hidden="true">25</span></li>
    <li class="cm-tile b1" style="grid-area:6/9"><span class="sr-only">South Carolina: 11</span><b aria-hidden="true">SC</b><span aria-hidden="true">11</span></li>
    <li class="cm-tile b1" style="grid-area:6/10"><span class="sr-only">District of Columbia: 18</span><b aria-hidden="true">DC</b><span aria-hidden="true">18</span></li>
    <li class="cm-tile b0" style="grid-area:7/5"><span class="sr-only">Oklahoma: 6</span><b aria-hidden="true">OK</b><span aria-hidden="true">6</span></li>
    <li class="cm-tile b0" style="grid-area:7/6"><span class="sr-only">Louisiana: 5</span><b aria-hidden="true">LA</b><span aria-hidden="true">5</span></li>
    <li class="cm-tile b0" style="grid-area:7/7"><span class="sr-only">Mississippi: 4</span><b aria-hidden="true">MS</b><span aria-hidden="true">4</span></li>
    <li class="cm-tile b0" style="grid-area:7/8"><span class="sr-only">Alabama: 7</span><b aria-hidden="true">AL</b><span aria-hidden="true">7</span></li>
    <li class="cm-tile b1" style="grid-area:7/9"><span class="sr-only">Georgia: 13</span><b aria-hidden="true">GA</b><span aria-hidden="true">13</span></li>
    <li class="cm-tile b3" style="grid-area:8/1"><span class="sr-only">Hawaii: 34</span><b aria-hidden="true">HI</b><span aria-hidden="true">34</span></li>
    <li class="cm-tile b1" style="grid-area:8/5"><span class="sr-only">Texas: 10</span><b aria-hidden="true">TX</b><span aria-hidden="true">10</span></li>
    <li class="cm-tile b0" style="grid-area:8/10"><span class="sr-only">Florida: 9</span><b aria-hidden="true">FL</b><span aria-hidden="true">9</span></li>
  </ul>
  <ul class="cm-legend" aria-label="Members per 10,000 residents">
    <li><span class="cm-sw b0" aria-hidden="true"></span>Under 10</li>
    <li><span class="cm-sw b1" aria-hidden="true"></span>10–19</li>
    <li><span class="cm-sw b2" aria-hidden="true"></span>20–29</li>
    <li><span class="cm-sw b3" aria-hidden="true"></span>30–39</li>
    <li><span class="cm-sw b4" aria-hidden="true"></span>40 and over</li>
  </ul>
</section></div>

CSS

/* Choropleth: five-step viridis scale (readable with the common forms of colour blindness), every value also in text. */
.cm-frame{--cm-sea:#eef1f5;--cm-none:#d3d8df;position:relative;border-radius:14px;background:var(--cm-sea);overflow:hidden}
.cm-frame svg{display:block;width:100%;height:auto}
.cm-none{fill:var(--cm-none);stroke:#fff;stroke-width:.6}
.cm-frame [data-tip]{stroke:#fff;stroke-width:.7}
.cm-frame [data-tip]:hover{stroke:#111827;stroke-width:1.8}
.cm-b0{fill:#fde725}.cm-b1{fill:#5ec962}.cm-b2{fill:#21918c}.cm-b3{fill:#3b528b}.cm-b4{fill:#440154}
.cm-tip{position:absolute;left:0;top:0;z-index:2;transform:translate(-50%,calc(-100% - 12px));padding:7px 11px;border-radius:9px;background:#111827;color:#fff;
  font-size:.8rem;font-weight:600;white-space:nowrap;pointer-events:none}
.cm-tip[hidden]{display:none}
.cm-sw{display:inline-block;width:14px;height:14px;border-radius:4px;flex:none}
.cm-sw.b0{background:#fde725}.cm-sw.b1{background:#5ec962}.cm-sw.b2{background:#21918c}.cm-sw.b3{background:#3b528b}.cm-sw.b4{background:#440154}.cm-sw.none{background:#d3d8df}
.cm-tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(8,auto);gap:4px;list-style:none}
.cm-tile{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;line-height:1.05;text-align:center}
.cm-tile b{font-size:.78rem;font-weight:800}
.cm-tile span{font-size:.72rem;font-weight:600}
.cm-tile.b0{background:#fde725;color:#111827}.cm-tile.b1{background:#5ec962;color:#111827}.cm-tile.b2{background:#21918c;color:#0b1120}
.cm-tile.b3{background:#3b528b;color:#fff}.cm-tile.b4{background:#440154;color:#fff}
@media (max-width:560px){.cm-tiles{gap:2px}.cm-tile{border-radius:3px}.cm-tile b{font-size:.56rem}.cm-tile span{font-size:.54rem}}
.cm{--cm-ink:#111827;--cm-muted:#4b5563;--cm-line:#e5e7eb;background:#fff;border:1px solid var(--cm-line);border-radius:20px;padding:26px;color:var(--cm-ink)}
.cm-head{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-end;justify-content:space-between}
.cm-head h2{font-size:1.35rem;letter-spacing:-.02em;line-height:1.2}
.cm-head p{margin-top:4px;color:var(--cm-muted);font-size:.92rem}
.cm-switch{display:inline-flex;padding:4px;border-radius:12px;background:#f3f4f6;gap:4px}
.cm-switch button{font:inherit;font-size:.85rem;font-weight:600;padding:7px 14px;border:0;border-radius:9px;background:transparent;color:#374151;cursor:pointer}
.cm-switch button[aria-pressed="true"]{background:#fff;color:#111827;box-shadow:0 1px 3px rgba(17,24,39,.15)}
.cm-switch button:focus-visible{outline:3px solid #3b528b;outline-offset:2px}
.cm-body{display:grid;gap:22px;margin-top:20px}
@media (min-width:900px){.cm-body{grid-template-columns:minmax(0,1fr) 230px}}
.cm-body[hidden]{display:none}
.cm-body[data-view="table"]{grid-template-columns:minmax(0,1fr)}
.cm-legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;padding:0;list-style:none;font-size:.8rem;color:var(--cm-muted)}
.cm-legend li{display:flex;align-items:center;gap:7px}
.cm-legend b{color:var(--cm-ink)}
.cm-top h3{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cm-muted)}
.cm-top ol{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.cm-top li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:.9rem}
.cm-top li span{font-weight:700;font-variant-numeric:tabular-nums}
.cm-bar{grid-column:1/-1;height:6px;border-radius:9px;background:#f3f4f6;overflow:hidden}
.cm-bar i{display:block;height:100%;border-radius:inherit;background:#440154}
.cm-note{margin-top:14px;font-size:.78rem;color:var(--cm-muted)}
.cm-scroll{max-height:380px;overflow:auto;border:1px solid var(--cm-line);border-radius:12px}
.cm-scroll:focus-visible{outline:3px solid #3b528b;outline-offset:2px}
.cm-table{width:100%;border-collapse:collapse;font-size:.9rem}
.cm-table caption{text-align:left;padding:12px 14px;font-weight:700}
.cm-table th,.cm-table td{padding:9px 14px;border-top:1px solid var(--cm-line);text-align:left}
.cm-table thead th{position:sticky;top:0;background:#f9fafb;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cm-muted)}
.cm-table th[scope="row"]{font-weight:600}
.cm-table td:nth-child(3){font-weight:700;font-variant-numeric:tabular-nums}
.cm-table td:last-child{white-space:nowrap}
.cm-table td:first-child{color:var(--cm-muted)}
.cm-table [hidden]{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:640px){.cm{padding:18px}}

JavaScript

// Choropleth: pointer tooltip on shaded countries, and a Map / Table switch.
document.querySelectorAll('[data-choropleth]').forEach(function (box) {
  var frame = box.querySelector('[data-map-frame]'), tip = box.querySelector('[data-map-tip]');
  if (frame && tip) {
    frame.addEventListener('pointermove', function (e) {
      var t = e.target.closest('[data-tip]'); if (!t) { tip.hidden = true; return; }
      var f = frame.getBoundingClientRect(); tip.textContent = t.dataset.tip; tip.hidden = false;
      var half = tip.offsetWidth / 2 + 6;
      tip.style.left = Math.max(half, Math.min(f.width - half, e.clientX - f.left)) + 'px';
      tip.style.top = Math.max(tip.offsetHeight + 16, e.clientY - f.top) + 'px';
    });
    frame.addEventListener('pointerleave', function () { tip.hidden = true; });
  }
  var views = box.querySelectorAll('[data-view]');
  box.querySelectorAll('[data-show]').forEach(function (btn) {
    btn.addEventListener('click', function () {
      box.querySelectorAll('[data-show]').forEach(function (b) { b.setAttribute('aria-pressed', String(b === btn)); });
      views.forEach(function (v) { v.hidden = v.dataset.view !== btn.dataset.show; });
    });
  });
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML

<div><span class="lbl">World choropleth with a legend, top five and a table view</span>
<section class="card rounded-4 p-3 p-sm-4" data-choropleth aria-labelledby="cm-world-title">
  <div class="d-flex flex-wrap align-items-end justify-content-between gap-3">
    <div><h2 id="cm-world-title" class="h4 fw-bold mb-1">Trailhead users per 100,000 people</h2><p class="cm-sub text-body-secondary mb-0">Monthly active users of the Trailhead hiking app, September 2026. Sample data.</p></div>
    <div class="cm-switch btn-group" role="group" aria-label="View as"><button class="btn" type="button" data-show="map" aria-pressed="true">Map</button><button class="btn" type="button" data-show="table" aria-pressed="false">Table</button></div>
  </div>
  <div class="row g-4 mt-0" data-view="map">
    <figure class="col-12 cm-main mb-0">
      <div class="cm-frame" data-map-frame>
    <svg viewBox="0 0 1000 433" role="img" aria-label="World map shaded by active users per 100,000 people. Norway is highest at 412, Egypt lowest at 18. All figures are in the table view.">
      <path class="cm-none" d="M988 309l1 0-1 2-3 0 2-2zM994 304l0 2-4 1 0-1zM594 256l11 7 0 1 4 4-2 4 2 3-1 5 3 6-8 4-8 0-2-7-2-1-6-3-3-5-1-7 4-4 0-3 1-2-2-2zM477 164l0 5-9 0 0 8-3 1 0 6-11 0 0 1 0-1 6-1 2-7 4-3 3-7 7-1zM643 119l-3-11 6-2 10 6 7 0 4 2 1 3 1 0 1 3 3 0 1 2 6-6-1 3 7 2-2 2-2 0-2-1 0-1-3 0-1 4-2 0-1 1 3 1 1 3-1 3-4-1 0-2-7-3-5-3-2-4-4 0-2-3-4-2-3 3 0 1zM892 261l9 4 4 5 4 2 1 2-3 0 1 2 4 6 1 0 0 1 4 3-2 1-6-2-5-6-3-2-4 2 0 3-2 1-5-1zM924 264l1 3-1 1-1-3-5-4 1 0zM920 271l-5 2-4-2 1-1 4 0 1-1 0 1 1 0 3-2 0-2 1 0 1 2zM929 270l3 5-2-1zM581 267l1 7 3 5-5 1-1 2-1 9 4 1 0 3-2 0-5-5-4 1-5-3-5 0-1-12-4-1-2 1-1 2-5 1-3-7-11 0 0-1 2-3 3-1 1 2 4-5 2-6 3-4 2-13 0-2 3-2 8 3 1-2 5-2 8 0 2 3 4-1 4 3-1 4 2 1-4 5-1 6-1 5zM616 258l-2-3 0-11 2-4 5-3 4 0 7-10 3-5 0-6 6-2 0 4-4 13-8 13-9 8zM568 226l-3-2 0-4-2-3-2-5-1 0 3-10 3 0-1-12 0-2 3 0 0-6 32 0 2 11 3 2-4 3-1 8-1 6-4 7-1 6-2-11-2-1-1 1 0 3-2 4-4-1-3 2-6 0-3-3-2 1-1 4-2 1zM565 190l1 12-3 0-3 10 1 0 2 5-3 2-2 3-6 2-2 3-8 2-1-5-2-2 0-2 4 1-3-10 0-1-2 0-1-4 1-4 4-3 1-12-2-3-1-5 3-2zM304 189l0 6-8-1 1-1 5 0-1-3-1-1zM304 195l0-6 5 0 4 4-1 1-5-1-2 3zM288 166l3 1-3 1zM291 166l2 1-1 2zM289 171l2 3-1 2-2-2zM353 419l5-2 3 1-4 2-1-1-2 1zM415 3l16-2 21 0 10 1-19 2 15 0 2 0-3 2 14-2 6 1-15 3 5 0-5 3 0 3 2 1-6 1 3 2 0 2-2 0 2 2-4 0 2 1-1 1-6 1 2 3-5-1 5 3 1 2-4 0-4-2 1 1-3 2 8 0-12 5-9 1-6 4-13 3-4 6-4 2 0 2-4 5-3 1-3-3-4 0-5-8 0-4-2-3 1-2-1-1 4-3 3-1 3-3-7 1-2 0 2-4 6 1-4-3-4 0 3-2-2-6-3-1 1-1-5-1-14 0-4-3 9-1-11-1 17-3 1-1-5-1 13-3 0-1 24-1 9 2-3-1zM846 281l7-1-7 3zM577 346l1 1-1 3-3 1-2-2 3-3zM347 350l2 0 9 6 2 2-1 2 1 2-4 3-7-1-2-2zM286 225l0 2-2 2 0-3-3-2-4 2 1 2-1 1-1 0-2-2-4-1 1-4 1 0 3 2 6-2zM272 222l-1 0-1 4-5-6 0 2-2-1 0-4 6 1zM269 218l-6-1-5-6 1 0 8-6 4-1zM271 204l-4 1-8 6-1-1 0-2-4-2 4-4 9-1zM254 206l4 2 0 2-2 0-4-1zM246 206l2-5 4 0-3-4 2 0 0-2 5 0 0 7 2 0-4 4-2 3zM256 195l3-2-1 6-2 3zM332 236l-1 2-6 3-5-1 1 0 1 5 2 1-6 4-2 0-2-1-2-5 1-2-1-4 1-5-5 0-2-3-5 0-2-7-2 0 2-4 4-4-2 1 1 8 2-3-1-4 3-1 1-2 5 5 5-1 4 2 1-2 7 0-2 1 0 2 3 0 2 2 0 2 3 1-3 2 1 2-3 1 0 3zM343 247l-2-1-4 3-3-2-1-3 2-4-1-3-2-1-2-2 0-3 3-1-1-2 3-2 7 7-3 7zM349 245l-4 0-1 2-1 0-4-7 3-7 8 1-1 3 1 4zM319 193l2 1-1 1-4 0 1-2zM288 193l3 2-4 0-1-1zM277 178l11 2 6 6 4 1-10 2 2-2-3-1-1-3-8-2-1 0 1-1-9 2zM585 324l-5 0-4-2 0-3-5-4-2-5 5 0 5-6 4-1 0 1 3 0 4 2-1 12zM580 324l-7 5-4 6-4 0-2-1-5 5-2 0-2-7 0-9 3 0 0-12 6-1 1 2 5-2 2 5 5 4 0 3zM554 332l-1 12-4 2-3-1-1-2-1 2-3-5-2-16-7-16 5-1 2 2 11-1 2 2 6 0 6-1 2-1 3 2-5 2-1-2-6 1 0 12-3 0zM454 209l-2-4 3-4 5-2 7 7 1 7-6-1-8 1 0-3 8-1-4-1zM468 213l-1-7 1-3 17 0-2-31 4 0 22 17 0 2 3 0 0 7-2 5-9 2-4 0-6 4-2 0-3 6-1 4-7 1-3-7-3 2-4-1zM454 185l0-1 11 0 0-6 3-1 0-8 9 0 0-5 10 8-4 0 2 31-17 0-1 3-7-7-5 2 1-13zM507 233l-2 0 0-10-3-6 4-3 2-1 2 2 0 5-2 5zM540 179l1 5 2 3-1 12-4 3-1 4 1 4 2 0 0 1-1 2-3-4-2 2-4-1-5 1-4-1-2 1-4-3-4 1-1 6-2-2-2 1 0-2-3-1-2-6 9-2 2-5 0-7 3-1 17-13 6 3zM507 233l1-8 2-5 0-5 1-6 4-1 4 3 2-1 4 1 5-1 4 1 2-2 3 4 1 2-2 3-5 12-2 1-3-1-2 2-2 5-8 2-4-6zM540 211l3 10-4-1 0 2 2 2 1 5-2 4 0 4 4 8 0 2-8-2-5 0-4 0 0-2-3-6 2-5 2-2 3 1 2-1 5-12 2-3-1-2zM502 217l3 6 0 10-2 1-3-17zM500 217l3 17-8 4-3-1-1-4 2-7-1-4 0-5zM478 220l7-1 3 3 4 0 1 4-2 7 1 4-5-1-8 3 0-5-3-2 1-4 1-3-1-4zM462 212l6 1 0 1 4 1 3-2 3 7-1 1 1 4-1 3-3 1-1-4-1 1-3-6-3 1-3 3-5-7 4-2zM454 213l8-1 0 3-4 2zM477 228l-1 4 3 2 0 5-4-2-7-6 4-5 1-1 1 4zM463 224l3-3 3-1 3 6-4 5-4-3zM485 219l1-4 3-6 2 0 6-4 4 0 2 6 3 1 0 2-4 3-2 0-8 0 0 5-4 0zM576 236l-8 0-5 2-1 2-8-3-3 2 0 2-3 0-4 4-4-8 0-4 2-4 8-2 2-3 6-2 2-3 3-2 2 3 0 4 3 2zM551 241l-2 13-3 4-2 6-4 5-1-2-3 1-1-1-2 2-2-4 2-1-1-2 3-2 0-1 4 2 1-2 0-5-2-1 2-4-3-1-1-3 8 2 0-2 4-4zM531 245l5 0 1 3 3 1-2 4 2 1 0 5-1 2-4-2 0 1-3 2 1 2-2 1-7-9 2-7 5 0zM527 245l4 0 0 4-5 0zM585 279l6 3 2 5-3 10 1 1-8 2 0 3-4 1-5 6-5 0-3-2-2 1-4-5 0-10 6 0 0-6 5 3 4-1 5 5 2 0 0-3-4-1 1-9 1-2zM591 282l2 1 2 7 0 6 3 4 0 4-2 3-2-2 1-5-4-2-1-1 3-10zM595 290l8 0 8-4 1 14-1 2-3 4-6 3-7 7 1 13-1 3-7 4 0 3-2 0 0-3 0-5-1-7 4-6 1-12-4-2-3 0 0-1 0-3 8-2 4 2-1 5 2 2 2-3 0-4-3-4zM586 339l-2 2-2-2 2-3 2 0zM536 268l-2 3-1-2 2-2zM534 272l11 0 3 7 5-1 1-2 2-1 4 1 1 12 5 0 0 6-6 0 0 10 4 5-6 1-6 0-2-2-11 1-2-2-5 1 1-9 5-10zM585 260l0 3-4 4 0-5zM594 147l0 1-1 0-1 2 0 2 2-1-1 7-2-6 1-6 2-1zM594 145l-2 1 2-5 2 1zM637 293l1 10 0 1-1-2-1 1 0 4-9 26-5 2-3-2-2-7 1-5 3-6-1-6 2-4 5-2 4-3 1-3 1 0 3-6zM594 151l-2 1 0-2 1-2 1 0zM454 209l4-1 4 1-8 1zM525 155l-1-6-4-4 2-11 3-2 1 1 0 1 3-1-1 2 0 5-1 2 3 4 0 2-4 4 0 2zM477 164l0-4 9-4 4-3 0-2 7-2-3-10 10-4 18-1-2 11 4 4 1 6 1 4-1 10 3 5 1 0 3 3-17 13-3 1-3 0 0-2-22-17zM594 148l0-1 3 1 5-3 2 4-6 2 3 3-1 2-4 3-3-1 1-7zM639 175l7 0 5-6 0 1 1 2-1 0 0 3-1 5-9-1zM637 173l1-4 1 4zM628 156l1 5-5-2 2-3zM604 149l-2-4 5-3 0-7 3-2 6 0 4 5-1 5 6 5 4 8-1 0-2 0-2 3-5 0-8-7zM650 180l1-5 0-3 1 0 3 4 4 1 3 4-3 6-1 1 0 4-3 1-1 2-2 0-2 3-4 1-4-7 8-4 1-6zM958 303l0-3 1 3zM783 213l-1-3 1-3 7 0 2 1 1-2 2 1 1 6-4 2 1 2-5 2-2-1zM795 207l-2-1-1 2-2-1 0-4-3-3 0-3-3-3-2 0-5 2-1-6-2 0-1-3 2-3 2 1-1-4 1-1 4 6 3 0 2 3-2 2 3 2 8 8zM773 187l-5 2-2 4 5 8-1 3 5 10-2 7-2-11-5-12-4 4-3-1-1-7-3-5-4-3 1-4 1-1-1-6 2 1 1-3 0-6 3-2 2 0 0-3 2-1 2 3 1 5-2 3 1 4 3-1 1 3 2 1-1 2 4 2 2-1 0 2zM831 116l1 1-1-1-1 3 1 2-4 3 1 2 3 2-5 3-4-1 0-4-3-2 3-6 4 1-1-2 3-1 1-2zM714 94l9-4 14 3 1-2-1-2 1-3 9 2 1 2 4 2 8-1 5 3 6 1 5-2 2-2 6 1 0 6 1 1 6-1 6 4-6 0-2 3-5 3-4-1-1 2 3 3-3 2-10 3-2 2-12-4-11 0-5-5-12-3-2-5-9-6zM752 182l-1 4-3-7-3 0 0 3-3 0-2-7-2-1 2-3-3-1 1-3 4 2 0 2 7 1-2 5 1 2 1-2zM745 163l2 3-6 1-3-2 3-4zM703 138l-2 3-7 0-1 1 3 5 3 2-7 14-3-1-3 4 6 8-6 0-2 2-5-5-13 1 0-4 4-2-2-4-6-5 5 1 9-2 1-4 6-2 0-2 2-3-2-2 3 0 1-4-1-3 1-1 8-2 4 4zM672 132l4 1 3 0 4-4 4 5 3-2 4 0 1 1-8 2-1 1 1 3-1 4-3 0 2 2-2 3 0 2-6 2-1 4-9 2-5-1 2-3-5-8 1-8 4 0 1-1 3-1 0-3 2-2zM676 133l1-3-1-3-3-1 1-1 2 0 1-4 3 0 0 1 2 1-4 0 0 2 11 1 2 2 2 1 1 3-4 0-3 2-4-5-4 4zM680 116l2-1 4 1 1-3 13 2 3 1-4 4-3 0 0 2-5 1-2 3-11-1 0-2 4 0 2 0 2-2-7-2zM633 118l4-2 6 3 2 0 0-1 3-3 4 2 2 3 4 0 2 4 5 3 7 3 0 2-2-1-2 2 0 3-3 1-1 1-4 0-1-3-11-5-5 0-3 3-1-6-3-1 1-2-2 0 0-3 3 1 2-1-4-4-2 1 1 2zM629 156l-4-8-6-5 1-5-4-5-3-7 2-1 4 3 1 0 3-3 1 3 2 1 1 2 5 3 4 0 4-1 3-3 5 0 11 5 1 3-1 8 5 8-2 3 6 5 2 4-4 2 0 4-12-2-3-5-4 2-3-1-6-3-5-8-3 0zM594 147l0-2 2-3-2-1 0-4 1-3 8 0 7-1-3 2 0 7-5 3-5 3zM620 128l-1 0-2-3-2 0-3-2-1-3 4 0zM566 73l7 2 0 2 5 5-3 1 1 3-2 0 0 2-13-2-4 1-1-7 5-1 2-3-1-1zM554 97l2 2-4 5-2 0-3 1-6-2-1-1 2-4 2 1 7-3zM565 98l3-1 3 1 3 4 0 1-2 0-2 3 0-4zM562 75l1 1-2 3-5 1-2-1 0-2-4-1-1-2 9-1zM563 69l3 4-4 2-4-2-9 1 1-5 2-1 2 3 2 0 0-3zM564 63l-1 6-7-1 0-1-2-1-1-2zM557 110l1 1 6 1 4-2 4 2-2 3 1 2-5 1 0 1-8 0-1-3 1-3zM554 121l-2 4-2-2-1-5 2-3 1 3zM541 103l6 2 1 2 0 1-8-1-1 1 8 7 0 1-7-4-3-5-1 0-1 1-1-2 4 0 1-2zM515 90l0 2-1 1-8-5 2 0 4-1zM951 321l3 3-3 0-4-7zM948 286l1 1-2 0-1-2zM945 284l-3 0 0-2zM942 278l1 2-5-3zM727 229l-1 3-3 1-2-7 1-5zM829 174l-1 8-3-5 2-6zM469 43l-1 2 2 2-11 5-9-2 2-1-4-1 4-2-5 0 2-2 3-1 3 2 4-1 2 1zM618 118l4 2 1-2 6 5-2 0-1 6-2-1-1-3-3 3-5-8 4 0zM619 128l-4-3 2 0zM601 113l14 3 3 2 1 2-4 0-4 0-5-1-1-4zM833 212l-2-3 4 2 0 2zM839 221l1-3 1 0 0 2 2-3 0 3-3 4zM850 226l1 4-1 3-1-4-2 2 1 4-4-2 0-4-2-2-4 4 0-1 1-3 3-2 1 1 4-2 0-3 2 2zM828 223l-4 3 6-10 1 3zM835 194l1 4-2 3 1 6 6 1 1 4-3-3-1 1-2-2-4 0 1-2-1-1 0 1-3-3 1-10zM837 216l-1-2 4 1 0 2-3 2zM846 214l1 3-2-1 1 3-1 1-2-4 2 0 0-1-2-3zM777 232l3 1 1 1 2-1 4 4 0 7 3 3-2 2-6-5zM827 239l-5 0-4 9-2 1-3-1-6 2-2-4 4 1 0-3 5-1 3-5 1 2 2-1 0-4 5-5 1 3 5 2zM820 235l0 4-2 1-1-2zM534 103l6-1 1 1-2 1-1 2-4 0 1 0zM555 95l-1 2-3-1-7 3-2-1 0-2 4-2zM600 206l1-8 4-3 3 6 11 11-2 0-7-6-4 0-2-1-1 2zM341 318l2 6 6 1 1 5 3 0 0 6 0 2-2 3-8-1 1-6-8-4-6-6 1-8 8-1zM642 192l4 7-2 1-1 3-9 5-12 4-2 0-1-2-2-6 0-4 2-4 9 1 1 1 5-5zM586 139l4-1-1 2zM586 139l3 1-3 1-2-2zM568 182l0 6-3 0 0 2-22-13-3 2-2 1-6-3-3-3-1 0-3-5 1-10-1-4 1-1 0-2 4-4 0-2 10 3 2 3 9 3 2-2-1-3 3-3 5 0 7 4-1 5zM632 227l-7 10-4 0-5 3-3-1-3 3-4-1-6-3-2-3-4-6-3-1 3-3 1-6 4-7 1-6 3 1 1-2 2 1 4 0 7 6-2 5 3 1 0 1 3 4zM617 212l2 0 0 2-1 1 1 1-1 2-3-1zM635 216l0 6-3 5-11-4-3-4 0-1 1-2 3 3zM594 256l-10 0-2 1 1-6 4-5-2-1 1-4 7-1 1-1 3 8-3 5zM584 256l2 2-1 2-4 2 1-5zM547 115l-8-7 1-1 8 1 1 3-1 1zM557 116l1 3-4 2-2-3 3-2zM547 105l3-1 7 6 1 3-1 3-2 0 0-1-2-2-2 2-3-3 1-1-1-3 0-1zM551 115l-2 3-2-2 0-1 1-3zM552 118l-1-3 2-2 2 2 0 1zM330 218l2 0 0 2-3 0zM586 241l-4-3-4 1-2-3-8-10-2-1 2-1 1-4 2-1 3 3 6 0 3-2 4 1 2-4 0-3 1-1 2 1 2 11-3 3 3 1 4 6-4 4-1 1z"/>
      <path class="cm-b4" data-tip="Norway: 412 per 100,000" d="M529 9l3-1 9 3-5 1-3 4-2 0-4-2 1 0-8-5zM565 35l-5 1 1-2-3-1-3 1-3 3-8-1-2 0 0 2-4-1 0 2-2 0-6 9 0 2-2 0-2 3 1 3 1 2 0 3-3 4-1-2-5 4-3 0-3-1-2-10 12-7 8-9 9-6 8-1 3-2 7-1 7 2-2 1zM551 8l-7 2-12-2 11-1zM548 13l-4 1-4 0 1-1-1-1 4 0z"/>
      <path class="cm-b4" data-tip="New Zealand: 388 per 100,000" d="M953 382l-5 4-2 1-1-1 3-3 0-2-2-1 7-7-1-9 1 0 2 2 0 7 1-2 0 3 1 1 5-1zM928 393l14-10-1 3 3-1-1 2-7 5 0 2-5 1-6 6-5 2-6-2 1-1z"/>
      <path class="cm-b4" data-tip="Sweden: 356 per 100,000" d="M525 65l3-4 0-3-1-2-1-3 2-3 2 0 0-2 6-9 2 0 0-2 4 1 0-2 2 0 6 3 2 6-4 0-2 2 1 2-7 5-1 4 4 4-2 3-2 1-2 7-3 0-1 2-3 1z"/>
      <path class="cm-b4" data-tip="Finland: 331 per 100,000" d="M560 36l0 2 4 2-2 2 4 3-1 2 2 3-1 1 4 2-6 7-12 2-4-2-1-6 1-2 7-5-3-2-2-6-6-3 8 1 3-3 3-1 3 1z"/>
      <path class="cm-b4" data-tip="Australia: 322 per 100,000" d="M877 384l1 0-5 8 0-1-3 2-2 0 2-9 3 1zM833 357l-6 2-2 3-10 0-6 4-4 0-3-3 4-6 0-9-1-11 1 1-1-3 2 2-1-6 4-8 0 2 8-6 12-3 4-5 3-6 1 3 1 0 0-2 1-1 1 0 5-7 4-1 3 4 3 0 0-2 4-6 6-1 0-2-2-1 2-1 7 4 4-1 1 1-3 4-3 5 12 9 2-1 3-8 2-8 3-6 2 12 2-1 2 3 0 13 5 4 1 7 3 0-1 3 4 6 0 3-1 6-7 12-12 13-3 5-13 6-2-2 1-2-5 3-7-3 0-6-3-1 2-4-5 2 6-7-7 6-2-1 0-6-6-4z"/>
      <path class="cm-b4" data-tip="Switzerland: 305 per 100,000" d="M524 100l-1 1 3 1 0 1-3 0-1 1-5 1-1-2-1 1 0-2 2-2 1-1z"/>
      <path class="cm-b3" data-tip="Canada: 284 per 100,000" d="M199 95l-4-4-4-2 2-4-2-2 1-6 3-3-2-2 0-6-2-4-6 3-1-3-4-1 24-27 8 3 17-4 0 1 4-2 3 3 4-2-1 2 7-1 11 2 1 2-4 1 4 1 8-1 1 2 3-2-1-1 2-1 5 0 2 2 5 1 7 0 3-3 3 1-2 3 7-5-3-3 6-5 4 2 1 3-3 1 4 1-2 3 4-2 2 1-2 2 1 2 6-4 2-3 6 0 2 2-3 3-1 2-5 2-5 0-6 5-10 3-1 2-3 1-8 5-4 6 3 0 0 5 3 0 11 6 6 0-2 6 0 3 3 3 5-4 0-5-1-1 10-6 1-5-2-2 4-3 2-7 9 0 4 3 4 1-2 6 3 2 9-6 4 10-1 2 8 5 1 2 2 2-1 3-12 6-15 0-7 4-8 7 7-5 10-3 2 2-3 2 0 6 3 1 4 0 3-4 0 3 1 1-16 7-2 0 1-3 5-2-7 0-1-2 1-4-3-1-8 8-8 0-7 4-4 0-2 1 0 2-10 3-1-1 4-5 1-5-4-5-7-5-8 1-6-2-1-2-1 1zM313 55l5-2-4 2zM338 26l-2-1 2-1 7 1zM320 56l3-1-2 2zM314 20l-2 1-5 0 5-2zM315 11l2 1-1 1-5 0 1-2zM323 22l-7-1 1-3-7-2 2-1 9 1 1 1-1 1 3 1 13-1 4 2-5 2zM286 13l2 0-1 1-6 0zM288 11l2 1-6 0zM366 88l-4 5 1-1 2 0-1 1 5 1-1 3 2-1 0 4-2 2-2 0 0-3-3 3-2 0 2-2-2-1-7 0 1-2 6-7 4-3 1 0zM317 47l6 4-2 1-4-2-7 3 0-2-3 0 6-6zM339 27l2-1 6 3 0 1 4-1 1 2 5 1 2 4-5 1 8 2 2 3 3 0-7 5-4-4-3 1-1 1 4 4 1 3-2 2-7-3 4 5-10-3-2-1 1-1-5-3-7 2-1-1 2-3 9 0 5-5 0-2-6-2 1-1-4-3-5 1-15-2-1-1 3-1-3 0 1-2 6-4 6-1-3 2 1 2 3-2 6-1 2 2-2 2zM310 23l8 0-14 5 2-4zM258 18l11-4 6 0-4 3zM185 80l3-1-4 6-1-4zM300 10l8 1 0 2-10-1 3-1-2 0zM197 97l-5-1-2-3-2-1 0-2 6 1zM257 22l7 0 2 2-21 7 0-1-4-1 9-5-1-2zM287 18l4 0-3 2-13 2-3 0 1-1 5-1-12 0 8-3 10 2-1-2 3-1 2 0zM284 25l1 1-1 5 5 2-5 2 1 1-2 1-6-1-17 2 0-2-5 0 0-2 11-1-11-1-1-1 6-1-6-1 6-3 7-1 1 0-2 1 5 0 2 1 4-1 1 1-1 2 2-1 1-3zM295 26l-1-1 4-2 6 1-3 2 2 1-2 2-6 1-4-3zM285 24l4 0-4 2-1-2zM308 16l0 1-3 3-4 1-2-1 2-1-4 0 2-2zM321 7l8-1 7 2 1 2-8 2-7 0-1-1 3-1-5-1zM332 4l26-2 30 1-13 2 4 0-13 4-12 1 3 0-2 1 1 1-11 3 3 1-6 1-17 0 4-2 1-2 5 1-4-2 8-2-2-1 0-1 10-1-10 0zM339 41l-4 0 2-2 3 0zM298 35l0 1-2 1-6-2 5-2zM343 92l4 1 2 2zM342 101l0 2 4 0-3 2-2-2z"/>
      <path class="cm-b3" data-tip="Austria: 268 per 100,000" d="M542 98l-2 4-6 1-4-2-4 1-3-1 1-1 8 0 0-3 1-1 2 1 2-2 5 1z"/>
      <path class="cm-b3" data-tip="Denmark: 262 per 100,000" d="M523 77l-3 0-1-6 5-3 0 3 1 1-2 3zM529 73l1 2-1 2-3-3z"/>
      <path class="cm-b3" data-tip="United Kingdom: 241 per 100,000" d="M485 80l-3 0 0-4 5 2zM493 82l0-2-2-2-3-2 0-2-1 2-1-5 2-5 5 0-2 3 4 0-2 5 2 0 6 9 3 1-1 2 0 2-2 2-8 0-6 2-1 0 6-4-4-1-1-1 3-1-1-2 0-2z"/>
      <path class="cm-b3" data-tip="Ireland: 228 per 100,000" d="M485 80l1 2-2 3-5 2-3-1 2-3-1-3 5-4 0 4z"/>
      <path class="cm-b3" data-tip="Germany: 214 per 100,000" d="M534 80l2 9-6 2 3 5-1 1 0 3-8 0-6-1 2-4-5-1 0-2 0-2-1-4 2-1 0-4 5-1-1-3 3 0 3 3 4-2z"/>
      <path class="cm-b3" data-tip="United States: 207 per 100,000" d="M199 95l68 0 1-1 1 2 6 2 8-1 7 5 4 5-1 5-4 5 1 1 10-3 0-2 2-1 4 0 7-4 8 0 8-8 3 1-1 4 1 2 0 1-10 6-2 2 2 2-10 3 4 0-5 0-4 6-1-2 0 4-3 4 1-3 0-4-1 4-2-1 2 1-1 8-17 13-1 5 1 10-2 5-2 0-1-2-2-6 1-2-2-5-4 1-2-2-9 0 0 4-10-2-4 1-8 5-1 6-5-1-3-10-4-1-2 2-2-1-5-8-12 2-8-5-7 1-2-5-5-2-2-18 3-8 6-9 2-8 4 0 0 3zM76 188l2 2-3 2-1-3 1-2zM122 61l2 0-3 1-1-1zM146 68l2 1-7 2zM204 34l-24 27 4 1 1 3 6-3 2 4 0 6 2 2-3 3-2-2 1-2-1-3 1-3-6 0-4-4-8-1-5-3-3 1-2 2-10 2 8-6-13 6 0 1-4 2-15 7-19 4 21-7 9-6-6 1 0-1-2 1 1-2-5 2 3-3-1-1-3 0-2-2 2-1-1-2 3-1 6-3 10-2 0-2 3-1-10 1-3-1 0-3 10-2 2 0-2 1 5 0-2-5-2-1 3-1 28-7 2 0 0 2zM121 51l5 1-3 1-3-1z"/>
      <path class="cm-b2" data-tip="South Korea: 196 per 100,000" d="M826 131l5-3 5 6 1 6-6 2-3-8 1 0z"/>
      <path class="cm-b2" data-tip="Netherlands: 189 per 100,000" d="M516 81l0 4-2 1 1 4-3-3-4 1 3-6z"/>
      <path class="cm-b2" data-tip="France: 176 per 100,000" d="M357 239l-4 7-4-1 1-4-1-4 1-3 3 1zM515 94l5 1-2 4-1 1-2 2 0 2 1-1 1 2 2 7-3 2-5-1-3 1 0 2-7-1-6-2 2-8-4-5-4-2 0-2 7 0-1-3 3 1 5-2 1-3 2-1 8 5zM522 115l2-1 0 5-2 0z"/>
      <path class="cm-b2" data-tip="Japan: 173 per 100,000" d="M865 126l-1 4 3 7 0 2-8 2-2 4-3-4-10 2 3 3 1 5-2 2-1-2-1-3-4-3 3-1 3-6 8 0 0-6 3 2 3-5-2-9 2-1zM864 111l1-1 2 3-3 1 0 3-6-2 1 4-3 0-2-4 0-2 3 0-3-7zM848 145l3-3 3 2-1 2-2-1 0 2z"/>
      <path class="cm-b2" data-tip="Czechia: 164 per 100,000" d="M536 89l10 5-4 2-5-1-2 2-2-1-3-5z"/>
      <path class="cm-b2" data-tip="Spain: 158 per 100,000" d="M481 133l1-3-1-5 3-6-1-1-3 0-1-2-2 2-1-4 4-2 15 1 6 2 7 1 0 2-3 2-3 0-3 6 1 2-6 6-5 0-3 3-3-3z"/>
      <path class="cm-b2" data-tip="Chile: 152 per 100,000" d="M336 421l2 7 4 0-2 3-7-2-12-7 10 4 1-4zM309 309l4 6 0 3 3 8 2 0 0 4-3 2 2 7-3 5-1 10 4 9 0 6-2 2 2 6-1 1 1 11 5 8-1 1 1 12-1 1 1 4 3 0 2 5 8 0-4 2 0 3-1 0-10-5-5-11 0-3 1-2-4-1 2-3-1-5 3 1 0-7-2-1 0 4-2 0 0-13-3-6 1-1 2-15-3-11 0-24-1-10z"/>
      <path class="cm-b2" data-tip="Portugal: 142 per 100,000" d="M477 118l2-2 1 2 3 0 1 1-3 6 1 5-1 3-4 1 0-5-2-1 3-7z"/>
      <path class="cm-b2" data-tip="Italy: 131 per 100,000" d="M526 102l4-1 4 2 1 3-4 1 1 4 6 6 2 0 0 2 7 4 0 1-4-2-1 2 2 2 0 1-2 3-1 0 0-3-2-3-11-8-2-5-4-1-3 2-2-7 5-1 1-1 3 0zM538 130l2-1-1 6-7-4 0-1zM522 121l1-1 2 2 0 4-2 1-2-6z"/>
      <path class="cm-b2" data-tip="Nepal: 126 per 100,000" d="M736 163l1 5-14-4-9-4 2-5 3 1 10 6z"/>
      <path class="cm-b2" data-tip="Poland: 118 per 100,000" d="M556 80l1 7 1 4-3 4-9-1-10-5-2-9 8-3 5 1 7 1z"/>
      <path class="cm-b2" data-tip="Greece: 104 per 100,000" d="M569 139l-4 1-4-1 1-1zM558 119l8 0 0-1 2 1-1 2-6 0 2 2-2 1-3-1 2 3-1 1 3 2 0 2-2-1 1 2-2 0 1 3-4-1-4-9 2-4z"/>
      <path class="cm-b1" data-tip="Argentina: 96 per 100,000" d="M336 421l3 4 7 3 0 1-4-1-4 0zM347 350l0 12 5 8-1 6-4 2-8 0 2 6-4 1-2-1-1 1 1 3 2 1 1-1 1 2-3 3 0 5-2 0-2 1 0 3 6 3 0 3-3 1 0 4-3 3 3 4-8 0-2-5-3 0-1-4 1-1-1-12 1-1-5-8-1-11 1-1-2-6 2-2 0-6-4-9 1-10 3-5-2-7 3-2 0-4 2-3 4 1 2 2 0-3 4 1 6 6 8 4-1 6 8 1 2-3 0-2 1-1 2 2 0 2z"/>
      <path class="cm-b1" data-tip="Romania: 92 per 100,000" d="M570 106l4 1-2 1 0 4-4-2-4 2-6-1-1-1-7-6 2 0 4-5 5 0 4-1 5 4z"/>
      <path class="cm-b1" data-tip="South Africa: 87 per 100,000" d="M544 345l1-2 1 2 3 1 4-2 1-12 2 7 2 0 5-5 2 1 4 0 4-6 7-5 5 0 1 7 0 5-2 0-2 3 2 2 2-2 2 0-2 6-12 13-6 4-9 0-6 3-5-2-1-5 1-3zM577 346l-2 0-3 3 2 2 3-1 1-3z"/>
      <path class="cm-b1" data-tip="Turkey: 79 per 100,000" d="M616 133l-6 0-7 1-8 0-1 3-1-1 1-2-4 0-1 2-4 0-3-2-2 0-3 2-5-2-4-5 1-2-2-2 3-3 4 0 1-2 4 0 6-3 4 0 9 4 5-1 3-1 5 1 1 3 3 2-2 1zM566 118l5-1 2 3-3 0-3 3 0-2 1-2z"/>
      <path class="cm-b1" data-tip="Brazil: 71 per 100,000" d="M360 362l-1-2 1-2-2-2-9-6-2 0 9-11 0-2-2-2-1 1 0-6-3 0-1-5-6-1-2-6 2-7-3-3 0-3-5 0-2-8-10-4-4-3 0-6-3 1-5 3-3 0-3 0 0-5-2 2-6-2 1-1-3-5 2-3 1-4 6-4 2 0 1-10-1-5 2 0 0-1-2-1 0-2 5 0 1-1 2 3 2 1 2 0 6-4-2-1-1-5-1 0 5 1 6-3 1-2 2 1 1 3-2 4 1 3 3 2 4-3 2 1 1 0 1-2 4 0 4 1 4-7 1 0 2 8 1 0 0 2-2 3 1 1 5 0 0 4 2-2 8 3 1 3 3-1 10 2 8 6 4 1 3 7-1 6-10 13 0 15-4 13-3 4-7 1-7 5-2 3-1 9z"/>
      <path class="cm-b1" data-tip="Ukraine: 67 per 100,000" d="M576 86l5-1 2 3 2 0 1 2 12 3 0 6-2 0-1 2-6 2-2 1 0 1-4 0-4-1 0-2-3 1-2 4-4-1 2-3 2 0 0-1-3-4-3-1-3 1-4 1-5 0-2-2 1-2 3-4-1-4 4-1 13 2 0-2z"/>
      <path class="cm-b1" data-tip="Mexico: 64 per 100,000" d="M191 148l7-1 8 5 12-2 5 8 2 1 2-2 4 1 3 10 5 1-4 11 3 12 4 2 8-2 2-1 2-6 9-2 1 3-4 8-1-1-3 2-5 0 0 2-2 0 3 4-4 0-2 5-4-5-2 0-5 1-18-8-4-3-1-4 2-3-1-5-7-9 0-3-5-8-1-7-1-1-2-1-2 5 5 12 1 7 3 3-2 2-5-6 1-4-6-6 3-2-3-4z"/>
      <path class="cm-b1" data-tip="Ecuador: 61 per 100,000" d="M291 253l-1 5-3 3-3 1-4 7-1-2-2 0 0-3 1-3 0-1-1 1-2-1 0-4 3-6 3-2 4 3 3 0z"/>
      <path class="cm-b1" data-tip="Peru: 58 per 100,000" d="M306 266l-2 0-6 4-1 4-2 3 3 5-1 1 6 2 2-2 0 5 3 0 3 5-2 8 2 5-2 3-1 3-17-12-12-24-4-4 1-1-2-3 3-4 0 3 2 0 1 2 4-7 3-1 3-3 1-5 4 4 2 3 6 0 2 1-1 4z"/>
      <path class="cm-b1" data-tip="Bolivia: 55 per 100,000" d="M308 288l3 0 5-3 3-1 0 6 4 3 10 4 2 8 5 0 0 3 3 3-2 7-2-3-8 1-1 8-4-1 0 3-2-2-4-1-2 3-2 0-3-8 0-3-4-6 2-3-2-5 2-8z"/>
      <path class="cm-b1" data-tip="Russia: 54 per 100,000" d="M674 6l8 1 7 2 1 2-13-1-6-2zM695 10l7 2-10 1 0-3zM773 18l14 1 1 2-10 0-6-1-1-2zM794 20l6 0-5 1-5-1zM783 25l3-2 5 2zM584 7l12 0-7 1zM554 79l-7-1 0-1 3-1 4 1zM608 24l4-3-1-1 9-3 13-1 2 1-18 5-4 5 2 2 5 3-9-1-5-1 0-2 1 0 0-2 3-2zM840 81l14 14-4-1 1 5 6 5-3-2 0 3-2-3-8-13-6-7 1-2-2-1zM832 117l-1-1-1-2 2 0-4-6 1-1 4 0-1-10-5 2-4 0-7-5-5-1-10-10-7-2-5 1-1 1 2 3 0 6-2 2-4-2-6-1-2 2-5 2-6-1-5-3-8 1-4-2-1-2-9-2-1 3 1 2-1 2-14-3-9 4-12-5-4 0-4-1 0 1-13-10 1-1-7 3-1-1-5-1-2-3-5-1-8 4-8 1-1 1 2 2-3 3 5 2 0 2-4 0-8-1-2 1-9-3-4 0-4 3 0 2-3-1-1 6 4 2 4 4-5 6 6 9-1 2-4-2-3-2-14-3-9-6 3-3-2-1 4-2-2 0 1-2 2 0 0-6-12-3-1-2-2 0-2-3-5 1-1-3 3-1-5-5 0-2-7-2-3-4 1-6 2-1-2-2 6-7-4-2 1-1-2-3 1-2-4-3 2-2-4-2 0-2 5-1 2-1 10 2 11 4 1 2-6 3-11-2 4 2 1 4 5 2-2-3 1-1 6 2 2-1-2-2 4-3 4 1 1-2-4-5 6 1 2 2-3 0 1 2 2 1 3-1 0-2 11-3 1 0-1 1 10-1 3 1 2-2-3-1 1-1 19 5 1-2-6-2-3-4 4-6 6 1 1 2-1 2 4 2 1 4 3 2-2 6 3 0 3-4-2-2 0-2-4-1 1-3-4-2 2-2-1-2 3 1 0 3 3 0-2-1 3-2 9 2-5-5 12-1-3-1 1-2 11-2 14-1 0-2 4-1 8 3 7-1 8 2 1 2-6 2 7 1 3 2 3-1 17 2-1-2 8 0 16 7-1-2 4 1 12 0-4-3 2-1 20 2 11 3 13 0 8 4 14 0 7 2 1-1-4-3 12 1 12 2 16 13-6-5 3 3-1 2-3-1 11 7-4-1-6 3-3 4 1 1-5-2-4 2-2-1-1 2-4-1 1 5 5 2 3 4-2 0 2 3 2 1-3 2 2 3-3 1 2 3-2 3-13-14-3-4-1-3 3-1 4-9-2-4-3 1 1 2-2 3-6-3-4 1-2 4 4 2-8 1-1-2-4 0-2 1-14 1-7 12 9 3 1-1 3 0 6 3 6 15-1 7-3 9-2 2-4-2zM871 29l2 2-3 0zM583 105l4 0 4 1 0 1-6 3-1-1 0-1-3-1z"/>
      <path class="cm-b0" data-tip="Colombia: 49 per 100,000" d="M314 249l-2-3-1 1-5 0 0 2 2 1 0 1-2 0 1 5-1 10-2-1 1-4-2-1-6 0-2-3-4-4-3-2-3 0-4-3 1-4 4-4-2-11 2-2 0-2 5-3 2-5 4 0 5-4 2 1-1 1-4 4-2 4 2 0 2 7 5 0 2 3 5 0-1 5 1 4-1 2z"/>
      <path class="cm-b0" data-tip="Thailand: 47 per 100,000" d="M790 207l-7 0-1 3 1 3-5-1 0-2-2 0-2 11 4 8 5 4-2 1-1-1-3-1-4-6-1 2 1-7 2-7-5-10 1-3-5-8 2-4 5-2 1 3 2 0 1 6 5-2 2 0 3 3 0 3 3 3z"/>
      <path class="cm-b0" data-tip="Kenya: 44 per 100,000" d="M609 268l-4-4 0-1-11-7 0-4 3-5-3-8 4-4 2 3 6 3 4 1 3-3 3 1-2 4 0 11 2 3-4 3z"/>
      <path class="cm-b0" data-tip="Morocco: 41 per 100,000" d="M494 139l3 10-7 2 0 2-4 3-9 4 0 4-1 1-7 1-3 7-4 3-2 7-6 1 7-16 5-6 3 0 6-6-1-4 1-4 7-5 3-6z"/>
      <path class="cm-b0" data-tip="China: 38 per 100,000" d="M799 194l-2-1-1-3 2-1 4-1 1 1-1 4zM703 116l0-2 1-1-4-5 6-2 0-6 5 1 1-1-1-3 2 0 1-3 2 2 9 6 2 5 12 3 5 5 11 0 12 4 2-2 10-3 3-2-3-3 1-2 4 1 5-3 2-3 6 0-6-4-6 1-1-1 0-6 4 2 2-2 0-6-2-3 1-1 5-1 7 2 10 10 5 1 7 5 4 0 5-2 1 10-4 0-1 1 4 6-2 0 1 2-2-2-1 2-3 1 1 2-4-1-3 6-7 3 0-5-2-1-4 5-2 0-1 2 7 5 2-2 5 1 1 2-3 0-3 6 3 2 7 8 1 3-1 1 3 2 0 6-1 0-4 12-6 5-4 2-1-1-2 2-6 2 0 3-2 0 0-3-5-1-3-1-2-3-4-2-2 2-6 1-1 1 1 4-2-1 0-2-2 1-4-2 1-2-2-1-1-3-3 1-1-4 2-3-1-5-2-3-2 1-3-1 1-1-2-2-2 1-2-1-5 5-2 0-4-2-3 4-1-3-1 1-7-1-10-6-3-1-8-4-1-4 2 1 0-2-2-4-4-4-4-1-4-4-1-1-1-3-2-1-2-2 2-3 5-1 0-2 3 0z"/>
      <path class="cm-b0" data-tip="Kazakhstan: 33 per 100,000" d="M714 94l-1 3-2 0 1 3-1 1-5-1 0 6-6 2 4 5-1 1 0 2-3-1-13-2-1 3-4-1-2 1-6 6-1-2-3 0-1-3-1 0-1-3-4-2-7 0-10-6-6 2 3 11-6-3-4 2 0-3-3-1-4-5 3 0-1-2 5 0-2-5-4-1-5 2-4-4-4-2 1-6 3 1 0-2 4-3 4 0 9 3 2-1 8 1 4 0 0-2-5-2 3-3-2-2 1-1 8-1 8-4 5 1 2 3 5 1 1 1 7-3-1 1 13 10 0-1 4 1 4 0z"/>
      <path class="cm-b0" data-tip="Vietnam: 29 per 100,000" d="M788 219l5-2-1-2 4-2-1-6 0-6-8-8-3-2 2-2-2-3-3 0-4-6 6-1 2-2 4 2 2 3 3 1-4 3-1 5 10 13 2 11-10 10 0-4z"/>
      <path class="cm-b0" data-tip="Indonesia: 26 per 100,000" d="M892 261l-2 21-2-3-7 1 3-4-1-6-12-6-2 2 0-3-2-1 4-2-4 0-4-4 5-2 4 1 1 7 3 1 6-5zM846 281l0 2-2 2-3 1 2-3zM872 275l1-5 1 3zM827 239l-1 3 2 3-1 2 4 3-4 0-1 5-2 2-2 9 0-2-3 2-1-2-4-1-3 1-1-2-4 0 0-4-3-7 2-5 2 4 6-2 3 1 2-1 4-9zM859 262l3 1 1 2-8-1 1-2zM852 265l-2-2 3 0zM855 246l2 3 0 3-1 0 0 4-2-7zM841 250l4 0 2-3-1 4-12 1-1 2 3 3 7-2-1 1-1 0-4 3 5 11-2 1-1-1 2-3-3 1-1-1-1-6-2 1 0 8-2 1-1-1 1-6-2-2 3-11 3-3zM833 286l-4-3 3 0 2 2zM836 280l4-1 0 1-4 1-4 0 0-1zM827 280l2-1 1 2-7 1 4-3zM801 273l0 1 5 1 1-2 5 2 1 2 7 3-3 1-22-5 0-1-3 0 2-3zM790 256l1 4 2 0 2 3-2 8-3 1-5-6-9-14-2-5-10-12 6 1 10 10 2 0 3 2 3 4-1 3z"/>
      <path class="cm-b0" data-tip="India: 22 per 100,000" d="M760 162l0 3-2 0-3 2 0 6-1 3-2-1 1 6-1 1-3-5-1 2-1-2 2-5-7-1 0-2-4-2-1 3 3 1-2 3 2 1 2 7-1 1-5 0 0 5-4 2-7 8 0 1-4 3 0 17-2 1-1 2 1 1-2 1-2 3-3-3-10-23-5-17-5 1-4-3 1-2-1-1-4-3 2-2 6 0-6-8 3-4 3 1 7-14-3-2-3-5 1-1 7 0 2-3 4 4 2 4 0 2-2-1 1 4 8 4-2 5 9 4 14 4-1-5 1-1 1 3 3 2 6-1-2-3 2 0 5-5 2 1 2-1 2 2-1 1z"/>
      <path class="cm-b0" data-tip="Saudi Arabia: 21 per 100,000" d="M593 158l3 1 4-3 1-2-3-3 6-2 7 3 8 7 5 0 5 2 6 6 2 6 2 0 0 2 2 4 9 1 1 2-1 6-8 4-8 1-5 5-1-1-9-1-2 4-5-10-6-6-2-8-3-2-7-12-1 0z"/>
      <path class="cm-b0" data-tip="Egypt: 18 per 100,000" d="M600 182l-32 0-2-26 1-5 10 2 5-2 3 2 0-1 6 0 2 6-2 6-5-7 10 19 0 2z"/>
    </svg>
        <div class="cm-tip" data-map-tip hidden aria-hidden="true"></div>
      </div>
      <ul class="list-unstyled d-flex flex-wrap gap-2 column-gap-3 small text-body-secondary mt-3 mb-0" aria-label="Active users per 100,000 people">
        <li class="d-flex align-items-center gap-2"><span class="cm-sw b0" aria-hidden="true"></span><b class="text-body">Under 50</b> 11 countries</li>
        <li class="d-flex align-items-center gap-2"><span class="cm-sw b1" aria-hidden="true"></span><b class="text-body">50–99</b> 11 countries</li>
        <li class="d-flex align-items-center gap-2"><span class="cm-sw b2" aria-hidden="true"></span><b class="text-body">100–199</b> 12 countries</li>
        <li class="d-flex align-items-center gap-2"><span class="cm-sw b3" aria-hidden="true"></span><b class="text-body">200–299</b> 7 countries</li>
        <li class="d-flex align-items-center gap-2"><span class="cm-sw b4" aria-hidden="true"></span><b class="text-body">300 and over</b> 6 countries</li>
        <li class="d-flex align-items-center gap-2"><span class="cm-sw none" aria-hidden="true"></span>No data</li>
      </ul>
    </figure>
    <div class="col-12 cm-side">
      <h3 class="small fw-bold text-uppercase text-body-secondary" style="letter-spacing:.1em">Highest rates</h3>
      <ol class="list-unstyled d-grid gap-3 mt-3 mb-0">
        <li><div class="d-flex justify-content-between">Norway <span class="fw-bold">412</span></div><div class="progress cm-bar mt-1" aria-hidden="true"><div class="progress-bar" style="width:100%"></div></div></li>
        <li><div class="d-flex justify-content-between">New Zealand <span class="fw-bold">388</span></div><div class="progress cm-bar mt-1" aria-hidden="true"><div class="progress-bar" style="width:94%"></div></div></li>
        <li><div class="d-flex justify-content-between">Sweden <span class="fw-bold">356</span></div><div class="progress cm-bar mt-1" aria-hidden="true"><div class="progress-bar" style="width:86%"></div></div></li>
        <li><div class="d-flex justify-content-between">Finland <span class="fw-bold">331</span></div><div class="progress cm-bar mt-1" aria-hidden="true"><div class="progress-bar" style="width:80%"></div></div></li>
        <li><div class="d-flex justify-content-between">Australia <span class="fw-bold">322</span></div><div class="progress cm-bar mt-1" aria-hidden="true"><div class="progress-bar" style="width:78%"></div></div></li>
      </ol>
      <p class="small text-body-secondary mt-3 mb-0">Countries in grey have fewer than 1,000 users, too few to report. Borders: Natural Earth.</p>
    </div>
  </div>
  <div class="mt-4" data-view="table" hidden>
    <div class="cm-scroll table-responsive border rounded-3" tabindex="0" role="region" aria-labelledby="cm-world-cap">
      <table class="table mb-0 align-middle">
        <caption id="cm-world-cap" class="caption-top px-3 fw-bold text-body">Active users per 100,000 people, 47 countries</caption>
        <thead><tr><th scope="col">Rank</th><th scope="col">Country</th><th scope="col">Per 100,000</th><th scope="col">Band</th></tr></thead>
        <tbody>
          <tr><td class="text-body-secondary">1</td><th scope="row" class="fw-semibold">Norway</th><td class="fw-bold">412</td><td class="text-nowrap"><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td class="text-body-secondary">2</td><th scope="row" class="fw-semibold">New Zealand</th><td class="fw-bold">388</td><td class="text-nowrap"><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td class="text-body-secondary">3</td><th scope="row" class="fw-semibold">Sweden</th><td class="fw-bold">356</td><td class="text-nowrap"><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td class="text-body-secondary">4</td><th scope="row" class="fw-semibold">Finland</th><td class="fw-bold">331</td><td class="text-nowrap"><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td class="text-body-secondary">5</td><th scope="row" class="fw-semibold">Australia</th><td class="fw-bold">322</td><td class="text-nowrap"><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td class="text-body-secondary">6</td><th scope="row" class="fw-semibold">Switzerland</th><td class="fw-bold">305</td><td class="text-nowrap"><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td class="text-body-secondary">7</td><th scope="row" class="fw-semibold">Canada</th><td class="fw-bold">284</td><td class="text-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-body-secondary">8</td><th scope="row" class="fw-semibold">Austria</th><td class="fw-bold">268</td><td class="text-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-body-secondary">9</td><th scope="row" class="fw-semibold">Denmark</th><td class="fw-bold">262</td><td class="text-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-body-secondary">10</td><th scope="row" class="fw-semibold">United Kingdom</th><td class="fw-bold">241</td><td class="text-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-body-secondary">11</td><th scope="row" class="fw-semibold">Ireland</th><td class="fw-bold">228</td><td class="text-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-body-secondary">12</td><th scope="row" class="fw-semibold">Germany</th><td class="fw-bold">214</td><td class="text-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-body-secondary">13</td><th scope="row" class="fw-semibold">United States</th><td class="fw-bold">207</td><td class="text-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-body-secondary">14</td><th scope="row" class="fw-semibold">South Korea</th><td class="fw-bold">196</td><td class="text-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-body-secondary">15</td><th scope="row" class="fw-semibold">Netherlands</th><td class="fw-bold">189</td><td class="text-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-body-secondary">16</td><th scope="row" class="fw-semibold">France</th><td class="fw-bold">176</td><td class="text-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-body-secondary">17</td><th scope="row" class="fw-semibold">Japan</th><td class="fw-bold">173</td><td class="text-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-body-secondary">18</td><th scope="row" class="fw-semibold">Czechia</th><td class="fw-bold">164</td><td class="text-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-body-secondary">19</td><th scope="row" class="fw-semibold">Spain</th><td class="fw-bold">158</td><td class="text-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-body-secondary">20</td><th scope="row" class="fw-semibold">Chile</th><td class="fw-bold">152</td><td class="text-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-body-secondary">21</td><th scope="row" class="fw-semibold">Portugal</th><td class="fw-bold">142</td><td class="text-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-body-secondary">22</td><th scope="row" class="fw-semibold">Italy</th><td class="fw-bold">131</td><td class="text-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-body-secondary">23</td><th scope="row" class="fw-semibold">Nepal</th><td class="fw-bold">126</td><td class="text-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-body-secondary">24</td><th scope="row" class="fw-semibold">Poland</th><td class="fw-bold">118</td><td class="text-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-body-secondary">25</td><th scope="row" class="fw-semibold">Greece</th><td class="fw-bold">104</td><td class="text-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-body-secondary">26</td><th scope="row" class="fw-semibold">Argentina</th><td class="fw-bold">96</td><td class="text-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-body-secondary">27</td><th scope="row" class="fw-semibold">Romania</th><td class="fw-bold">92</td><td class="text-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-body-secondary">28</td><th scope="row" class="fw-semibold">South Africa</th><td class="fw-bold">87</td><td class="text-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-body-secondary">29</td><th scope="row" class="fw-semibold">Turkey</th><td class="fw-bold">79</td><td class="text-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-body-secondary">30</td><th scope="row" class="fw-semibold">Brazil</th><td class="fw-bold">71</td><td class="text-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-body-secondary">31</td><th scope="row" class="fw-semibold">Ukraine</th><td class="fw-bold">67</td><td class="text-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-body-secondary">32</td><th scope="row" class="fw-semibold">Mexico</th><td class="fw-bold">64</td><td class="text-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-body-secondary">33</td><th scope="row" class="fw-semibold">Ecuador</th><td class="fw-bold">61</td><td class="text-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-body-secondary">34</td><th scope="row" class="fw-semibold">Peru</th><td class="fw-bold">58</td><td class="text-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-body-secondary">35</td><th scope="row" class="fw-semibold">Bolivia</th><td class="fw-bold">55</td><td class="text-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-body-secondary">36</td><th scope="row" class="fw-semibold">Russia</th><td class="fw-bold">54</td><td class="text-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-body-secondary">37</td><th scope="row" class="fw-semibold">Colombia</th><td class="fw-bold">49</td><td class="text-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-body-secondary">38</td><th scope="row" class="fw-semibold">Thailand</th><td class="fw-bold">47</td><td class="text-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-body-secondary">39</td><th scope="row" class="fw-semibold">Kenya</th><td class="fw-bold">44</td><td class="text-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-body-secondary">40</td><th scope="row" class="fw-semibold">Morocco</th><td class="fw-bold">41</td><td class="text-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-body-secondary">41</td><th scope="row" class="fw-semibold">China</th><td class="fw-bold">38</td><td class="text-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-body-secondary">42</td><th scope="row" class="fw-semibold">Kazakhstan</th><td class="fw-bold">33</td><td class="text-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-body-secondary">43</td><th scope="row" class="fw-semibold">Vietnam</th><td class="fw-bold">29</td><td class="text-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-body-secondary">44</td><th scope="row" class="fw-semibold">Indonesia</th><td class="fw-bold">26</td><td class="text-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-body-secondary">45</td><th scope="row" class="fw-semibold">India</th><td class="fw-bold">22</td><td class="text-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-body-secondary">46</td><th scope="row" class="fw-semibold">Saudi Arabia</th><td class="fw-bold">21</td><td class="text-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-body-secondary">47</td><th scope="row" class="fw-semibold">Egypt</th><td class="fw-bold">18</td><td class="text-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section></div>
<div><span class="lbl">Tile grid map with the value in every tile</span>
<section class="card rounded-4 p-3 p-sm-4" aria-labelledby="cm-us-title">
  <h2 id="cm-us-title" class="h4 fw-bold mb-1">Trail club members per 10,000 residents</h2><p class="cm-sub text-body-secondary mb-0">One tile per state, placed roughly where the state is. Sample data.</p>
  <ul class="cm-tiles ps-0 mt-4 mb-0" aria-label="Members per 10,000 residents by state">
    <li class="cm-tile b4" style="grid-area:1/1"><span class="visually-hidden">Alaska: 41</span><b aria-hidden="true">AK</b><span aria-hidden="true">41</span></li>
    <li class="cm-tile b3" style="grid-area:1/12"><span class="visually-hidden">Maine: 37</span><b aria-hidden="true">ME</b><span aria-hidden="true">37</span></li>
    <li class="cm-tile b2" style="grid-area:2/7"><span class="visually-hidden">Wisconsin: 22</span><b aria-hidden="true">WI</b><span aria-hidden="true">22</span></li>
    <li class="cm-tile b4" style="grid-area:2/11"><span class="visually-hidden">Vermont: 46</span><b aria-hidden="true">VT</b><span aria-hidden="true">46</span></li>
    <li class="cm-tile b3" style="grid-area:2/12"><span class="visually-hidden">New Hampshire: 39</span><b aria-hidden="true">NH</b><span aria-hidden="true">39</span></li>
    <li class="cm-tile b4" style="grid-area:3/2"><span class="visually-hidden">Washington: 44</span><b aria-hidden="true">WA</b><span aria-hidden="true">44</span></li>
    <li class="cm-tile b3" style="grid-area:3/3"><span class="visually-hidden">Idaho: 33</span><b aria-hidden="true">ID</b><span aria-hidden="true">33</span></li>
    <li class="cm-tile b4" style="grid-area:3/4"><span class="visually-hidden">Montana: 48</span><b aria-hidden="true">MT</b><span aria-hidden="true">48</span></li>
    <li class="cm-tile b0" style="grid-area:3/5"><span class="visually-hidden">North Dakota: 9</span><b aria-hidden="true">ND</b><span aria-hidden="true">9</span></li>
    <li class="cm-tile b2" style="grid-area:3/6"><span class="visually-hidden">Minnesota: 26</span><b aria-hidden="true">MN</b><span aria-hidden="true">26</span></li>
    <li class="cm-tile b1" style="grid-area:3/7"><span class="visually-hidden">Illinois: 12</span><b aria-hidden="true">IL</b><span aria-hidden="true">12</span></li>
    <li class="cm-tile b1" style="grid-area:3/8"><span class="visually-hidden">Michigan: 19</span><b aria-hidden="true">MI</b><span aria-hidden="true">19</span></li>
    <li class="cm-tile b2" style="grid-area:3/10"><span class="visually-hidden">New York: 21</span><b aria-hidden="true">NY</b><span aria-hidden="true">21</span></li>
    <li class="cm-tile b2" style="grid-area:3/11"><span class="visually-hidden">Massachusetts: 27</span><b aria-hidden="true">MA</b><span aria-hidden="true">27</span></li>
    <li class="cm-tile b4" style="grid-area:4/2"><span class="visually-hidden">Oregon: 42</span><b aria-hidden="true">OR</b><span aria-hidden="true">42</span></li>
    <li class="cm-tile b1" style="grid-area:4/3"><span class="visually-hidden">Nevada: 18</span><b aria-hidden="true">NV</b><span aria-hidden="true">18</span></li>
    <li class="cm-tile b4" style="grid-area:4/4"><span class="visually-hidden">Wyoming: 51</span><b aria-hidden="true">WY</b><span aria-hidden="true">51</span></li>
    <li class="cm-tile b1" style="grid-area:4/5"><span class="visually-hidden">South Dakota: 15</span><b aria-hidden="true">SD</b><span aria-hidden="true">15</span></li>
    <li class="cm-tile b0" style="grid-area:4/6"><span class="visually-hidden">Iowa: 8</span><b aria-hidden="true">IA</b><span aria-hidden="true">8</span></li>
    <li class="cm-tile b0" style="grid-area:4/7"><span class="visually-hidden">Indiana: 7</span><b aria-hidden="true">IN</b><span aria-hidden="true">7</span></li>
    <li class="cm-tile b1" style="grid-area:4/8"><span class="visually-hidden">Ohio: 11</span><b aria-hidden="true">OH</b><span aria-hidden="true">11</span></li>
    <li class="cm-tile b1" style="grid-area:4/9"><span class="visually-hidden">Pennsylvania: 17</span><b aria-hidden="true">PA</b><span aria-hidden="true">17</span></li>
    <li class="cm-tile b1" style="grid-area:4/10"><span class="visually-hidden">New Jersey: 14</span><b aria-hidden="true">NJ</b><span aria-hidden="true">14</span></li>
    <li class="cm-tile b1" style="grid-area:4/11"><span class="visually-hidden">Connecticut: 16</span><b aria-hidden="true">CT</b><span aria-hidden="true">16</span></li>
    <li class="cm-tile b1" style="grid-area:4/12"><span class="visually-hidden">Rhode Island: 13</span><b aria-hidden="true">RI</b><span aria-hidden="true">13</span></li>
    <li class="cm-tile b2" style="grid-area:5/2"><span class="visually-hidden">California: 29</span><b aria-hidden="true">CA</b><span aria-hidden="true">29</span></li>
    <li class="cm-tile b4" style="grid-area:5/3"><span class="visually-hidden">Utah: 47</span><b aria-hidden="true">UT</b><span aria-hidden="true">47</span></li>
    <li class="cm-tile b4" style="grid-area:5/4"><span class="visually-hidden">Colorado: 56</span><b aria-hidden="true">CO</b><span aria-hidden="true">56</span></li>
    <li class="cm-tile b0" style="grid-area:5/5"><span class="visually-hidden">Nebraska: 6</span><b aria-hidden="true">NE</b><span aria-hidden="true">6</span></li>
    <li class="cm-tile b1" style="grid-area:5/6"><span class="visually-hidden">Missouri: 10</span><b aria-hidden="true">MO</b><span aria-hidden="true">10</span></li>
    <li class="cm-tile b1" style="grid-area:5/7"><span class="visually-hidden">Kentucky: 14</span><b aria-hidden="true">KY</b><span aria-hidden="true">14</span></li>
    <li class="cm-tile b2" style="grid-area:5/8"><span class="visually-hidden">West Virginia: 23</span><b aria-hidden="true">WV</b><span aria-hidden="true">23</span></li>
    <li class="cm-tile b2" style="grid-area:5/9"><span class="visually-hidden">Virginia: 20</span><b aria-hidden="true">VA</b><span aria-hidden="true">20</span></li>
    <li class="cm-tile b1" style="grid-area:5/10"><span class="visually-hidden">Maryland: 15</span><b aria-hidden="true">MD</b><span aria-hidden="true">15</span></li>
    <li class="cm-tile b0" style="grid-area:5/11"><span class="visually-hidden">Delaware: 5</span><b aria-hidden="true">DE</b><span aria-hidden="true">5</span></li>
    <li class="cm-tile b3" style="grid-area:6/3"><span class="visually-hidden">Arizona: 31</span><b aria-hidden="true">AZ</b><span aria-hidden="true">31</span></li>
    <li class="cm-tile b2" style="grid-area:6/4"><span class="visually-hidden">New Mexico: 28</span><b aria-hidden="true">NM</b><span aria-hidden="true">28</span></li>
    <li class="cm-tile b0" style="grid-area:6/5"><span class="visually-hidden">Kansas: 4</span><b aria-hidden="true">KS</b><span aria-hidden="true">4</span></li>
    <li class="cm-tile b1" style="grid-area:6/6"><span class="visually-hidden">Arkansas: 12</span><b aria-hidden="true">AR</b><span aria-hidden="true">12</span></li>
    <li class="cm-tile b2" style="grid-area:6/7"><span class="visually-hidden">Tennessee: 24</span><b aria-hidden="true">TN</b><span aria-hidden="true">24</span></li>
    <li class="cm-tile b2" style="grid-area:6/8"><span class="visually-hidden">North Carolina: 25</span><b aria-hidden="true">NC</b><span aria-hidden="true">25</span></li>
    <li class="cm-tile b1" style="grid-area:6/9"><span class="visually-hidden">South Carolina: 11</span><b aria-hidden="true">SC</b><span aria-hidden="true">11</span></li>
    <li class="cm-tile b1" style="grid-area:6/10"><span class="visually-hidden">District of Columbia: 18</span><b aria-hidden="true">DC</b><span aria-hidden="true">18</span></li>
    <li class="cm-tile b0" style="grid-area:7/5"><span class="visually-hidden">Oklahoma: 6</span><b aria-hidden="true">OK</b><span aria-hidden="true">6</span></li>
    <li class="cm-tile b0" style="grid-area:7/6"><span class="visually-hidden">Louisiana: 5</span><b aria-hidden="true">LA</b><span aria-hidden="true">5</span></li>
    <li class="cm-tile b0" style="grid-area:7/7"><span class="visually-hidden">Mississippi: 4</span><b aria-hidden="true">MS</b><span aria-hidden="true">4</span></li>
    <li class="cm-tile b0" style="grid-area:7/8"><span class="visually-hidden">Alabama: 7</span><b aria-hidden="true">AL</b><span aria-hidden="true">7</span></li>
    <li class="cm-tile b1" style="grid-area:7/9"><span class="visually-hidden">Georgia: 13</span><b aria-hidden="true">GA</b><span aria-hidden="true">13</span></li>
    <li class="cm-tile b3" style="grid-area:8/1"><span class="visually-hidden">Hawaii: 34</span><b aria-hidden="true">HI</b><span aria-hidden="true">34</span></li>
    <li class="cm-tile b1" style="grid-area:8/5"><span class="visually-hidden">Texas: 10</span><b aria-hidden="true">TX</b><span aria-hidden="true">10</span></li>
    <li class="cm-tile b0" style="grid-area:8/10"><span class="visually-hidden">Florida: 9</span><b aria-hidden="true">FL</b><span aria-hidden="true">9</span></li>
  </ul>
  <ul class="list-unstyled d-flex flex-wrap gap-2 column-gap-3 small text-body-secondary mt-3 mb-0" aria-label="Members per 10,000 residents">
    <li class="d-flex align-items-center gap-2"><span class="cm-sw b0" aria-hidden="true"></span>Under 10</li>
    <li class="d-flex align-items-center gap-2"><span class="cm-sw b1" aria-hidden="true"></span>10–19</li>
    <li class="d-flex align-items-center gap-2"><span class="cm-sw b2" aria-hidden="true"></span>20–29</li>
    <li class="d-flex align-items-center gap-2"><span class="cm-sw b3" aria-hidden="true"></span>30–39</li>
    <li class="d-flex align-items-center gap-2"><span class="cm-sw b4" aria-hidden="true"></span>40 and over</li>
      </ul>
</section></div>

CSS

/* Choropleth: five-step viridis scale (readable with the common forms of colour blindness), every value also in text. */
.cm-frame{--cm-sea:#eef1f5;--cm-none:#d3d8df;position:relative;border-radius:14px;background:var(--cm-sea);overflow:hidden}
.cm-frame svg{display:block;width:100%;height:auto}
.cm-none{fill:var(--cm-none);stroke:#fff;stroke-width:.6}
.cm-frame [data-tip]{stroke:#fff;stroke-width:.7}
.cm-frame [data-tip]:hover{stroke:#111827;stroke-width:1.8}
.cm-b0{fill:#fde725}.cm-b1{fill:#5ec962}.cm-b2{fill:#21918c}.cm-b3{fill:#3b528b}.cm-b4{fill:#440154}
.cm-tip{position:absolute;left:0;top:0;z-index:2;transform:translate(-50%,calc(-100% - 12px));padding:7px 11px;border-radius:9px;background:#111827;color:#fff;
  font-size:.8rem;font-weight:600;white-space:nowrap;pointer-events:none}
.cm-tip[hidden]{display:none}
.cm-sw{display:inline-block;width:14px;height:14px;border-radius:4px;flex:none}
.cm-sw.b0{background:#fde725}.cm-sw.b1{background:#5ec962}.cm-sw.b2{background:#21918c}.cm-sw.b3{background:#3b528b}.cm-sw.b4{background:#440154}.cm-sw.none{background:#d3d8df}
.cm-tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(8,auto);gap:4px;list-style:none}
.cm-tile{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;line-height:1.05;text-align:center}
.cm-tile b{font-size:.78rem;font-weight:800}
.cm-tile span{font-size:.72rem;font-weight:600}
.cm-tile.b0{background:#fde725;color:#111827}.cm-tile.b1{background:#5ec962;color:#111827}.cm-tile.b2{background:#21918c;color:#0b1120}
.cm-tile.b3{background:#3b528b;color:#fff}.cm-tile.b4{background:#440154;color:#fff}
@media (max-width:560px){.cm-tiles{gap:2px}.cm-tile{border-radius:3px}.cm-tile b{font-size:.56rem}.cm-tile span{font-size:.54rem}}
.cm-switch{--bs-btn-padding-y:7px;--bs-btn-padding-x:14px;--bs-btn-font-size:.85rem;--bs-btn-font-weight:600}
.cm-switch{padding:4px;border-radius:12px;background:#f3f4f6;gap:4px}
.cm-switch .btn{--bs-btn-color:#374151;--bs-btn-hover-color:#111827;--bs-btn-border-width:0;border-radius:9px!important}
.cm-switch .btn[aria-pressed="true"]{background:#fff;color:#111827;box-shadow:0 1px 3px rgba(17,24,39,.15)}
.cm-switch .btn:focus-visible{outline:3px solid #3b528b;outline-offset:2px;box-shadow:none}
.cm-bar{height:6px;--bs-progress-bar-bg:#440154;--bs-progress-bg:#f3f4f6}
.cm-scroll{max-height:380px}
.cm-scroll:focus-visible{outline:3px solid #3b528b;outline-offset:2px}
.cm-scroll thead th{position:sticky;top:0;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#4b5563;--bs-table-bg:#f9fafb}
.cm-sub{font-size:.92rem}
@media (min-width:900px){.cm-main{flex:1 1 0;width:auto;min-width:0}.cm-side{flex:0 0 254px;width:auto}}

JavaScript

// Choropleth: pointer tooltip on shaded countries, and a Map / Table switch.
document.querySelectorAll('[data-choropleth]').forEach(function (box) {
  var frame = box.querySelector('[data-map-frame]'), tip = box.querySelector('[data-map-tip]');
  if (frame && tip) {
    frame.addEventListener('pointermove', function (e) {
      var t = e.target.closest('[data-tip]'); if (!t) { tip.hidden = true; return; }
      var f = frame.getBoundingClientRect(); tip.textContent = t.dataset.tip; tip.hidden = false;
      var half = tip.offsetWidth / 2 + 6;
      tip.style.left = Math.max(half, Math.min(f.width - half, e.clientX - f.left)) + 'px';
      tip.style.top = Math.max(tip.offsetHeight + 16, e.clientY - f.top) + 'px';
    });
    frame.addEventListener('pointerleave', function () { tip.hidden = true; });
  }
  var views = box.querySelectorAll('[data-view]');
  box.querySelectorAll('[data-show]').forEach(function (btn) {
    btn.addEventListener('click', function () {
      box.querySelectorAll('[data-show]').forEach(function (b) { b.setAttribute('aria-pressed', String(b === btn)); });
      views.forEach(function (v) { v.hidden = v.dataset.view !== btn.dataset.show; });
    });
  });
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5563] uppercase">World choropleth with a legend, top five and a table view</span>
<section class="rounded-[20px] border border-[#e5e7eb] bg-white p-[18px] text-[#111827] sm:p-[26px]" data-choropleth aria-labelledby="cm-world-title">
  <div class="flex flex-wrap items-end justify-between gap-x-6 gap-y-3.5">
    <div><h2 id="cm-world-title" class="text-[1.35rem] leading-tight font-bold tracking-[-.02em]">Trailhead users per 100,000 people</h2><p class="mt-1 text-[.92rem] text-[#4b5563]">Monthly active users of the Trailhead hiking app, September 2026. Sample data.</p></div>
    <div class="inline-flex gap-1 rounded-xl bg-[#f3f4f6] p-1" role="group" aria-label="View as"><button class="cursor-pointer rounded-[9px] px-3.5 py-[7px] text-[.85rem] font-semibold text-[#374151] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#3b528b] aria-pressed:bg-white aria-pressed:text-[#111827] aria-pressed:shadow-[0_1px_3px_rgba(17,24,39,.15)]" type="button" data-show="map" aria-pressed="true">Map</button><button class="cursor-pointer rounded-[9px] px-3.5 py-[7px] text-[.85rem] font-semibold text-[#374151] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#3b528b] aria-pressed:bg-white aria-pressed:text-[#111827] aria-pressed:shadow-[0_1px_3px_rgba(17,24,39,.15)]" type="button" data-show="table" aria-pressed="false">Table</button></div>
  </div>
  <div class="mt-5 grid gap-[22px] min-[900px]:grid-cols-[minmax(0,1fr)_230px]" data-view="map">
    <figure>
      <div class="cm-frame" data-map-frame>
    <svg viewBox="0 0 1000 433" role="img" aria-label="World map shaded by active users per 100,000 people. Norway is highest at 412, Egypt lowest at 18. All figures are in the table view.">
      <path class="cm-none" d="M988 309l1 0-1 2-3 0 2-2zM994 304l0 2-4 1 0-1zM594 256l11 7 0 1 4 4-2 4 2 3-1 5 3 6-8 4-8 0-2-7-2-1-6-3-3-5-1-7 4-4 0-3 1-2-2-2zM477 164l0 5-9 0 0 8-3 1 0 6-11 0 0 1 0-1 6-1 2-7 4-3 3-7 7-1zM643 119l-3-11 6-2 10 6 7 0 4 2 1 3 1 0 1 3 3 0 1 2 6-6-1 3 7 2-2 2-2 0-2-1 0-1-3 0-1 4-2 0-1 1 3 1 1 3-1 3-4-1 0-2-7-3-5-3-2-4-4 0-2-3-4-2-3 3 0 1zM892 261l9 4 4 5 4 2 1 2-3 0 1 2 4 6 1 0 0 1 4 3-2 1-6-2-5-6-3-2-4 2 0 3-2 1-5-1zM924 264l1 3-1 1-1-3-5-4 1 0zM920 271l-5 2-4-2 1-1 4 0 1-1 0 1 1 0 3-2 0-2 1 0 1 2zM929 270l3 5-2-1zM581 267l1 7 3 5-5 1-1 2-1 9 4 1 0 3-2 0-5-5-4 1-5-3-5 0-1-12-4-1-2 1-1 2-5 1-3-7-11 0 0-1 2-3 3-1 1 2 4-5 2-6 3-4 2-13 0-2 3-2 8 3 1-2 5-2 8 0 2 3 4-1 4 3-1 4 2 1-4 5-1 6-1 5zM616 258l-2-3 0-11 2-4 5-3 4 0 7-10 3-5 0-6 6-2 0 4-4 13-8 13-9 8zM568 226l-3-2 0-4-2-3-2-5-1 0 3-10 3 0-1-12 0-2 3 0 0-6 32 0 2 11 3 2-4 3-1 8-1 6-4 7-1 6-2-11-2-1-1 1 0 3-2 4-4-1-3 2-6 0-3-3-2 1-1 4-2 1zM565 190l1 12-3 0-3 10 1 0 2 5-3 2-2 3-6 2-2 3-8 2-1-5-2-2 0-2 4 1-3-10 0-1-2 0-1-4 1-4 4-3 1-12-2-3-1-5 3-2zM304 189l0 6-8-1 1-1 5 0-1-3-1-1zM304 195l0-6 5 0 4 4-1 1-5-1-2 3zM288 166l3 1-3 1zM291 166l2 1-1 2zM289 171l2 3-1 2-2-2zM353 419l5-2 3 1-4 2-1-1-2 1zM415 3l16-2 21 0 10 1-19 2 15 0 2 0-3 2 14-2 6 1-15 3 5 0-5 3 0 3 2 1-6 1 3 2 0 2-2 0 2 2-4 0 2 1-1 1-6 1 2 3-5-1 5 3 1 2-4 0-4-2 1 1-3 2 8 0-12 5-9 1-6 4-13 3-4 6-4 2 0 2-4 5-3 1-3-3-4 0-5-8 0-4-2-3 1-2-1-1 4-3 3-1 3-3-7 1-2 0 2-4 6 1-4-3-4 0 3-2-2-6-3-1 1-1-5-1-14 0-4-3 9-1-11-1 17-3 1-1-5-1 13-3 0-1 24-1 9 2-3-1zM846 281l7-1-7 3zM577 346l1 1-1 3-3 1-2-2 3-3zM347 350l2 0 9 6 2 2-1 2 1 2-4 3-7-1-2-2zM286 225l0 2-2 2 0-3-3-2-4 2 1 2-1 1-1 0-2-2-4-1 1-4 1 0 3 2 6-2zM272 222l-1 0-1 4-5-6 0 2-2-1 0-4 6 1zM269 218l-6-1-5-6 1 0 8-6 4-1zM271 204l-4 1-8 6-1-1 0-2-4-2 4-4 9-1zM254 206l4 2 0 2-2 0-4-1zM246 206l2-5 4 0-3-4 2 0 0-2 5 0 0 7 2 0-4 4-2 3zM256 195l3-2-1 6-2 3zM332 236l-1 2-6 3-5-1 1 0 1 5 2 1-6 4-2 0-2-1-2-5 1-2-1-4 1-5-5 0-2-3-5 0-2-7-2 0 2-4 4-4-2 1 1 8 2-3-1-4 3-1 1-2 5 5 5-1 4 2 1-2 7 0-2 1 0 2 3 0 2 2 0 2 3 1-3 2 1 2-3 1 0 3zM343 247l-2-1-4 3-3-2-1-3 2-4-1-3-2-1-2-2 0-3 3-1-1-2 3-2 7 7-3 7zM349 245l-4 0-1 2-1 0-4-7 3-7 8 1-1 3 1 4zM319 193l2 1-1 1-4 0 1-2zM288 193l3 2-4 0-1-1zM277 178l11 2 6 6 4 1-10 2 2-2-3-1-1-3-8-2-1 0 1-1-9 2zM585 324l-5 0-4-2 0-3-5-4-2-5 5 0 5-6 4-1 0 1 3 0 4 2-1 12zM580 324l-7 5-4 6-4 0-2-1-5 5-2 0-2-7 0-9 3 0 0-12 6-1 1 2 5-2 2 5 5 4 0 3zM554 332l-1 12-4 2-3-1-1-2-1 2-3-5-2-16-7-16 5-1 2 2 11-1 2 2 6 0 6-1 2-1 3 2-5 2-1-2-6 1 0 12-3 0zM454 209l-2-4 3-4 5-2 7 7 1 7-6-1-8 1 0-3 8-1-4-1zM468 213l-1-7 1-3 17 0-2-31 4 0 22 17 0 2 3 0 0 7-2 5-9 2-4 0-6 4-2 0-3 6-1 4-7 1-3-7-3 2-4-1zM454 185l0-1 11 0 0-6 3-1 0-8 9 0 0-5 10 8-4 0 2 31-17 0-1 3-7-7-5 2 1-13zM507 233l-2 0 0-10-3-6 4-3 2-1 2 2 0 5-2 5zM540 179l1 5 2 3-1 12-4 3-1 4 1 4 2 0 0 1-1 2-3-4-2 2-4-1-5 1-4-1-2 1-4-3-4 1-1 6-2-2-2 1 0-2-3-1-2-6 9-2 2-5 0-7 3-1 17-13 6 3zM507 233l1-8 2-5 0-5 1-6 4-1 4 3 2-1 4 1 5-1 4 1 2-2 3 4 1 2-2 3-5 12-2 1-3-1-2 2-2 5-8 2-4-6zM540 211l3 10-4-1 0 2 2 2 1 5-2 4 0 4 4 8 0 2-8-2-5 0-4 0 0-2-3-6 2-5 2-2 3 1 2-1 5-12 2-3-1-2zM502 217l3 6 0 10-2 1-3-17zM500 217l3 17-8 4-3-1-1-4 2-7-1-4 0-5zM478 220l7-1 3 3 4 0 1 4-2 7 1 4-5-1-8 3 0-5-3-2 1-4 1-3-1-4zM462 212l6 1 0 1 4 1 3-2 3 7-1 1 1 4-1 3-3 1-1-4-1 1-3-6-3 1-3 3-5-7 4-2zM454 213l8-1 0 3-4 2zM477 228l-1 4 3 2 0 5-4-2-7-6 4-5 1-1 1 4zM463 224l3-3 3-1 3 6-4 5-4-3zM485 219l1-4 3-6 2 0 6-4 4 0 2 6 3 1 0 2-4 3-2 0-8 0 0 5-4 0zM576 236l-8 0-5 2-1 2-8-3-3 2 0 2-3 0-4 4-4-8 0-4 2-4 8-2 2-3 6-2 2-3 3-2 2 3 0 4 3 2zM551 241l-2 13-3 4-2 6-4 5-1-2-3 1-1-1-2 2-2-4 2-1-1-2 3-2 0-1 4 2 1-2 0-5-2-1 2-4-3-1-1-3 8 2 0-2 4-4zM531 245l5 0 1 3 3 1-2 4 2 1 0 5-1 2-4-2 0 1-3 2 1 2-2 1-7-9 2-7 5 0zM527 245l4 0 0 4-5 0zM585 279l6 3 2 5-3 10 1 1-8 2 0 3-4 1-5 6-5 0-3-2-2 1-4-5 0-10 6 0 0-6 5 3 4-1 5 5 2 0 0-3-4-1 1-9 1-2zM591 282l2 1 2 7 0 6 3 4 0 4-2 3-2-2 1-5-4-2-1-1 3-10zM595 290l8 0 8-4 1 14-1 2-3 4-6 3-7 7 1 13-1 3-7 4 0 3-2 0 0-3 0-5-1-7 4-6 1-12-4-2-3 0 0-1 0-3 8-2 4 2-1 5 2 2 2-3 0-4-3-4zM586 339l-2 2-2-2 2-3 2 0zM536 268l-2 3-1-2 2-2zM534 272l11 0 3 7 5-1 1-2 2-1 4 1 1 12 5 0 0 6-6 0 0 10 4 5-6 1-6 0-2-2-11 1-2-2-5 1 1-9 5-10zM585 260l0 3-4 4 0-5zM594 147l0 1-1 0-1 2 0 2 2-1-1 7-2-6 1-6 2-1zM594 145l-2 1 2-5 2 1zM637 293l1 10 0 1-1-2-1 1 0 4-9 26-5 2-3-2-2-7 1-5 3-6-1-6 2-4 5-2 4-3 1-3 1 0 3-6zM594 151l-2 1 0-2 1-2 1 0zM454 209l4-1 4 1-8 1zM525 155l-1-6-4-4 2-11 3-2 1 1 0 1 3-1-1 2 0 5-1 2 3 4 0 2-4 4 0 2zM477 164l0-4 9-4 4-3 0-2 7-2-3-10 10-4 18-1-2 11 4 4 1 6 1 4-1 10 3 5 1 0 3 3-17 13-3 1-3 0 0-2-22-17zM594 148l0-1 3 1 5-3 2 4-6 2 3 3-1 2-4 3-3-1 1-7zM639 175l7 0 5-6 0 1 1 2-1 0 0 3-1 5-9-1zM637 173l1-4 1 4zM628 156l1 5-5-2 2-3zM604 149l-2-4 5-3 0-7 3-2 6 0 4 5-1 5 6 5 4 8-1 0-2 0-2 3-5 0-8-7zM650 180l1-5 0-3 1 0 3 4 4 1 3 4-3 6-1 1 0 4-3 1-1 2-2 0-2 3-4 1-4-7 8-4 1-6zM958 303l0-3 1 3zM783 213l-1-3 1-3 7 0 2 1 1-2 2 1 1 6-4 2 1 2-5 2-2-1zM795 207l-2-1-1 2-2-1 0-4-3-3 0-3-3-3-2 0-5 2-1-6-2 0-1-3 2-3 2 1-1-4 1-1 4 6 3 0 2 3-2 2 3 2 8 8zM773 187l-5 2-2 4 5 8-1 3 5 10-2 7-2-11-5-12-4 4-3-1-1-7-3-5-4-3 1-4 1-1-1-6 2 1 1-3 0-6 3-2 2 0 0-3 2-1 2 3 1 5-2 3 1 4 3-1 1 3 2 1-1 2 4 2 2-1 0 2zM831 116l1 1-1-1-1 3 1 2-4 3 1 2 3 2-5 3-4-1 0-4-3-2 3-6 4 1-1-2 3-1 1-2zM714 94l9-4 14 3 1-2-1-2 1-3 9 2 1 2 4 2 8-1 5 3 6 1 5-2 2-2 6 1 0 6 1 1 6-1 6 4-6 0-2 3-5 3-4-1-1 2 3 3-3 2-10 3-2 2-12-4-11 0-5-5-12-3-2-5-9-6zM752 182l-1 4-3-7-3 0 0 3-3 0-2-7-2-1 2-3-3-1 1-3 4 2 0 2 7 1-2 5 1 2 1-2zM745 163l2 3-6 1-3-2 3-4zM703 138l-2 3-7 0-1 1 3 5 3 2-7 14-3-1-3 4 6 8-6 0-2 2-5-5-13 1 0-4 4-2-2-4-6-5 5 1 9-2 1-4 6-2 0-2 2-3-2-2 3 0 1-4-1-3 1-1 8-2 4 4zM672 132l4 1 3 0 4-4 4 5 3-2 4 0 1 1-8 2-1 1 1 3-1 4-3 0 2 2-2 3 0 2-6 2-1 4-9 2-5-1 2-3-5-8 1-8 4 0 1-1 3-1 0-3 2-2zM676 133l1-3-1-3-3-1 1-1 2 0 1-4 3 0 0 1 2 1-4 0 0 2 11 1 2 2 2 1 1 3-4 0-3 2-4-5-4 4zM680 116l2-1 4 1 1-3 13 2 3 1-4 4-3 0 0 2-5 1-2 3-11-1 0-2 4 0 2 0 2-2-7-2zM633 118l4-2 6 3 2 0 0-1 3-3 4 2 2 3 4 0 2 4 5 3 7 3 0 2-2-1-2 2 0 3-3 1-1 1-4 0-1-3-11-5-5 0-3 3-1-6-3-1 1-2-2 0 0-3 3 1 2-1-4-4-2 1 1 2zM629 156l-4-8-6-5 1-5-4-5-3-7 2-1 4 3 1 0 3-3 1 3 2 1 1 2 5 3 4 0 4-1 3-3 5 0 11 5 1 3-1 8 5 8-2 3 6 5 2 4-4 2 0 4-12-2-3-5-4 2-3-1-6-3-5-8-3 0zM594 147l0-2 2-3-2-1 0-4 1-3 8 0 7-1-3 2 0 7-5 3-5 3zM620 128l-1 0-2-3-2 0-3-2-1-3 4 0zM566 73l7 2 0 2 5 5-3 1 1 3-2 0 0 2-13-2-4 1-1-7 5-1 2-3-1-1zM554 97l2 2-4 5-2 0-3 1-6-2-1-1 2-4 2 1 7-3zM565 98l3-1 3 1 3 4 0 1-2 0-2 3 0-4zM562 75l1 1-2 3-5 1-2-1 0-2-4-1-1-2 9-1zM563 69l3 4-4 2-4-2-9 1 1-5 2-1 2 3 2 0 0-3zM564 63l-1 6-7-1 0-1-2-1-1-2zM557 110l1 1 6 1 4-2 4 2-2 3 1 2-5 1 0 1-8 0-1-3 1-3zM554 121l-2 4-2-2-1-5 2-3 1 3zM541 103l6 2 1 2 0 1-8-1-1 1 8 7 0 1-7-4-3-5-1 0-1 1-1-2 4 0 1-2zM515 90l0 2-1 1-8-5 2 0 4-1zM951 321l3 3-3 0-4-7zM948 286l1 1-2 0-1-2zM945 284l-3 0 0-2zM942 278l1 2-5-3zM727 229l-1 3-3 1-2-7 1-5zM829 174l-1 8-3-5 2-6zM469 43l-1 2 2 2-11 5-9-2 2-1-4-1 4-2-5 0 2-2 3-1 3 2 4-1 2 1zM618 118l4 2 1-2 6 5-2 0-1 6-2-1-1-3-3 3-5-8 4 0zM619 128l-4-3 2 0zM601 113l14 3 3 2 1 2-4 0-4 0-5-1-1-4zM833 212l-2-3 4 2 0 2zM839 221l1-3 1 0 0 2 2-3 0 3-3 4zM850 226l1 4-1 3-1-4-2 2 1 4-4-2 0-4-2-2-4 4 0-1 1-3 3-2 1 1 4-2 0-3 2 2zM828 223l-4 3 6-10 1 3zM835 194l1 4-2 3 1 6 6 1 1 4-3-3-1 1-2-2-4 0 1-2-1-1 0 1-3-3 1-10zM837 216l-1-2 4 1 0 2-3 2zM846 214l1 3-2-1 1 3-1 1-2-4 2 0 0-1-2-3zM777 232l3 1 1 1 2-1 4 4 0 7 3 3-2 2-6-5zM827 239l-5 0-4 9-2 1-3-1-6 2-2-4 4 1 0-3 5-1 3-5 1 2 2-1 0-4 5-5 1 3 5 2zM820 235l0 4-2 1-1-2zM534 103l6-1 1 1-2 1-1 2-4 0 1 0zM555 95l-1 2-3-1-7 3-2-1 0-2 4-2zM600 206l1-8 4-3 3 6 11 11-2 0-7-6-4 0-2-1-1 2zM341 318l2 6 6 1 1 5 3 0 0 6 0 2-2 3-8-1 1-6-8-4-6-6 1-8 8-1zM642 192l4 7-2 1-1 3-9 5-12 4-2 0-1-2-2-6 0-4 2-4 9 1 1 1 5-5zM586 139l4-1-1 2zM586 139l3 1-3 1-2-2zM568 182l0 6-3 0 0 2-22-13-3 2-2 1-6-3-3-3-1 0-3-5 1-10-1-4 1-1 0-2 4-4 0-2 10 3 2 3 9 3 2-2-1-3 3-3 5 0 7 4-1 5zM632 227l-7 10-4 0-5 3-3-1-3 3-4-1-6-3-2-3-4-6-3-1 3-3 1-6 4-7 1-6 3 1 1-2 2 1 4 0 7 6-2 5 3 1 0 1 3 4zM617 212l2 0 0 2-1 1 1 1-1 2-3-1zM635 216l0 6-3 5-11-4-3-4 0-1 1-2 3 3zM594 256l-10 0-2 1 1-6 4-5-2-1 1-4 7-1 1-1 3 8-3 5zM584 256l2 2-1 2-4 2 1-5zM547 115l-8-7 1-1 8 1 1 3-1 1zM557 116l1 3-4 2-2-3 3-2zM547 105l3-1 7 6 1 3-1 3-2 0 0-1-2-2-2 2-3-3 1-1-1-3 0-1zM551 115l-2 3-2-2 0-1 1-3zM552 118l-1-3 2-2 2 2 0 1zM330 218l2 0 0 2-3 0zM586 241l-4-3-4 1-2-3-8-10-2-1 2-1 1-4 2-1 3 3 6 0 3-2 4 1 2-4 0-3 1-1 2 1 2 11-3 3 3 1 4 6-4 4-1 1z"/>
      <path class="cm-b4" data-tip="Norway: 412 per 100,000" d="M529 9l3-1 9 3-5 1-3 4-2 0-4-2 1 0-8-5zM565 35l-5 1 1-2-3-1-3 1-3 3-8-1-2 0 0 2-4-1 0 2-2 0-6 9 0 2-2 0-2 3 1 3 1 2 0 3-3 4-1-2-5 4-3 0-3-1-2-10 12-7 8-9 9-6 8-1 3-2 7-1 7 2-2 1zM551 8l-7 2-12-2 11-1zM548 13l-4 1-4 0 1-1-1-1 4 0z"/>
      <path class="cm-b4" data-tip="New Zealand: 388 per 100,000" d="M953 382l-5 4-2 1-1-1 3-3 0-2-2-1 7-7-1-9 1 0 2 2 0 7 1-2 0 3 1 1 5-1zM928 393l14-10-1 3 3-1-1 2-7 5 0 2-5 1-6 6-5 2-6-2 1-1z"/>
      <path class="cm-b4" data-tip="Sweden: 356 per 100,000" d="M525 65l3-4 0-3-1-2-1-3 2-3 2 0 0-2 6-9 2 0 0-2 4 1 0-2 2 0 6 3 2 6-4 0-2 2 1 2-7 5-1 4 4 4-2 3-2 1-2 7-3 0-1 2-3 1z"/>
      <path class="cm-b4" data-tip="Finland: 331 per 100,000" d="M560 36l0 2 4 2-2 2 4 3-1 2 2 3-1 1 4 2-6 7-12 2-4-2-1-6 1-2 7-5-3-2-2-6-6-3 8 1 3-3 3-1 3 1z"/>
      <path class="cm-b4" data-tip="Australia: 322 per 100,000" d="M877 384l1 0-5 8 0-1-3 2-2 0 2-9 3 1zM833 357l-6 2-2 3-10 0-6 4-4 0-3-3 4-6 0-9-1-11 1 1-1-3 2 2-1-6 4-8 0 2 8-6 12-3 4-5 3-6 1 3 1 0 0-2 1-1 1 0 5-7 4-1 3 4 3 0 0-2 4-6 6-1 0-2-2-1 2-1 7 4 4-1 1 1-3 4-3 5 12 9 2-1 3-8 2-8 3-6 2 12 2-1 2 3 0 13 5 4 1 7 3 0-1 3 4 6 0 3-1 6-7 12-12 13-3 5-13 6-2-2 1-2-5 3-7-3 0-6-3-1 2-4-5 2 6-7-7 6-2-1 0-6-6-4z"/>
      <path class="cm-b4" data-tip="Switzerland: 305 per 100,000" d="M524 100l-1 1 3 1 0 1-3 0-1 1-5 1-1-2-1 1 0-2 2-2 1-1z"/>
      <path class="cm-b3" data-tip="Canada: 284 per 100,000" d="M199 95l-4-4-4-2 2-4-2-2 1-6 3-3-2-2 0-6-2-4-6 3-1-3-4-1 24-27 8 3 17-4 0 1 4-2 3 3 4-2-1 2 7-1 11 2 1 2-4 1 4 1 8-1 1 2 3-2-1-1 2-1 5 0 2 2 5 1 7 0 3-3 3 1-2 3 7-5-3-3 6-5 4 2 1 3-3 1 4 1-2 3 4-2 2 1-2 2 1 2 6-4 2-3 6 0 2 2-3 3-1 2-5 2-5 0-6 5-10 3-1 2-3 1-8 5-4 6 3 0 0 5 3 0 11 6 6 0-2 6 0 3 3 3 5-4 0-5-1-1 10-6 1-5-2-2 4-3 2-7 9 0 4 3 4 1-2 6 3 2 9-6 4 10-1 2 8 5 1 2 2 2-1 3-12 6-15 0-7 4-8 7 7-5 10-3 2 2-3 2 0 6 3 1 4 0 3-4 0 3 1 1-16 7-2 0 1-3 5-2-7 0-1-2 1-4-3-1-8 8-8 0-7 4-4 0-2 1 0 2-10 3-1-1 4-5 1-5-4-5-7-5-8 1-6-2-1-2-1 1zM313 55l5-2-4 2zM338 26l-2-1 2-1 7 1zM320 56l3-1-2 2zM314 20l-2 1-5 0 5-2zM315 11l2 1-1 1-5 0 1-2zM323 22l-7-1 1-3-7-2 2-1 9 1 1 1-1 1 3 1 13-1 4 2-5 2zM286 13l2 0-1 1-6 0zM288 11l2 1-6 0zM366 88l-4 5 1-1 2 0-1 1 5 1-1 3 2-1 0 4-2 2-2 0 0-3-3 3-2 0 2-2-2-1-7 0 1-2 6-7 4-3 1 0zM317 47l6 4-2 1-4-2-7 3 0-2-3 0 6-6zM339 27l2-1 6 3 0 1 4-1 1 2 5 1 2 4-5 1 8 2 2 3 3 0-7 5-4-4-3 1-1 1 4 4 1 3-2 2-7-3 4 5-10-3-2-1 1-1-5-3-7 2-1-1 2-3 9 0 5-5 0-2-6-2 1-1-4-3-5 1-15-2-1-1 3-1-3 0 1-2 6-4 6-1-3 2 1 2 3-2 6-1 2 2-2 2zM310 23l8 0-14 5 2-4zM258 18l11-4 6 0-4 3zM185 80l3-1-4 6-1-4zM300 10l8 1 0 2-10-1 3-1-2 0zM197 97l-5-1-2-3-2-1 0-2 6 1zM257 22l7 0 2 2-21 7 0-1-4-1 9-5-1-2zM287 18l4 0-3 2-13 2-3 0 1-1 5-1-12 0 8-3 10 2-1-2 3-1 2 0zM284 25l1 1-1 5 5 2-5 2 1 1-2 1-6-1-17 2 0-2-5 0 0-2 11-1-11-1-1-1 6-1-6-1 6-3 7-1 1 0-2 1 5 0 2 1 4-1 1 1-1 2 2-1 1-3zM295 26l-1-1 4-2 6 1-3 2 2 1-2 2-6 1-4-3zM285 24l4 0-4 2-1-2zM308 16l0 1-3 3-4 1-2-1 2-1-4 0 2-2zM321 7l8-1 7 2 1 2-8 2-7 0-1-1 3-1-5-1zM332 4l26-2 30 1-13 2 4 0-13 4-12 1 3 0-2 1 1 1-11 3 3 1-6 1-17 0 4-2 1-2 5 1-4-2 8-2-2-1 0-1 10-1-10 0zM339 41l-4 0 2-2 3 0zM298 35l0 1-2 1-6-2 5-2zM343 92l4 1 2 2zM342 101l0 2 4 0-3 2-2-2z"/>
      <path class="cm-b3" data-tip="Austria: 268 per 100,000" d="M542 98l-2 4-6 1-4-2-4 1-3-1 1-1 8 0 0-3 1-1 2 1 2-2 5 1z"/>
      <path class="cm-b3" data-tip="Denmark: 262 per 100,000" d="M523 77l-3 0-1-6 5-3 0 3 1 1-2 3zM529 73l1 2-1 2-3-3z"/>
      <path class="cm-b3" data-tip="United Kingdom: 241 per 100,000" d="M485 80l-3 0 0-4 5 2zM493 82l0-2-2-2-3-2 0-2-1 2-1-5 2-5 5 0-2 3 4 0-2 5 2 0 6 9 3 1-1 2 0 2-2 2-8 0-6 2-1 0 6-4-4-1-1-1 3-1-1-2 0-2z"/>
      <path class="cm-b3" data-tip="Ireland: 228 per 100,000" d="M485 80l1 2-2 3-5 2-3-1 2-3-1-3 5-4 0 4z"/>
      <path class="cm-b3" data-tip="Germany: 214 per 100,000" d="M534 80l2 9-6 2 3 5-1 1 0 3-8 0-6-1 2-4-5-1 0-2 0-2-1-4 2-1 0-4 5-1-1-3 3 0 3 3 4-2z"/>
      <path class="cm-b3" data-tip="United States: 207 per 100,000" d="M199 95l68 0 1-1 1 2 6 2 8-1 7 5 4 5-1 5-4 5 1 1 10-3 0-2 2-1 4 0 7-4 8 0 8-8 3 1-1 4 1 2 0 1-10 6-2 2 2 2-10 3 4 0-5 0-4 6-1-2 0 4-3 4 1-3 0-4-1 4-2-1 2 1-1 8-17 13-1 5 1 10-2 5-2 0-1-2-2-6 1-2-2-5-4 1-2-2-9 0 0 4-10-2-4 1-8 5-1 6-5-1-3-10-4-1-2 2-2-1-5-8-12 2-8-5-7 1-2-5-5-2-2-18 3-8 6-9 2-8 4 0 0 3zM76 188l2 2-3 2-1-3 1-2zM122 61l2 0-3 1-1-1zM146 68l2 1-7 2zM204 34l-24 27 4 1 1 3 6-3 2 4 0 6 2 2-3 3-2-2 1-2-1-3 1-3-6 0-4-4-8-1-5-3-3 1-2 2-10 2 8-6-13 6 0 1-4 2-15 7-19 4 21-7 9-6-6 1 0-1-2 1 1-2-5 2 3-3-1-1-3 0-2-2 2-1-1-2 3-1 6-3 10-2 0-2 3-1-10 1-3-1 0-3 10-2 2 0-2 1 5 0-2-5-2-1 3-1 28-7 2 0 0 2zM121 51l5 1-3 1-3-1z"/>
      <path class="cm-b2" data-tip="South Korea: 196 per 100,000" d="M826 131l5-3 5 6 1 6-6 2-3-8 1 0z"/>
      <path class="cm-b2" data-tip="Netherlands: 189 per 100,000" d="M516 81l0 4-2 1 1 4-3-3-4 1 3-6z"/>
      <path class="cm-b2" data-tip="France: 176 per 100,000" d="M357 239l-4 7-4-1 1-4-1-4 1-3 3 1zM515 94l5 1-2 4-1 1-2 2 0 2 1-1 1 2 2 7-3 2-5-1-3 1 0 2-7-1-6-2 2-8-4-5-4-2 0-2 7 0-1-3 3 1 5-2 1-3 2-1 8 5zM522 115l2-1 0 5-2 0z"/>
      <path class="cm-b2" data-tip="Japan: 173 per 100,000" d="M865 126l-1 4 3 7 0 2-8 2-2 4-3-4-10 2 3 3 1 5-2 2-1-2-1-3-4-3 3-1 3-6 8 0 0-6 3 2 3-5-2-9 2-1zM864 111l1-1 2 3-3 1 0 3-6-2 1 4-3 0-2-4 0-2 3 0-3-7zM848 145l3-3 3 2-1 2-2-1 0 2z"/>
      <path class="cm-b2" data-tip="Czechia: 164 per 100,000" d="M536 89l10 5-4 2-5-1-2 2-2-1-3-5z"/>
      <path class="cm-b2" data-tip="Spain: 158 per 100,000" d="M481 133l1-3-1-5 3-6-1-1-3 0-1-2-2 2-1-4 4-2 15 1 6 2 7 1 0 2-3 2-3 0-3 6 1 2-6 6-5 0-3 3-3-3z"/>
      <path class="cm-b2" data-tip="Chile: 152 per 100,000" d="M336 421l2 7 4 0-2 3-7-2-12-7 10 4 1-4zM309 309l4 6 0 3 3 8 2 0 0 4-3 2 2 7-3 5-1 10 4 9 0 6-2 2 2 6-1 1 1 11 5 8-1 1 1 12-1 1 1 4 3 0 2 5 8 0-4 2 0 3-1 0-10-5-5-11 0-3 1-2-4-1 2-3-1-5 3 1 0-7-2-1 0 4-2 0 0-13-3-6 1-1 2-15-3-11 0-24-1-10z"/>
      <path class="cm-b2" data-tip="Portugal: 142 per 100,000" d="M477 118l2-2 1 2 3 0 1 1-3 6 1 5-1 3-4 1 0-5-2-1 3-7z"/>
      <path class="cm-b2" data-tip="Italy: 131 per 100,000" d="M526 102l4-1 4 2 1 3-4 1 1 4 6 6 2 0 0 2 7 4 0 1-4-2-1 2 2 2 0 1-2 3-1 0 0-3-2-3-11-8-2-5-4-1-3 2-2-7 5-1 1-1 3 0zM538 130l2-1-1 6-7-4 0-1zM522 121l1-1 2 2 0 4-2 1-2-6z"/>
      <path class="cm-b2" data-tip="Nepal: 126 per 100,000" d="M736 163l1 5-14-4-9-4 2-5 3 1 10 6z"/>
      <path class="cm-b2" data-tip="Poland: 118 per 100,000" d="M556 80l1 7 1 4-3 4-9-1-10-5-2-9 8-3 5 1 7 1z"/>
      <path class="cm-b2" data-tip="Greece: 104 per 100,000" d="M569 139l-4 1-4-1 1-1zM558 119l8 0 0-1 2 1-1 2-6 0 2 2-2 1-3-1 2 3-1 1 3 2 0 2-2-1 1 2-2 0 1 3-4-1-4-9 2-4z"/>
      <path class="cm-b1" data-tip="Argentina: 96 per 100,000" d="M336 421l3 4 7 3 0 1-4-1-4 0zM347 350l0 12 5 8-1 6-4 2-8 0 2 6-4 1-2-1-1 1 1 3 2 1 1-1 1 2-3 3 0 5-2 0-2 1 0 3 6 3 0 3-3 1 0 4-3 3 3 4-8 0-2-5-3 0-1-4 1-1-1-12 1-1-5-8-1-11 1-1-2-6 2-2 0-6-4-9 1-10 3-5-2-7 3-2 0-4 2-3 4 1 2 2 0-3 4 1 6 6 8 4-1 6 8 1 2-3 0-2 1-1 2 2 0 2z"/>
      <path class="cm-b1" data-tip="Romania: 92 per 100,000" d="M570 106l4 1-2 1 0 4-4-2-4 2-6-1-1-1-7-6 2 0 4-5 5 0 4-1 5 4z"/>
      <path class="cm-b1" data-tip="South Africa: 87 per 100,000" d="M544 345l1-2 1 2 3 1 4-2 1-12 2 7 2 0 5-5 2 1 4 0 4-6 7-5 5 0 1 7 0 5-2 0-2 3 2 2 2-2 2 0-2 6-12 13-6 4-9 0-6 3-5-2-1-5 1-3zM577 346l-2 0-3 3 2 2 3-1 1-3z"/>
      <path class="cm-b1" data-tip="Turkey: 79 per 100,000" d="M616 133l-6 0-7 1-8 0-1 3-1-1 1-2-4 0-1 2-4 0-3-2-2 0-3 2-5-2-4-5 1-2-2-2 3-3 4 0 1-2 4 0 6-3 4 0 9 4 5-1 3-1 5 1 1 3 3 2-2 1zM566 118l5-1 2 3-3 0-3 3 0-2 1-2z"/>
      <path class="cm-b1" data-tip="Brazil: 71 per 100,000" d="M360 362l-1-2 1-2-2-2-9-6-2 0 9-11 0-2-2-2-1 1 0-6-3 0-1-5-6-1-2-6 2-7-3-3 0-3-5 0-2-8-10-4-4-3 0-6-3 1-5 3-3 0-3 0 0-5-2 2-6-2 1-1-3-5 2-3 1-4 6-4 2 0 1-10-1-5 2 0 0-1-2-1 0-2 5 0 1-1 2 3 2 1 2 0 6-4-2-1-1-5-1 0 5 1 6-3 1-2 2 1 1 3-2 4 1 3 3 2 4-3 2 1 1 0 1-2 4 0 4 1 4-7 1 0 2 8 1 0 0 2-2 3 1 1 5 0 0 4 2-2 8 3 1 3 3-1 10 2 8 6 4 1 3 7-1 6-10 13 0 15-4 13-3 4-7 1-7 5-2 3-1 9z"/>
      <path class="cm-b1" data-tip="Ukraine: 67 per 100,000" d="M576 86l5-1 2 3 2 0 1 2 12 3 0 6-2 0-1 2-6 2-2 1 0 1-4 0-4-1 0-2-3 1-2 4-4-1 2-3 2 0 0-1-3-4-3-1-3 1-4 1-5 0-2-2 1-2 3-4-1-4 4-1 13 2 0-2z"/>
      <path class="cm-b1" data-tip="Mexico: 64 per 100,000" d="M191 148l7-1 8 5 12-2 5 8 2 1 2-2 4 1 3 10 5 1-4 11 3 12 4 2 8-2 2-1 2-6 9-2 1 3-4 8-1-1-3 2-5 0 0 2-2 0 3 4-4 0-2 5-4-5-2 0-5 1-18-8-4-3-1-4 2-3-1-5-7-9 0-3-5-8-1-7-1-1-2-1-2 5 5 12 1 7 3 3-2 2-5-6 1-4-6-6 3-2-3-4z"/>
      <path class="cm-b1" data-tip="Ecuador: 61 per 100,000" d="M291 253l-1 5-3 3-3 1-4 7-1-2-2 0 0-3 1-3 0-1-1 1-2-1 0-4 3-6 3-2 4 3 3 0z"/>
      <path class="cm-b1" data-tip="Peru: 58 per 100,000" d="M306 266l-2 0-6 4-1 4-2 3 3 5-1 1 6 2 2-2 0 5 3 0 3 5-2 8 2 5-2 3-1 3-17-12-12-24-4-4 1-1-2-3 3-4 0 3 2 0 1 2 4-7 3-1 3-3 1-5 4 4 2 3 6 0 2 1-1 4z"/>
      <path class="cm-b1" data-tip="Bolivia: 55 per 100,000" d="M308 288l3 0 5-3 3-1 0 6 4 3 10 4 2 8 5 0 0 3 3 3-2 7-2-3-8 1-1 8-4-1 0 3-2-2-4-1-2 3-2 0-3-8 0-3-4-6 2-3-2-5 2-8z"/>
      <path class="cm-b1" data-tip="Russia: 54 per 100,000" d="M674 6l8 1 7 2 1 2-13-1-6-2zM695 10l7 2-10 1 0-3zM773 18l14 1 1 2-10 0-6-1-1-2zM794 20l6 0-5 1-5-1zM783 25l3-2 5 2zM584 7l12 0-7 1zM554 79l-7-1 0-1 3-1 4 1zM608 24l4-3-1-1 9-3 13-1 2 1-18 5-4 5 2 2 5 3-9-1-5-1 0-2 1 0 0-2 3-2zM840 81l14 14-4-1 1 5 6 5-3-2 0 3-2-3-8-13-6-7 1-2-2-1zM832 117l-1-1-1-2 2 0-4-6 1-1 4 0-1-10-5 2-4 0-7-5-5-1-10-10-7-2-5 1-1 1 2 3 0 6-2 2-4-2-6-1-2 2-5 2-6-1-5-3-8 1-4-2-1-2-9-2-1 3 1 2-1 2-14-3-9 4-12-5-4 0-4-1 0 1-13-10 1-1-7 3-1-1-5-1-2-3-5-1-8 4-8 1-1 1 2 2-3 3 5 2 0 2-4 0-8-1-2 1-9-3-4 0-4 3 0 2-3-1-1 6 4 2 4 4-5 6 6 9-1 2-4-2-3-2-14-3-9-6 3-3-2-1 4-2-2 0 1-2 2 0 0-6-12-3-1-2-2 0-2-3-5 1-1-3 3-1-5-5 0-2-7-2-3-4 1-6 2-1-2-2 6-7-4-2 1-1-2-3 1-2-4-3 2-2-4-2 0-2 5-1 2-1 10 2 11 4 1 2-6 3-11-2 4 2 1 4 5 2-2-3 1-1 6 2 2-1-2-2 4-3 4 1 1-2-4-5 6 1 2 2-3 0 1 2 2 1 3-1 0-2 11-3 1 0-1 1 10-1 3 1 2-2-3-1 1-1 19 5 1-2-6-2-3-4 4-6 6 1 1 2-1 2 4 2 1 4 3 2-2 6 3 0 3-4-2-2 0-2-4-1 1-3-4-2 2-2-1-2 3 1 0 3 3 0-2-1 3-2 9 2-5-5 12-1-3-1 1-2 11-2 14-1 0-2 4-1 8 3 7-1 8 2 1 2-6 2 7 1 3 2 3-1 17 2-1-2 8 0 16 7-1-2 4 1 12 0-4-3 2-1 20 2 11 3 13 0 8 4 14 0 7 2 1-1-4-3 12 1 12 2 16 13-6-5 3 3-1 2-3-1 11 7-4-1-6 3-3 4 1 1-5-2-4 2-2-1-1 2-4-1 1 5 5 2 3 4-2 0 2 3 2 1-3 2 2 3-3 1 2 3-2 3-13-14-3-4-1-3 3-1 4-9-2-4-3 1 1 2-2 3-6-3-4 1-2 4 4 2-8 1-1-2-4 0-2 1-14 1-7 12 9 3 1-1 3 0 6 3 6 15-1 7-3 9-2 2-4-2zM871 29l2 2-3 0zM583 105l4 0 4 1 0 1-6 3-1-1 0-1-3-1z"/>
      <path class="cm-b0" data-tip="Colombia: 49 per 100,000" d="M314 249l-2-3-1 1-5 0 0 2 2 1 0 1-2 0 1 5-1 10-2-1 1-4-2-1-6 0-2-3-4-4-3-2-3 0-4-3 1-4 4-4-2-11 2-2 0-2 5-3 2-5 4 0 5-4 2 1-1 1-4 4-2 4 2 0 2 7 5 0 2 3 5 0-1 5 1 4-1 2z"/>
      <path class="cm-b0" data-tip="Thailand: 47 per 100,000" d="M790 207l-7 0-1 3 1 3-5-1 0-2-2 0-2 11 4 8 5 4-2 1-1-1-3-1-4-6-1 2 1-7 2-7-5-10 1-3-5-8 2-4 5-2 1 3 2 0 1 6 5-2 2 0 3 3 0 3 3 3z"/>
      <path class="cm-b0" data-tip="Kenya: 44 per 100,000" d="M609 268l-4-4 0-1-11-7 0-4 3-5-3-8 4-4 2 3 6 3 4 1 3-3 3 1-2 4 0 11 2 3-4 3z"/>
      <path class="cm-b0" data-tip="Morocco: 41 per 100,000" d="M494 139l3 10-7 2 0 2-4 3-9 4 0 4-1 1-7 1-3 7-4 3-2 7-6 1 7-16 5-6 3 0 6-6-1-4 1-4 7-5 3-6z"/>
      <path class="cm-b0" data-tip="China: 38 per 100,000" d="M799 194l-2-1-1-3 2-1 4-1 1 1-1 4zM703 116l0-2 1-1-4-5 6-2 0-6 5 1 1-1-1-3 2 0 1-3 2 2 9 6 2 5 12 3 5 5 11 0 12 4 2-2 10-3 3-2-3-3 1-2 4 1 5-3 2-3 6 0-6-4-6 1-1-1 0-6 4 2 2-2 0-6-2-3 1-1 5-1 7 2 10 10 5 1 7 5 4 0 5-2 1 10-4 0-1 1 4 6-2 0 1 2-2-2-1 2-3 1 1 2-4-1-3 6-7 3 0-5-2-1-4 5-2 0-1 2 7 5 2-2 5 1 1 2-3 0-3 6 3 2 7 8 1 3-1 1 3 2 0 6-1 0-4 12-6 5-4 2-1-1-2 2-6 2 0 3-2 0 0-3-5-1-3-1-2-3-4-2-2 2-6 1-1 1 1 4-2-1 0-2-2 1-4-2 1-2-2-1-1-3-3 1-1-4 2-3-1-5-2-3-2 1-3-1 1-1-2-2-2 1-2-1-5 5-2 0-4-2-3 4-1-3-1 1-7-1-10-6-3-1-8-4-1-4 2 1 0-2-2-4-4-4-4-1-4-4-1-1-1-3-2-1-2-2 2-3 5-1 0-2 3 0z"/>
      <path class="cm-b0" data-tip="Kazakhstan: 33 per 100,000" d="M714 94l-1 3-2 0 1 3-1 1-5-1 0 6-6 2 4 5-1 1 0 2-3-1-13-2-1 3-4-1-2 1-6 6-1-2-3 0-1-3-1 0-1-3-4-2-7 0-10-6-6 2 3 11-6-3-4 2 0-3-3-1-4-5 3 0-1-2 5 0-2-5-4-1-5 2-4-4-4-2 1-6 3 1 0-2 4-3 4 0 9 3 2-1 8 1 4 0 0-2-5-2 3-3-2-2 1-1 8-1 8-4 5 1 2 3 5 1 1 1 7-3-1 1 13 10 0-1 4 1 4 0z"/>
      <path class="cm-b0" data-tip="Vietnam: 29 per 100,000" d="M788 219l5-2-1-2 4-2-1-6 0-6-8-8-3-2 2-2-2-3-3 0-4-6 6-1 2-2 4 2 2 3 3 1-4 3-1 5 10 13 2 11-10 10 0-4z"/>
      <path class="cm-b0" data-tip="Indonesia: 26 per 100,000" d="M892 261l-2 21-2-3-7 1 3-4-1-6-12-6-2 2 0-3-2-1 4-2-4 0-4-4 5-2 4 1 1 7 3 1 6-5zM846 281l0 2-2 2-3 1 2-3zM872 275l1-5 1 3zM827 239l-1 3 2 3-1 2 4 3-4 0-1 5-2 2-2 9 0-2-3 2-1-2-4-1-3 1-1-2-4 0 0-4-3-7 2-5 2 4 6-2 3 1 2-1 4-9zM859 262l3 1 1 2-8-1 1-2zM852 265l-2-2 3 0zM855 246l2 3 0 3-1 0 0 4-2-7zM841 250l4 0 2-3-1 4-12 1-1 2 3 3 7-2-1 1-1 0-4 3 5 11-2 1-1-1 2-3-3 1-1-1-1-6-2 1 0 8-2 1-1-1 1-6-2-2 3-11 3-3zM833 286l-4-3 3 0 2 2zM836 280l4-1 0 1-4 1-4 0 0-1zM827 280l2-1 1 2-7 1 4-3zM801 273l0 1 5 1 1-2 5 2 1 2 7 3-3 1-22-5 0-1-3 0 2-3zM790 256l1 4 2 0 2 3-2 8-3 1-5-6-9-14-2-5-10-12 6 1 10 10 2 0 3 2 3 4-1 3z"/>
      <path class="cm-b0" data-tip="India: 22 per 100,000" d="M760 162l0 3-2 0-3 2 0 6-1 3-2-1 1 6-1 1-3-5-1 2-1-2 2-5-7-1 0-2-4-2-1 3 3 1-2 3 2 1 2 7-1 1-5 0 0 5-4 2-7 8 0 1-4 3 0 17-2 1-1 2 1 1-2 1-2 3-3-3-10-23-5-17-5 1-4-3 1-2-1-1-4-3 2-2 6 0-6-8 3-4 3 1 7-14-3-2-3-5 1-1 7 0 2-3 4 4 2 4 0 2-2-1 1 4 8 4-2 5 9 4 14 4-1-5 1-1 1 3 3 2 6-1-2-3 2 0 5-5 2 1 2-1 2 2-1 1z"/>
      <path class="cm-b0" data-tip="Saudi Arabia: 21 per 100,000" d="M593 158l3 1 4-3 1-2-3-3 6-2 7 3 8 7 5 0 5 2 6 6 2 6 2 0 0 2 2 4 9 1 1 2-1 6-8 4-8 1-5 5-1-1-9-1-2 4-5-10-6-6-2-8-3-2-7-12-1 0z"/>
      <path class="cm-b0" data-tip="Egypt: 18 per 100,000" d="M600 182l-32 0-2-26 1-5 10 2 5-2 3 2 0-1 6 0 2 6-2 6-5-7 10 19 0 2z"/>
    </svg>
        <div class="cm-tip" data-map-tip hidden aria-hidden="true"></div>
      </div>
      <ul class="mt-3.5 flex flex-wrap gap-x-4 gap-y-2 text-[.8rem] text-[#4b5563]" aria-label="Active users per 100,000 people">
        <li class="flex items-center gap-[7px]"><span class="cm-sw b0" aria-hidden="true"></span><b class="text-[#111827]">Under 50</b> 11 countries</li>
        <li class="flex items-center gap-[7px]"><span class="cm-sw b1" aria-hidden="true"></span><b class="text-[#111827]">50–99</b> 11 countries</li>
        <li class="flex items-center gap-[7px]"><span class="cm-sw b2" aria-hidden="true"></span><b class="text-[#111827]">100–199</b> 12 countries</li>
        <li class="flex items-center gap-[7px]"><span class="cm-sw b3" aria-hidden="true"></span><b class="text-[#111827]">200–299</b> 7 countries</li>
        <li class="flex items-center gap-[7px]"><span class="cm-sw b4" aria-hidden="true"></span><b class="text-[#111827]">300 and over</b> 6 countries</li>
        <li class="flex items-center gap-[7px]"><span class="cm-sw none" aria-hidden="true"></span>No data</li>
      </ul>
    </figure>
    <div>
      <h3 class="text-[.75rem] font-bold tracking-[.1em] text-[#4b5563] uppercase">Highest rates</h3>
      <ol class="mt-3 grid gap-3">
        <li class="grid grid-cols-[1fr_auto] gap-x-2.5 gap-y-1 text-[.9rem]">Norway <span class="font-bold tabular-nums">412</span><div class="col-span-full h-1.5 overflow-hidden rounded-full bg-[#f3f4f6]" aria-hidden="true"><i class="block h-full rounded-full bg-[#440154]" style="width:100%"></i></div></li>
        <li class="grid grid-cols-[1fr_auto] gap-x-2.5 gap-y-1 text-[.9rem]">New Zealand <span class="font-bold tabular-nums">388</span><div class="col-span-full h-1.5 overflow-hidden rounded-full bg-[#f3f4f6]" aria-hidden="true"><i class="block h-full rounded-full bg-[#440154]" style="width:94%"></i></div></li>
        <li class="grid grid-cols-[1fr_auto] gap-x-2.5 gap-y-1 text-[.9rem]">Sweden <span class="font-bold tabular-nums">356</span><div class="col-span-full h-1.5 overflow-hidden rounded-full bg-[#f3f4f6]" aria-hidden="true"><i class="block h-full rounded-full bg-[#440154]" style="width:86%"></i></div></li>
        <li class="grid grid-cols-[1fr_auto] gap-x-2.5 gap-y-1 text-[.9rem]">Finland <span class="font-bold tabular-nums">331</span><div class="col-span-full h-1.5 overflow-hidden rounded-full bg-[#f3f4f6]" aria-hidden="true"><i class="block h-full rounded-full bg-[#440154]" style="width:80%"></i></div></li>
        <li class="grid grid-cols-[1fr_auto] gap-x-2.5 gap-y-1 text-[.9rem]">Australia <span class="font-bold tabular-nums">322</span><div class="col-span-full h-1.5 overflow-hidden rounded-full bg-[#f3f4f6]" aria-hidden="true"><i class="block h-full rounded-full bg-[#440154]" style="width:78%"></i></div></li>
      </ol>
      <p class="mt-3.5 text-[.78rem] text-[#4b5563]">Countries in grey have fewer than 1,000 users, too few to report. Borders: Natural Earth.</p>
    </div>
  </div>
  <div class="mt-5" data-view="table" hidden>
    <div class="max-h-[380px] overflow-auto rounded-xl border border-[#e5e7eb] focus-visible:outline-3 focus-visible:outline-offset-2 focus-visible:outline-[#3b528b]" tabindex="0" role="region" aria-labelledby="cm-world-cap">
      <table class="w-full border-collapse text-[.9rem] [&_td]:border-t [&_td]:border-[#e5e7eb] [&_td]:px-3.5 [&_td]:py-[9px] [&_th]:border-t [&_th]:border-[#e5e7eb] [&_th]:px-3.5 [&_th]:py-[9px] [&_th]:text-left">
        <caption id="cm-world-cap" class="px-3.5 py-3 text-left font-bold">Active users per 100,000 people, 47 countries</caption>
        <thead class="sticky top-0 bg-[#f9fafb] text-[.75rem] tracking-[.06em] text-[#4b5563] uppercase"><tr><th scope="col">Rank</th><th scope="col">Country</th><th scope="col">Per 100,000</th><th scope="col">Band</th></tr></thead>
        <tbody>
          <tr><td class="text-[#4b5563]">1</td><th scope="row" class="font-semibold">Norway</th><td class="font-bold tabular-nums">412</td><td class="whitespace-nowrap"><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td class="text-[#4b5563]">2</td><th scope="row" class="font-semibold">New Zealand</th><td class="font-bold tabular-nums">388</td><td class="whitespace-nowrap"><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td class="text-[#4b5563]">3</td><th scope="row" class="font-semibold">Sweden</th><td class="font-bold tabular-nums">356</td><td class="whitespace-nowrap"><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td class="text-[#4b5563]">4</td><th scope="row" class="font-semibold">Finland</th><td class="font-bold tabular-nums">331</td><td class="whitespace-nowrap"><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td class="text-[#4b5563]">5</td><th scope="row" class="font-semibold">Australia</th><td class="font-bold tabular-nums">322</td><td class="whitespace-nowrap"><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td class="text-[#4b5563]">6</td><th scope="row" class="font-semibold">Switzerland</th><td class="font-bold tabular-nums">305</td><td class="whitespace-nowrap"><span class="cm-sw b4" aria-hidden="true"></span> 300 and over</td></tr>
          <tr><td class="text-[#4b5563]">7</td><th scope="row" class="font-semibold">Canada</th><td class="font-bold tabular-nums">284</td><td class="whitespace-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-[#4b5563]">8</td><th scope="row" class="font-semibold">Austria</th><td class="font-bold tabular-nums">268</td><td class="whitespace-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-[#4b5563]">9</td><th scope="row" class="font-semibold">Denmark</th><td class="font-bold tabular-nums">262</td><td class="whitespace-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-[#4b5563]">10</td><th scope="row" class="font-semibold">United Kingdom</th><td class="font-bold tabular-nums">241</td><td class="whitespace-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-[#4b5563]">11</td><th scope="row" class="font-semibold">Ireland</th><td class="font-bold tabular-nums">228</td><td class="whitespace-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-[#4b5563]">12</td><th scope="row" class="font-semibold">Germany</th><td class="font-bold tabular-nums">214</td><td class="whitespace-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-[#4b5563]">13</td><th scope="row" class="font-semibold">United States</th><td class="font-bold tabular-nums">207</td><td class="whitespace-nowrap"><span class="cm-sw b3" aria-hidden="true"></span> 200–299</td></tr>
          <tr><td class="text-[#4b5563]">14</td><th scope="row" class="font-semibold">South Korea</th><td class="font-bold tabular-nums">196</td><td class="whitespace-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-[#4b5563]">15</td><th scope="row" class="font-semibold">Netherlands</th><td class="font-bold tabular-nums">189</td><td class="whitespace-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-[#4b5563]">16</td><th scope="row" class="font-semibold">France</th><td class="font-bold tabular-nums">176</td><td class="whitespace-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-[#4b5563]">17</td><th scope="row" class="font-semibold">Japan</th><td class="font-bold tabular-nums">173</td><td class="whitespace-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-[#4b5563]">18</td><th scope="row" class="font-semibold">Czechia</th><td class="font-bold tabular-nums">164</td><td class="whitespace-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-[#4b5563]">19</td><th scope="row" class="font-semibold">Spain</th><td class="font-bold tabular-nums">158</td><td class="whitespace-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-[#4b5563]">20</td><th scope="row" class="font-semibold">Chile</th><td class="font-bold tabular-nums">152</td><td class="whitespace-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-[#4b5563]">21</td><th scope="row" class="font-semibold">Portugal</th><td class="font-bold tabular-nums">142</td><td class="whitespace-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-[#4b5563]">22</td><th scope="row" class="font-semibold">Italy</th><td class="font-bold tabular-nums">131</td><td class="whitespace-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-[#4b5563]">23</td><th scope="row" class="font-semibold">Nepal</th><td class="font-bold tabular-nums">126</td><td class="whitespace-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-[#4b5563]">24</td><th scope="row" class="font-semibold">Poland</th><td class="font-bold tabular-nums">118</td><td class="whitespace-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-[#4b5563]">25</td><th scope="row" class="font-semibold">Greece</th><td class="font-bold tabular-nums">104</td><td class="whitespace-nowrap"><span class="cm-sw b2" aria-hidden="true"></span> 100–199</td></tr>
          <tr><td class="text-[#4b5563]">26</td><th scope="row" class="font-semibold">Argentina</th><td class="font-bold tabular-nums">96</td><td class="whitespace-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-[#4b5563]">27</td><th scope="row" class="font-semibold">Romania</th><td class="font-bold tabular-nums">92</td><td class="whitespace-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-[#4b5563]">28</td><th scope="row" class="font-semibold">South Africa</th><td class="font-bold tabular-nums">87</td><td class="whitespace-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-[#4b5563]">29</td><th scope="row" class="font-semibold">Turkey</th><td class="font-bold tabular-nums">79</td><td class="whitespace-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-[#4b5563]">30</td><th scope="row" class="font-semibold">Brazil</th><td class="font-bold tabular-nums">71</td><td class="whitespace-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-[#4b5563]">31</td><th scope="row" class="font-semibold">Ukraine</th><td class="font-bold tabular-nums">67</td><td class="whitespace-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-[#4b5563]">32</td><th scope="row" class="font-semibold">Mexico</th><td class="font-bold tabular-nums">64</td><td class="whitespace-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-[#4b5563]">33</td><th scope="row" class="font-semibold">Ecuador</th><td class="font-bold tabular-nums">61</td><td class="whitespace-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-[#4b5563]">34</td><th scope="row" class="font-semibold">Peru</th><td class="font-bold tabular-nums">58</td><td class="whitespace-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-[#4b5563]">35</td><th scope="row" class="font-semibold">Bolivia</th><td class="font-bold tabular-nums">55</td><td class="whitespace-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-[#4b5563]">36</td><th scope="row" class="font-semibold">Russia</th><td class="font-bold tabular-nums">54</td><td class="whitespace-nowrap"><span class="cm-sw b1" aria-hidden="true"></span> 50–99</td></tr>
          <tr><td class="text-[#4b5563]">37</td><th scope="row" class="font-semibold">Colombia</th><td class="font-bold tabular-nums">49</td><td class="whitespace-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-[#4b5563]">38</td><th scope="row" class="font-semibold">Thailand</th><td class="font-bold tabular-nums">47</td><td class="whitespace-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-[#4b5563]">39</td><th scope="row" class="font-semibold">Kenya</th><td class="font-bold tabular-nums">44</td><td class="whitespace-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-[#4b5563]">40</td><th scope="row" class="font-semibold">Morocco</th><td class="font-bold tabular-nums">41</td><td class="whitespace-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-[#4b5563]">41</td><th scope="row" class="font-semibold">China</th><td class="font-bold tabular-nums">38</td><td class="whitespace-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-[#4b5563]">42</td><th scope="row" class="font-semibold">Kazakhstan</th><td class="font-bold tabular-nums">33</td><td class="whitespace-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-[#4b5563]">43</td><th scope="row" class="font-semibold">Vietnam</th><td class="font-bold tabular-nums">29</td><td class="whitespace-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-[#4b5563]">44</td><th scope="row" class="font-semibold">Indonesia</th><td class="font-bold tabular-nums">26</td><td class="whitespace-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-[#4b5563]">45</td><th scope="row" class="font-semibold">India</th><td class="font-bold tabular-nums">22</td><td class="whitespace-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-[#4b5563]">46</td><th scope="row" class="font-semibold">Saudi Arabia</th><td class="font-bold tabular-nums">21</td><td class="whitespace-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
          <tr><td class="text-[#4b5563]">47</td><th scope="row" class="font-semibold">Egypt</th><td class="font-bold tabular-nums">18</td><td class="whitespace-nowrap"><span class="cm-sw b0" aria-hidden="true"></span> Under 50</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section></div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#4b5563] uppercase">Tile grid map with the value in every tile</span>
<section class="rounded-[20px] border border-[#e5e7eb] bg-white p-[18px] text-[#111827] sm:p-[26px]" aria-labelledby="cm-us-title">
  <h2 id="cm-us-title" class="text-[1.35rem] leading-tight font-bold tracking-[-.02em]">Trail club members per 10,000 residents</h2><p class="mt-1 text-[.92rem] text-[#4b5563]">One tile per state, placed roughly where the state is. Sample data.</p>
  <ul class="cm-tiles mt-5" aria-label="Members per 10,000 residents by state">
    <li class="cm-tile b4" style="grid-area:1/1"><span class="sr-only">Alaska: 41</span><b aria-hidden="true">AK</b><span aria-hidden="true">41</span></li>
    <li class="cm-tile b3" style="grid-area:1/12"><span class="sr-only">Maine: 37</span><b aria-hidden="true">ME</b><span aria-hidden="true">37</span></li>
    <li class="cm-tile b2" style="grid-area:2/7"><span class="sr-only">Wisconsin: 22</span><b aria-hidden="true">WI</b><span aria-hidden="true">22</span></li>
    <li class="cm-tile b4" style="grid-area:2/11"><span class="sr-only">Vermont: 46</span><b aria-hidden="true">VT</b><span aria-hidden="true">46</span></li>
    <li class="cm-tile b3" style="grid-area:2/12"><span class="sr-only">New Hampshire: 39</span><b aria-hidden="true">NH</b><span aria-hidden="true">39</span></li>
    <li class="cm-tile b4" style="grid-area:3/2"><span class="sr-only">Washington: 44</span><b aria-hidden="true">WA</b><span aria-hidden="true">44</span></li>
    <li class="cm-tile b3" style="grid-area:3/3"><span class="sr-only">Idaho: 33</span><b aria-hidden="true">ID</b><span aria-hidden="true">33</span></li>
    <li class="cm-tile b4" style="grid-area:3/4"><span class="sr-only">Montana: 48</span><b aria-hidden="true">MT</b><span aria-hidden="true">48</span></li>
    <li class="cm-tile b0" style="grid-area:3/5"><span class="sr-only">North Dakota: 9</span><b aria-hidden="true">ND</b><span aria-hidden="true">9</span></li>
    <li class="cm-tile b2" style="grid-area:3/6"><span class="sr-only">Minnesota: 26</span><b aria-hidden="true">MN</b><span aria-hidden="true">26</span></li>
    <li class="cm-tile b1" style="grid-area:3/7"><span class="sr-only">Illinois: 12</span><b aria-hidden="true">IL</b><span aria-hidden="true">12</span></li>
    <li class="cm-tile b1" style="grid-area:3/8"><span class="sr-only">Michigan: 19</span><b aria-hidden="true">MI</b><span aria-hidden="true">19</span></li>
    <li class="cm-tile b2" style="grid-area:3/10"><span class="sr-only">New York: 21</span><b aria-hidden="true">NY</b><span aria-hidden="true">21</span></li>
    <li class="cm-tile b2" style="grid-area:3/11"><span class="sr-only">Massachusetts: 27</span><b aria-hidden="true">MA</b><span aria-hidden="true">27</span></li>
    <li class="cm-tile b4" style="grid-area:4/2"><span class="sr-only">Oregon: 42</span><b aria-hidden="true">OR</b><span aria-hidden="true">42</span></li>
    <li class="cm-tile b1" style="grid-area:4/3"><span class="sr-only">Nevada: 18</span><b aria-hidden="true">NV</b><span aria-hidden="true">18</span></li>
    <li class="cm-tile b4" style="grid-area:4/4"><span class="sr-only">Wyoming: 51</span><b aria-hidden="true">WY</b><span aria-hidden="true">51</span></li>
    <li class="cm-tile b1" style="grid-area:4/5"><span class="sr-only">South Dakota: 15</span><b aria-hidden="true">SD</b><span aria-hidden="true">15</span></li>
    <li class="cm-tile b0" style="grid-area:4/6"><span class="sr-only">Iowa: 8</span><b aria-hidden="true">IA</b><span aria-hidden="true">8</span></li>
    <li class="cm-tile b0" style="grid-area:4/7"><span class="sr-only">Indiana: 7</span><b aria-hidden="true">IN</b><span aria-hidden="true">7</span></li>
    <li class="cm-tile b1" style="grid-area:4/8"><span class="sr-only">Ohio: 11</span><b aria-hidden="true">OH</b><span aria-hidden="true">11</span></li>
    <li class="cm-tile b1" style="grid-area:4/9"><span class="sr-only">Pennsylvania: 17</span><b aria-hidden="true">PA</b><span aria-hidden="true">17</span></li>
    <li class="cm-tile b1" style="grid-area:4/10"><span class="sr-only">New Jersey: 14</span><b aria-hidden="true">NJ</b><span aria-hidden="true">14</span></li>
    <li class="cm-tile b1" style="grid-area:4/11"><span class="sr-only">Connecticut: 16</span><b aria-hidden="true">CT</b><span aria-hidden="true">16</span></li>
    <li class="cm-tile b1" style="grid-area:4/12"><span class="sr-only">Rhode Island: 13</span><b aria-hidden="true">RI</b><span aria-hidden="true">13</span></li>
    <li class="cm-tile b2" style="grid-area:5/2"><span class="sr-only">California: 29</span><b aria-hidden="true">CA</b><span aria-hidden="true">29</span></li>
    <li class="cm-tile b4" style="grid-area:5/3"><span class="sr-only">Utah: 47</span><b aria-hidden="true">UT</b><span aria-hidden="true">47</span></li>
    <li class="cm-tile b4" style="grid-area:5/4"><span class="sr-only">Colorado: 56</span><b aria-hidden="true">CO</b><span aria-hidden="true">56</span></li>
    <li class="cm-tile b0" style="grid-area:5/5"><span class="sr-only">Nebraska: 6</span><b aria-hidden="true">NE</b><span aria-hidden="true">6</span></li>
    <li class="cm-tile b1" style="grid-area:5/6"><span class="sr-only">Missouri: 10</span><b aria-hidden="true">MO</b><span aria-hidden="true">10</span></li>
    <li class="cm-tile b1" style="grid-area:5/7"><span class="sr-only">Kentucky: 14</span><b aria-hidden="true">KY</b><span aria-hidden="true">14</span></li>
    <li class="cm-tile b2" style="grid-area:5/8"><span class="sr-only">West Virginia: 23</span><b aria-hidden="true">WV</b><span aria-hidden="true">23</span></li>
    <li class="cm-tile b2" style="grid-area:5/9"><span class="sr-only">Virginia: 20</span><b aria-hidden="true">VA</b><span aria-hidden="true">20</span></li>
    <li class="cm-tile b1" style="grid-area:5/10"><span class="sr-only">Maryland: 15</span><b aria-hidden="true">MD</b><span aria-hidden="true">15</span></li>
    <li class="cm-tile b0" style="grid-area:5/11"><span class="sr-only">Delaware: 5</span><b aria-hidden="true">DE</b><span aria-hidden="true">5</span></li>
    <li class="cm-tile b3" style="grid-area:6/3"><span class="sr-only">Arizona: 31</span><b aria-hidden="true">AZ</b><span aria-hidden="true">31</span></li>
    <li class="cm-tile b2" style="grid-area:6/4"><span class="sr-only">New Mexico: 28</span><b aria-hidden="true">NM</b><span aria-hidden="true">28</span></li>
    <li class="cm-tile b0" style="grid-area:6/5"><span class="sr-only">Kansas: 4</span><b aria-hidden="true">KS</b><span aria-hidden="true">4</span></li>
    <li class="cm-tile b1" style="grid-area:6/6"><span class="sr-only">Arkansas: 12</span><b aria-hidden="true">AR</b><span aria-hidden="true">12</span></li>
    <li class="cm-tile b2" style="grid-area:6/7"><span class="sr-only">Tennessee: 24</span><b aria-hidden="true">TN</b><span aria-hidden="true">24</span></li>
    <li class="cm-tile b2" style="grid-area:6/8"><span class="sr-only">North Carolina: 25</span><b aria-hidden="true">NC</b><span aria-hidden="true">25</span></li>
    <li class="cm-tile b1" style="grid-area:6/9"><span class="sr-only">South Carolina: 11</span><b aria-hidden="true">SC</b><span aria-hidden="true">11</span></li>
    <li class="cm-tile b1" style="grid-area:6/10"><span class="sr-only">District of Columbia: 18</span><b aria-hidden="true">DC</b><span aria-hidden="true">18</span></li>
    <li class="cm-tile b0" style="grid-area:7/5"><span class="sr-only">Oklahoma: 6</span><b aria-hidden="true">OK</b><span aria-hidden="true">6</span></li>
    <li class="cm-tile b0" style="grid-area:7/6"><span class="sr-only">Louisiana: 5</span><b aria-hidden="true">LA</b><span aria-hidden="true">5</span></li>
    <li class="cm-tile b0" style="grid-area:7/7"><span class="sr-only">Mississippi: 4</span><b aria-hidden="true">MS</b><span aria-hidden="true">4</span></li>
    <li class="cm-tile b0" style="grid-area:7/8"><span class="sr-only">Alabama: 7</span><b aria-hidden="true">AL</b><span aria-hidden="true">7</span></li>
    <li class="cm-tile b1" style="grid-area:7/9"><span class="sr-only">Georgia: 13</span><b aria-hidden="true">GA</b><span aria-hidden="true">13</span></li>
    <li class="cm-tile b3" style="grid-area:8/1"><span class="sr-only">Hawaii: 34</span><b aria-hidden="true">HI</b><span aria-hidden="true">34</span></li>
    <li class="cm-tile b1" style="grid-area:8/5"><span class="sr-only">Texas: 10</span><b aria-hidden="true">TX</b><span aria-hidden="true">10</span></li>
    <li class="cm-tile b0" style="grid-area:8/10"><span class="sr-only">Florida: 9</span><b aria-hidden="true">FL</b><span aria-hidden="true">9</span></li>
  </ul>
  <ul class="mt-3.5 flex flex-wrap gap-x-4 gap-y-2 text-[.8rem] text-[#4b5563]" aria-label="Members per 10,000 residents">
    <li class="flex items-center gap-[7px]"><span class="cm-sw b0" aria-hidden="true"></span>Under 10</li>
    <li class="flex items-center gap-[7px]"><span class="cm-sw b1" aria-hidden="true"></span>10–19</li>
    <li class="flex items-center gap-[7px]"><span class="cm-sw b2" aria-hidden="true"></span>20–29</li>
    <li class="flex items-center gap-[7px]"><span class="cm-sw b3" aria-hidden="true"></span>30–39</li>
    <li class="flex items-center gap-[7px]"><span class="cm-sw b4" aria-hidden="true"></span>40 and over</li>
      </ul>
</section></div>

CSS

@layer components {
/* Choropleth: five-step viridis scale (readable with the common forms of colour blindness), every value also in text. */
.cm-frame{--cm-sea:#eef1f5;--cm-none:#d3d8df;position:relative;border-radius:14px;background:var(--cm-sea);overflow:hidden}
.cm-frame svg{display:block;width:100%;height:auto}
.cm-none{fill:var(--cm-none);stroke:#fff;stroke-width:.6}
.cm-frame [data-tip]{stroke:#fff;stroke-width:.7}
.cm-frame [data-tip]:hover{stroke:#111827;stroke-width:1.8}
.cm-b0{fill:#fde725}.cm-b1{fill:#5ec962}.cm-b2{fill:#21918c}.cm-b3{fill:#3b528b}.cm-b4{fill:#440154}
.cm-tip{position:absolute;left:0;top:0;z-index:2;transform:translate(-50%,calc(-100% - 12px));padding:7px 11px;border-radius:9px;background:#111827;color:#fff;
  font-size:.8rem;font-weight:600;white-space:nowrap;pointer-events:none}
.cm-tip[hidden]{display:none}
.cm-sw{display:inline-block;width:14px;height:14px;border-radius:4px;flex:none}
.cm-sw.b0{background:#fde725}.cm-sw.b1{background:#5ec962}.cm-sw.b2{background:#21918c}.cm-sw.b3{background:#3b528b}.cm-sw.b4{background:#440154}.cm-sw.none{background:#d3d8df}
.cm-tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(8,auto);gap:4px;list-style:none}
.cm-tile{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;line-height:1.05;text-align:center}
.cm-tile b{font-size:.78rem;font-weight:800}
.cm-tile span{font-size:.72rem;font-weight:600}
.cm-tile.b0{background:#fde725;color:#111827}.cm-tile.b1{background:#5ec962;color:#111827}.cm-tile.b2{background:#21918c;color:#0b1120}
.cm-tile.b3{background:#3b528b;color:#fff}.cm-tile.b4{background:#440154;color:#fff}
@media (max-width:560px){.cm-tiles{gap:2px}.cm-tile{border-radius:3px}.cm-tile b{font-size:.56rem}.cm-tile span{font-size:.54rem}}
}

JavaScript

// Choropleth: pointer tooltip on shaded countries, and a Map / Table switch.
document.querySelectorAll('[data-choropleth]').forEach(function (box) {
  var frame = box.querySelector('[data-map-frame]'), tip = box.querySelector('[data-map-tip]');
  if (frame && tip) {
    frame.addEventListener('pointermove', function (e) {
      var t = e.target.closest('[data-tip]'); if (!t) { tip.hidden = true; return; }
      var f = frame.getBoundingClientRect(); tip.textContent = t.dataset.tip; tip.hidden = false;
      var half = tip.offsetWidth / 2 + 6;
      tip.style.left = Math.max(half, Math.min(f.width - half, e.clientX - f.left)) + 'px';
      tip.style.top = Math.max(tip.offsetHeight + 16, e.clientY - f.top) + 'px';
    });
    frame.addEventListener('pointerleave', function () { tip.hidden = true; });
  }
  var views = box.querySelectorAll('[data-view]');
  box.querySelectorAll('[data-show]').forEach(function (btn) {
    btn.addEventListener('click', function () {
      box.querySelectorAll('[data-show]').forEach(function (b) { b.setAttribute('aria-pressed', String(b === btn)); });
      views.forEach(function (v) { v.hidden = v.dataset.view !== btn.dataset.show; });
    });
  });
});

About this set

Two ways to show a number per region on a map without a charting library. The world choropleth shades 47 countries on a five-step viridis scale, a sequence that stays in order of lightness for the common forms of colour blindness, and greys out countries with no data. Values are never left to colour alone: the legend names each band and how many countries fall in it, a top-five list shows the highest values as numbers with bars, the pointer tooltip gives each country’s figure, and a Map and Table switch replaces the map with a ranked table of every country, its value and its band. The second variant is a tile grid map of the United States, one square per state laid out roughly where the state sits, with the abbreviation and the value printed inside each tile and the full state name in visually hidden text. Text colour flips between dark and white per band so every tile keeps its contrast. Use the world map when geography matters and the tile grid when small regions would vanish on a real map. The sample data is fictional.

What’s included

Five-step viridis scale with a labelled legend and country counts
Map and Table switch with a full ranked data table
Top-five list shows the leading values as numbers
Tile grid map with the value printed in every tile
Shared tooltip script; the tile grid needs no JavaScript

Accessibility

The world map is an image with a text summary, and every value is available in the table view, which is a labelled, keyboard-scrollable region with a caption and row headers. The Map and Table buttons use aria-pressed. In the tile grid each tile has the full state name and value as visually hidden text, while the abbreviations are hidden from screen readers. Text in the tiles meets 4.5:1 on every band colour.

Customise it

Edit the five .cm-b0 to .cm-b4 fills and the matching .cm-sw and .cm-tile colours to change the scale, and change the band limits in the legend text. Each country path carries its own band class and data-tip text.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Maps