diff --git a/package-lock.json b/package-lock.json index 25215aa..dc1197f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,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", @@ -361,6 +362,7 @@ }, "node_modules/@clack/prompts/node_modules/is-unicode-supported": { "version": "1.3.0", + "extraneous": true, "inBundle": true, "license": "MIT", "engines": { @@ -1129,6 +1131,11 @@ "node": ">=14" } }, + "node_modules/@geo-maps/countries-land-10km": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@geo-maps/countries-land-10km/-/countries-land-10km-0.6.0.tgz", + "integrity": "sha512-zeqaQCfAp1eNxEN0jp/3dDW/MkGxApD1eGHyIQ6u0R5BwJMMssX5YNzAmmFBl22p6KZ7ySsHK3OzvIq49zMufg==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", diff --git a/package.json b/package.json index f6e817a..39e1d8e 100644 --- a/package.json +++ b/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", diff --git a/src/users.md b/src/users.md index 6524bef..8ce35e5 100644 --- a/src/users.md +++ b/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, + }), + ], + }) } ```