Make it easier to read the data with a tooltip

Refs #31
PREreview · Jul 11, 2024 · fa48ecf · fa48ecf
1 parent ab75573
commit fa48ecf
Showing 1 changed file with 13 additions and 6 deletions.
diff --git 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')}`
+          },
+        }),
+      ),
     ],
   })
 }