Chloropleth map based on NaturalEarth

frontend/public/LICENSE

@@ -1 +1 @@
-un.*.json: https://geoportal.un.org/arcgis/apps/sites/#/geohub/datasets/d7caaff3ef4b4f7c82689b7c4694ad92/about
+world.*.json: official UN country boundaries from https://geoportal.un.org/arcgis/apps/sites/#/geohub/datasets/d7caaff3ef4b4f7c82689b7c4694ad92/about, transformed using https://observablehq.com/@bumbeishvili/rewind-geojson, https://github.com/topojson/topojson-client, and https://github.com/topojson/topojson-simplify

frontend/src/components/WorldMap.js

@@ -2,44 +2,52 @@ import { useRef, useEffect, useState } from 'react'
 import * as topojson from 'topojson-client'
 import * as Plot from '@observablehq/plot'
 
-const WorldMap = () => {
+const WorldMap = ({ data }) => {
   const containerRef = useRef()
-  const [data, setData] = useState()
+  const [mapData, setMapData] = useState()
 
   useEffect(() => {
-    fetch('/un.topo.json')
+    fetch('/world.geo.json')
       .then(res => res.json())
-      .then(setData)
+      .then(setMapData)
   }, [])
 
   useEffect(() => {
-    if (data === undefined) return
-    // const plot = Plot.plot({
-    //   y: {grid: true},
-    //   color: {scheme: "burd"},
-    //   marks: [
-    //     Plot.ruleY([0]),
-    //     Plot.dot(data, {x: "Date", y: "Anomaly", stroke: "Anomaly"})
-    //   ]
-    // });
-    const countries = topojson.feature(data, data.objects.un)
+    if (mapData === undefined) return
+    const countries = mapData
+    // const countries = topojson.feature(mapData, mapData.objects["world.geo"])
+    console.log(countries)
+    const codes = countries.features.map(d => d.properties?.ISO_A2_EH)
+    console.log(codes.toSorted().join(', '))
     const plot = Plot.plot({
       width: 750,
       height: 400,
       projection: 'equal-earth',
       marks: [
         Plot.geo(countries, {
-          // fill: d => console.log(d.properties?.iso2cd),
-          // title: d => d.properties?.iso2cd
-          // tip: true
+          fill: d => {
+            const score = data.countries[d.properties?.ISO_A2_EH]?.score
+            return score
+          },
+          title: d => `<b>${d.properties?.ISO_A2_EH}</b> (${d.properties?.NAME_EN})`,
+          tip: true
         })
-      ]
+      ],
+      color: {
+        range: ["red", "blue"],
+        unknown: 'gray',
+        // type: 'linear',
+        label: 'Score',
+        legend: true,
+        // percent: true,
+        domain: [0, 0.5]
+      }
     })
     containerRef.current.append(plot)
     return () => plot.remove()
-  }, [data])
+  }, [mapData])
 
-  return <svg ref={containerRef} style={{ width: '100%', height: '100%' }} />
+  return <div ref={containerRef} style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }} />
 }
 
 export default WorldMap

maps.md

@@ -0,0 +1,6 @@
+Possible sources for maps:
+
+- [Natural Earth](https://www.naturalearthdata.com/): Their main version is not politically correct, and they do provide additional "orld view" data, including for Germany, but not for UN or other international organizations, and it's not very straightforward to use. Also has some issues with ISO2 codes, one can use [`ISO_A2_EH`](https://github.com/nvkelso/natural-earth-vector/issues/284) to work around that; still lacking Somalia though.
+- [UN](https://geoportal.un.org/arcgis/apps/sites/#/geohub/datasets/d7caaff3ef4b4f7c82689b7c4694ad92/about): Has some countries inverted, we can mostly [correct for that](https://observablehq.com/@bumbeishvili/rewind-geojson), but it still leaves some artifacts in Norway and the Gulf of Amerxico.
+- [World Bank](https://datacatalog.worldbank.org/search/dataset/0038272): Has missing ISO2 country codes for France and Norway.
+- [EU](https://ec.europa.eu/eurostat/web/gisco/geodata/administrative-units/countries): Displays very weirdly, haven't looked into the details.