From fa48ecf31243468ece8c9bdb7e22d7405252bb61 Mon Sep 17 00:00:00 2001
From: Chris Wilkinson <c.wilkinson@elifesciences.org>
Date: Thu, 11 Jul 2024 15:21:54 +0100
Subject: [PATCH] Make it easier to read the data with a tooltip

Refs #31
---
 src/users.md | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/users.md b/src/users.md
index 15fab53..b1fe62e 100644
--- a/src/users.md
+++ b/src/users.md
@@ -157,7 +157,6 @@ function usersByLocation() {
     users => users.length,
     user => user.country,
   )
-
   return Plot.plot({
     projection: 'equal-earth',
     width,
@@ -171,11 +170,19 @@ function usersByLocation() {
       legend: true,
     },
     marks: [
-      Plot.geo(countries(), {
-        fill: d => colors.get(i18nIsoCountries.alpha3ToAlpha2(d.properties.A3)),
-        stroke: 'var(--theme-foreground-muted)',
-        strokeWidth: 0.2,
-      }),
+      Plot.geo(
+        countries(),
+        Plot.centroid({
+          fill: d => colors.get(i18nIsoCountries.alpha3ToAlpha2(d.properties.A3)),
+          stroke: 'var(--theme-foreground-muted)',
+          strokeWidth: 0.2,
+          tip: true,
+          title: d => {
+            const alpha2 = i18nIsoCountries.alpha3ToAlpha2(d.properties.A3)
+            return `${alpha2 ? regionNameWithFlag(alpha2) : d.properties.A3} ${(colors.get(alpha2) ?? 0).toLocaleString('en-US')}`
+          },
+        }),
+      ),
     ],
   })
 }