Show a map of user locations

Refs #31

package.json

@@ -5,6 +5,7 @@
     "@effect/platform": "^0.58.20",
     "@effect/platform-node": "^0.53.19",
     "@effect/schema": "^0.68.1",
+    "@geo-maps/countries-land-10km": "^0.6.0",
     "@js-temporal/polyfill": "^0.4.4",
     "@observablehq/framework": "^1.9.0",
     "@vvo/tzdb": "^6.141.0",

src/users.md

@@ -6,6 +6,11 @@ toc: false
 
 # PREreviewers 🫅
 
+```js
+import countries from 'npm:@geo-maps/countries-land-10km'
+import i18nIsoCountries from 'npm:i18n-iso-countries'
+```
+
 ```js
 const parseTimestamp = d3.utcParse('%Y-%m-%dT%H:%M:%SZ')
 
@@ -147,10 +152,32 @@ function usersByCareerStage({ width } = {}) {
 
 ```js
 function usersByLocation() {
-  return Inputs.table(
-    usersInTimePeriod.flatMap(user => (user.location ? { location: user.location, country: user.country } : [])),
-    { format: { country: regionNameWithFlag }, header: { country: 'Country', location: 'Location' }, sort: 'location' },
+  const colors = d3.rollup(
+    usersInTimePeriod.filter(user => user.country),
+    users => users.length,
+    user => user.country,
   )
+
+  return Plot.plot({
+    projection: 'equal-earth',
+    width,
+    height: d3.min([700, width / 2]),
+    color: {
+      scheme: 'reds',
+      domain: [0, d3.max(colors.values())],
+      unknown: 'var(--theme-background-alt)',
+      type: 'linear',
+      label: 'PREreviewers',
+      legend: true,
+    },
+    marks: [
+      Plot.geo(countries(), {
+        fill: d => colors.get(i18nIsoCountries.alpha3ToAlpha2(d.properties.A3)),
+        stroke: 'var(--theme-foreground-muted)',
+        strokeWidth: 0.2,
+      }),
+    ],
+  })
 }
 ```