feat: human readable country names

src/countries.ts

+// Maps the three-letter country code to the german country name
+
+export const countries = [
+    {
+        "code": "GER",
+        "name": "Deutschland",
+    },
+    {
+        "code": "FRA",
+        "name": "Frankreich",
+    },
+    {
+        "code": "ITA",
+        "name": "Italien",
+    },
+    {
+        "code": "ENG",
+        "name": "England",
+    },
+    {
+        "code": "ESP",
+        "name": "Spanien",
+    },
+    {
+        "code": "USA",
+        "name": "Vereinigte Staaten",
+    },
+    {
+        "code": "CAN",
+        "name": "Kanada",
+    },
+    {
+        "code": "AUS",
+        "name": "Australien",
+    },
+    {
+        "code": "BRA",
+        "name": "Brasilien",
+    },
+    {
+        "code": "CHN",
+        "name": "China",
+    },
+    {
+        "code": "JPN",
+        "name": "Japan",
+    },
+    {
+        "code": "RUS",
+        "name": "Russland",
+    },
+    {
+        "code": "IND",
+        "name": "Indien",
+    },
+    {
+        "code": "MEX",
+        "name": "Mexiko",
+    },
+    {
+        "code": "ARG",
+        "name": "Argentinien",
+    },
+    {
+        "code": "ZAF",
+        "name": "Südafrika",
+    },
+    {
+        "code": "KOR",
+        "name": "Südkorea",
+    },
+    {
+        "code": "TUR",
+        "name": "Türkei",
+    },
+    {
+        "code": "EGY",
+        "name": "Ägypten",
+    },
+    {
+        "code": "SWE",
+        "name": "Schweden",
+    },
+    {
+        "code": "NOR",
+        "name": "Norwegen",
+    },
+    {
+        "code": "DNK",
+        "name": "Dänemark",
+    },
+    {
+        "code": "FIN",
+        "name": "Finnland",
+    },
+    {
+        "code": "CHE",
+        "name": "Schweiz",
+    },
+    {
+        "code": "AUT",
+        "name": "Österreich",
+    },
+    {
+        "code": "BEL",
+        "name": "Belgien",
+    },
+    {
+        "code": "NLD",
+        "name": "Niederlande",
+    },
+    {
+        "code": "POL",
+        "name": "Polen",
+    },
+    {
+        "code": "GRC",
+        "name": "Griechenland",
+    },
+    {
+        "code": "HUN",
+        "name": "Ungarn",
+    },
+    {
+        "code": "CZE",
+        "name": "Tschechien",
+    },
+    {
+        "code": "SVK",
+        "name": "Slowakei",
+    },
+    {
+        "code": "PRT",
+        "name": "Portugal",
+    },
+    {
+        "code": "IRL",
+        "name": "Irland",
+    },
+    {
+        "code": "ISL",
+        "name": "Island",
+    },
+    {
+        "code": "NZL",
+        "name": "Neuseeland",
+    },
+    {
+        "code": "SGP",
+        "name": "Singapur",
+    },
+    {
+        "code": "THA",
+        "name": "Thailand",
+    },
+    {
+        "code": "IDN",
+        "name": "Indonesien",
+    },
+    {
+        "code": "MYS",
+        "name": "Malaysia",
+    },
+    {
+        "code": "PHL",
+        "name": "Philippinen",
+    },
+    {
+        "code": "VNM",
+        "name": "Vietnam",
+    },
+    {
+        "code": "SAU",
+        "name": "Saudi-Arabien",
+    },
+    {
+        "code": "ISR",
+        "name": "Israel",
+    },
+    {
+        "code": "IRN",
+        "name": "Iran",
+    },
+    {
+        "code": "PAK",
+        "name": "Pakistan",
+    },
+    {
+        "code": "BGD",
+        "name": "Bangladesch",
+    },
+    {
+        "code": "NGA",
+        "name": "Nigeria",
+    },
+    {
+        "code": "ETH",
+        "name": "Äthiopien",
+    },
+    {
+        "code": "KEN",
+        "name": "Kenia",
+    },
+    {
+        "code": "UGA",
+        "name": "Uganda",
+    },
+    {
+        "code": "TZA",
+        "name": "Tansania",
+    },
+    {
+        "code": "GHA",
+        "name": "Ghana",
+    },
+    {
+        "code": "DZA",
+        "name": "Algerien",
+    },
+    {
+        "code": "MAR",
+        "name": "Marokko",
+    },
+    {
+        "code": "TUN",
+        "name": "Tunesien",
+    },
+    {
+        "code": "LBN",
+        "name": "Libanon",
+    },
+    {
+        "code": "JOR",
+        "name": "Jordanien",
+    },
+    {
+        "code": "IRQ",
+        "name": "Irak",
+    },
+    {
+        "code": "SYR",
+        "name": "Syrien",
+    },
+    {
+        "code": "KWT",
+        "name": "Kuwait",
+    },
+    {
+        "code": "QAT",
+        "name": "Katar",
+    },
+    {
+        "code": "ARE",
+        "name": "Vereinigte Arabische Emirate",
+    },
+    {
+        "code": "OMN",
+        "name": "Oman",
+    },
+    {
+        "code": "YEM",
+        "name": "Jemen",
+    },
+    {
+        "code": "AFG",
+        "name": "Afghanistan",
+    },
+    {
+        "code": "NPL",
+        "name": "Nepal",
+    },
+    {
+        "code": "BTN",
+        "name": "Bhutan",
+    },
+    {
+        "code": "LKA",
+        "name": "Sri Lanka",
+    },
+    {
+        "code": "MMR",
+        "name": "Myanmar",
+    },
+    {
+        "code": "KHM",
+        "name": "Kambodscha",
+    },
+    {
+        "code": "LAO",
+        "name": "Laos",
+    },
+    {
+        "code": "MNG",
+        "name": "Mongolei",
+    },
+    {
+        "code": "PRK",
+        "name": "Nordkorea",
+    },
+    {
+        "code": "KAZ",
+        "name": "Kasachstan",
+    },
+    {
+        "code": "UZB",
+        "name": "Usbekistan",
+    },
+    {
+        "code": "TKM",
+        "name": "Turkmenistan",
+    },
+    {
+        "code": "KGZ",
+        "name": "Kirgisistan",
+    },
+    {
+        "code": "TJK",
+        "name": "Tadschikistan",
+    },
+    {
+        "code": "ARM",
+        "name": "Armenien",
+    },
+    {
+        "code": "GEO",
+        "name": "Georgien",
+    },
+    {
+        "code": "AZE",
+        "name": "Aserbaidschan",
+    },
+    {
+        "code": "SRB",
+        "name": "Serbien",
+    },
+    {
+        "code": "HRV",
+        "name": "Kroatien",
+    },
+    {
+        "code": "SVN",
+        "name": "Slowenien",
+    },
+    {
+        "code": "BIH",
+        "name": "Bosnien und Herzegowina",
+    },
+    {
+        "code": "MKD",
+        "name": "Nordmazedonien",
+    },
+    {
+        "code": "ALB",
+        "name": "Albanien",
+    },
+    {
+        "code": "MNE",
+        "name": "Montenegro",
+    },
+    {
+        "code": "KOS",
+        "name": "Kosovo",
+    },
+    {
+        "code": "MLT",
+        "name": "Malta",
+    },
+    {
+        "code": "CYP",
+        "name": "Zypern",
+    },
+    {
+        "code": "EST",
+        "name": "Estland",
+    },
+    {
+        "code": "LVA",
+        "name": "Lettland",
+    },
+    {
+        "code": "LTU",
+        "name": "Litauen",
+    },
+    {
+        "code": "BLR",
+        "name": "Weißrussland",
+    },
+    {
+        "code": "UKR",
+        "name": "Ukraine",
+    },
+    {
+        "code": "MDA",
+        "name": "Moldawien",
+    },
+    {
+        "code": "GNB",
+        "name": "Guinea-Bissau",
+    },
+]

