replaced circles with flags

web/data/countryStyles.json

@@ -1,222 +1,282 @@
 {
   "Aruba": {
     "c": "#fdbf6f",
+    "f":"\uD83C\uDDE6\uD83C\uDDFC",
     "ls": "--"
   },
   "Australia": {
     "c": "#ffcc00",
+    "f":"\uD83C\uDDE6\uD83C\uDDFA",
     "ls": "-"
   },
   "Austria": {
     "c": "#a6cee3",
+    "f":"\uD83C\uDDE6\uD83C\uDDF9",
     "ls": "-."
   },
   "Bangladesh": {
     "c": "#b2df8a",
+    "f":"\uD83C\uDDE7\uD83C\uDDE9",
     "ls": "-."
   },
   "Belgium": {
     "c": "#fdbf6f",
+    "f":"\uD83C\uDDE7\uD83C\uDDEA",
     "ls": "-"
   },
   "Brazil": {
     "c": "#a6cee3",
+    "f":"\uD83C\uDDE7\uD83C\uDDF7",
     "ls": "--"
   },
   "Bulgaria": {
     "c": "#0000ff",
+    "f":"\uD83C\uDDE7\uD83C\uDDEC",
     "ls": "-."
   },
   "Canada": {
     "c": "#b15928",
+    "f":"\uD83C\uDDE8\uD83C\uDDE6",
     "ls": "--"
   },
   "Croatia": {
     "c": "#cab2d6",
+    "f":"\uD83C\uDDED\uD83C\uDDF7",
     "ls": "-."
   },
   "Cyprus": {
     "c": "#9900cc",
+    "f":"\uD83C\uDDE8\uD83C\uDDFE",
     "ls": "-."
   },
   "Czech Republic": {
     "c": "#004d00",
+    "f":"\uD83C\uDDE8\uD83C\uDDFF",
     "ls": "-"
   },
   "Denmark": {
     "c": "#0099ff",
+    "f":"\uD83C\uDDE9\uD83C\uDDF0",
     "ls": "-"
   },
   "Egypt": {
     "c": "#990000",
+    "f":"\uD83C\uDDEA\uD83C\uDDEC",
+    "ls": "--"
+  },
+  "Estonia": {
+    "c": "#555555",
+    "f":"\uD83C\uDDEA\uD83C\uDDEA",
     "ls": "--"
   },
   "Finland": {
     "c": "#e31a1c",
+    "f":"\ud83c\uddeb\ud83c\uddee",
     "ls": "-."
   },
   "France": {
     "c": "#a6cee3",
+    "f":"\ud83c\uddeb\ud83c\uddf7",
     "ls": "-"
   },
   "Germany": {
     "c": "#cab2d6",
+    "f":"\ud83c\udde9\ud83c\uddea",
     "ls": "-"
   },
   "Ghana": {
     "c": "#ff66ff",
+    "f":"\ud83c\uddec\ud83c\udded",
     "ls": "--"
   },
   "Hong Kong": {
     "c": "#1f78b4",
+    "f":"\ud83c\udded\ud83c\uddf0",
     "ls": "-."
   },
   "Hungary": {
     "c": "#33a02c",
+    "f":"\ud83c\udded\ud83c\uddfa",
     "ls": "--"
   },
   "Iceland": {
     "c": "#0000ff",
+    "f":"\ud83c\uddee\ud83c\uddf8",
     "ls": "-"
   },
   "India": {
     "c": "#9900cc",
+    "f":"\ud83c\uddee\ud83c\uddf3",
     "ls": "--"
   },
   "Indonesia": {
     "c": "#a6a6a6",
+    "f":"\ud83c\uddee\ud83c\udde9",
     "ls": "-."
   },
   "Ireland": {
     "c": "#b2df8a",
+    "f":"\ud83c\uddee\ud83c\uddea",
     "ls": "-"
   },
   "Israel": {
     "c": "#fb9a99",
+    "f":"\ud83c\uddee\ud83c\uddf1",
     "ls": "-."
   },
   "Italy": {
     "c": "#b15928",
+    "f":"\ud83c\uddee\ud83c\uddf9",
     "ls": "-"
   },
   "Japan": {
     "c": "#ff7f00",
+    "f":"\ud83c\uddef\ud83c\uddf5",
     "ls": "-."
   },
   "Jordan": {
     "c": "#cab2d6",
+    "f":"\ud83c\uddef\ud83c\uddf4",
     "ls": "--"
   },
   "Latvia": {
     "c": "#a6a6a6",
+    "f":"\ud83c\uddf1\ud83c\uddfb",
     "ls": "--"
   },
   "Lithuania": {
     "c": "#ff66ff",
+    "f":"\ud83c\uddf1\ud83c\uddf9",
     "ls": "-"
   },
   "Luxembourg": {
     "c": "#33a02c",
+    "f":"\ud83c\uddf1\ud83c\uddfa",
     "ls": "-."
   },
   "Mexico": {
     "c": "#b15928",
+    "f":"\ud83c\uddf2\ud83c\uddfd",
     "ls": "-."
   },
   "Mozambique": {
     "c": "#004d00",
+    "f":"\ud83c\uddf2\ud83c\uddff",
     "ls": "--"
   },
   "Netherlands": {
     "c": "#33a02c",
+    "f":"\ud83c\uddf3\ud83c\uddf1",
     "ls": "-"
   },
   "New Zealand": {
     "c": "#000000",
+    "f":"\ud83c\uddf3\ud83c\uddff",
     "ls": "-"
   },
   "Nigeria": {
     "c": "#ffcc00",
+    "f":"\ud83c\uddf3\ud83c\uddec",
     "ls": "--"
   },
   "North Macedonia": {
     "c": "#0099ff",
+    "f":"\ud83c\uddf2\ud83c\uddf0",
     "ls": "--"
   },
   "Norway": {
     "c": "#fb9a99",
+    "f":"\ud83c\uddf3\ud83c\uddf4",
     "ls": "-"
   },
   "Philippines": {
     "c": "#6a3d9a",
+    "f":"\ud83c\uddf5\ud83c\udded",
     "ls": "-."
   },
   "Poland": {
     "c": "#6a3d9a",
+    "f":"\ud83c\uddf5\ud83c\uddf1",
     "ls": "--"
   },
   "Portugal": {
     "c": "#990000",
+    "f":"\ud83c\uddf5\ud83c\uddf9",
     "ls": "-"
   },
   "Romania": {
     "c": "#b2df8a",
+    "f":"\ud83c\uddf7\ud83c\uddf4",
     "ls": "--"
   },
   "Singapore": {
     "c": "#a6a6a6",
+    "f":"\ud83c\uddf8\ud83c\uddec",
     "ls": "-"
   },
   "Slovakia": {
     "c": "#1f78b4",
+    "f":"\ud83c\uddf8\ud83c\uddf0",
     "ls": "--"
   },
   "Slovenia": {
     "c": "#0000ff",
+    "f":"\ud83c\uddf8\ud83c\uddee",
     "ls": "--"
   },
   "South Africa": {
     "c": "#e31a1c",
+    "f":"\ud83c\uddff\ud83c\udde6",
     "ls": "--"
   },
   "South Korea": {
     "c": "#990000",
+    "f":"\ud83c\uddf0\ud83c\uddf7",
     "ls": "-."
   },
   "Spain": {
     "c": "#e31a1c",
+    "f":"\ud83c\uddea\ud83c\uddf8",
     "ls": "-"
   },
   "Sweden": {
     "c": "#9900cc",
+    "f":"\ud83c\uddf8\ud83c\uddea",
     "ls": "-"
   },
   "Switzerland": {
     "c": "#ff7f00",
+    "f":"\ud83c\udde8\ud83c\udded",
     "ls": "-"
   },
   "Turkey": {
     "c": "#fb9a99",
+    "f":"\ud83c\uddf9\ud83c\uddf7",
     "ls": "--"
   },
   "USA": {
     "c": "#6a3d9a",
+    "f":"\ud83c\uddfa\ud83c\uddf8",
     "ls": "-"
   },
   "United Arab Emirates": {
     "c": "#ff7f00",
+    "f":"\ud83c\udde6\ud83c\uddea",
     "ls": "--"
   },
   "United Kingdom": {
     "c": "#1f78b4",
+    "f":"\ud83c\uddec\ud83c\udde7",
     "ls": "-"
   },
   "Zambia": {
     "c": "#000000",
+    "f":"\ud83c\uddff\ud83c\uddf2",
     "ls": "--"
   },
   "Zimbabwe": {
     "c": "#ff66ff",
+    "f":"\ud83c\uddff\ud83c\uddfc",
     "ls": "-."
   }
 }

