簡単メモ

準備する HTML タグは div １つ
その div の後ろで script タグで svgMap.js を読み込む必要がある (div の前に読み込むとダメ)
データは js 内でいろいろ準備する
サンプルでは、マウスオーバーで国の情報を tooltip 的に表示してくれる。
国より粒度の小さいデータ (日本でいうと「県」とか) が含まれているかどうか、は調べきれなかった。
国情報内の国旗データは https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/us.svg などから取得するようになっている。~~単体で完結しないのはちょっと不便かも (インターネットがない環境とか)。~~
- 国旗データの供給元は、オプションで変更できるようだった。

new svgMap({
  targetElementID: 'svgMapExample',
  data: svgMapDataGPD,

  // here !!!
  flagURL: 'https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/{0}.svg',
});

試した結果

アフガニスタンだけ詳細データが表示されるのは、後述する my-worldmap.js にて、データを入力しているため。

試したコード

index.html

<html>
  <head>
    <title>svgMap のサンプル</title>
    <link href="svgMap-master/dist/svgMap.css" rel="stylesheet"> <!-- svgMap-master.zip に入っているファイル -->
    <script src="svgMap-master/dist/svgMap.js"></script> <!-- 同上 -->
    <link href="my-worldmap.css" rel="stylesheet">
  </head>
  <body>
    <div id="svgMapExample"></div>
    <script src="my-worldmap.js"></script>
  </body>
</html>

my-worldmap.css

(これは適当。なくてよい)

#svgMapExample:before {
  content: "my worldmap";
  border-bottom: 1px solid #999;
  display: block;
  text-align: center;
  font-family: consolas;
  padding: 7px;
  background-color: #f9f9f9;
  border-radius: 7px 7px 0 0 ;
}

#svgMapExample {
  border-radius: 7px;
  border: 1px solid #999;
  min-height: 100px;
}

my-worldmap.js

https://www.cssscript.com/interactive-svg-world-map/ 内のサンプルコードをただ写経した感じ。

// GDP data
var svgMapDataGPD = {
    data: {
      gdp: {
        name: 'GDP per capita',
        format: '{0} USD',
        thousandSeparator: ',',
        thresholdMax: 50000,
        thresholdMin: 1000
      },
      change: {
        name: 'Change to year before',
        format: '{0} %'
      },
      gdpAdjusted: {
        name: 'Purchasing Power Parity',
        format: '{0} USD',
        thousandSeparator: ',',
        thresholdMax: 50000,
        thresholdMin: 1000
      },
      changeAdjusted: {
        name: 'Change to year before',
        format: '{0} %'
      }
    },
    applyData: 'gdpAdjusted',
    values: {
      AF: {gdp: 587, change: 4.73, gdpAdjusted: 1958, changeAdjusted: 0.02},
      // ...
    }
}

new svgMap({
  targetElementID: 'svgMapExample',
  data: svgMapDataGPD,
});

さらなるオプションは？

https://www.cssscript.com/interactive-svg-world-map/ にある通り。
svgMap のコンストラクタとして渡してあげればよい様子。