src/main.ts

@@ -2,6 +2,7 @@ import "@/styles/index.scss"; // imports the default styles
 import {dsv} from "d3-fetch";
 import BubbleChart, {BubbleChartConfigParam} from "@/charts/bubbleChart.ts";
 import Search from "@/search.ts";
+import {countries} from "@/countries.ts";
 
 // const radarChartWrapper = document.querySelector('#radar-chart-wrapper') as HTMLDivElement;
 const bubbleChartWrapper = document.querySelector('#bubble-chart-wrapper') as HTMLDivElement;
@@ -28,7 +29,13 @@ groupBySetting.oninput = (event) => {
 }
 
 dsv(';', 'data/output.csv').then(data => {
-    bubbleChart = new BubbleChart(data, {
+    const parsedData = data.map((d: any) => ({
+        ...d,
+        nation: countries.find(c => c.code === d.nation)?.name ?? d.nation,
+    })
+    )
+
+    bubbleChart = new BubbleChart(parsedData, {
         parentElement: bubbleChartWrapper,
         containerWidth: 1000,
         containerHeight: 1000,

src/styles/index.scss

@@ -96,12 +96,16 @@ h1 {
       position: absolute;
       bottom: 1rem;
       right: 0;
-      width: 400px;
       display: flex;
+      padding: 1rem;
+      border-radius: 0.5rem;
       flex-direction: column;
       align-items: flex-end;
       justify-content: flex-end;
       gap: 1rem;
+      background: rgba(255, 255, 255, 0.5);
+      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+      backdrop-filter: blur(10px);
 
       > div {
         align-items: center;