web/src/components/CountryDistribution/CountryDistributionPlotCard.tsx

@@ -2,9 +2,8 @@
 import React from 'react'
 
 import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap'
-import { ColoredCircle } from 'src/components/Common/ColoredCircle'
 import { PlotCardTitle } from 'src/components/Common/PlotCardTitle'
-import { getCountryColor } from 'src/io/getCountryColor'
+import { getCountryFlag } from 'src/io/getCountryColor'
 import {
   CountryDistributionDatum,
   CountryDistributionPlot,
@@ -25,8 +24,9 @@ export function CountryDistributionPlotCard({
     <Card className="m-2">
       <CardHeader className="d-flex flex-sm-column">
         <PlotCardTitle>
-          <ColoredCircle $color={getCountryColor(country)} $size={20} />
-          <span>{country}</span>
+          <span>
+            {getCountryFlag(country)} {country}
+          </span>
         </PlotCardTitle>
       </CardHeader>
 

web/src/components/DistributionSidebar/CountryFilters.tsx

@@ -11,12 +11,11 @@ import {
   Label,
   Row,
 } from 'reactstrap'
-import { ColoredCircle } from 'src/components/Common/ColoredCircle'
 import styled from 'styled-components'
 
 import type { CountryState } from 'src/components/CountryDistribution/CountryDistributionPage'
 import { theme } from 'src/theme'
-import { getCountryColor, getCountryStrokeDashArray } from 'src/io/getCountryColor'
+import { getCountryColor, getCountryFlag, getCountryStrokeDashArray } from 'src/io/getCountryColor'
 import { CardCollapsible } from 'src/components/Common/CardCollapsible'
 import { ColoredHorizontalLineIcon } from '../Common/ColoredHorizontalLineIcon'
 
@@ -46,7 +45,7 @@ export function CountryFilterCheckbox({ country, enabled, withIcons, onFilterCha
       <Label htmlFor={CSS.escape(country)} check>
         <Input id={CSS.escape(country)} type="checkbox" checked={enabled} onChange={onChange} />
         {withIcons ? (
-          <ColoredCircle $color={getCountryColor(country)} $size={14} />
+          <span>{getCountryFlag(country)}</span>
         ) : (
           <ColoredHorizontalLineIcon
             width={theme.plot.country.legend.lineIcon.width}

web/src/io/getCountryColor.ts

@@ -6,13 +6,23 @@ import countryStyles from 'src/../data/countryStyles.json'
 import { lineStyleToStrokeDashArray } from 'src/helpers/lineStyleToStrokeDashArray'
 
 export function getCountryStyle(country: string) {
-  return get<Record<string, { c: string; ls: string }>, string>(countryStyles, country) ?? { c: '#555555', ls: '-' }
+  return (
+    get<Record<string, { c: string; f: string; ls: string }>, string>(countryStyles, country) ?? {
+      c: '#555555',
+      f: '\ud83c\udf10',
+      ls: '-',
+    }
+  )
 }
 
 export function getCountryColor(country: string) {
   return getCountryStyle(country).c
 }
 
+export function getCountryFlag(country: string) {
+  return getCountryStyle(country).f
+}
+
 export function getCountryLineStyle(country: string) {
   return getCountryStyle(country).ls
 }

web/src/pages/_document.tsx

@@ -126,6 +126,7 @@ export default class Document extends NextDocument {
           <meta name="twitter:title" content={name} />
           <meta name="twitter:url" content={url} />
           <meta name="twitter:site" content={TWITTER_USERNAME_FRIENDLY} />
+          <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossOrigin="anonymous" />
         </Head>
 
         <body>