Google ChartsのGeoChartで作成した地図をSVGファイル化してみます。

環境

  • Google Chrome
  • Hexo
    • hexo-tag-googlecharts
  • Visual Studio Code
    • Marp for VS Code

手順

  1. HexoでGoogle Chartsの地図を作成
    私はHexoでhexo-tag-googlechartsタグプラグインを使っています。日本地図の最低限の記載は以下。

    {% googlecharts GeoChart %}
    GeoChart
    {"region": "JP"}
    '都道府県', '数値'
    {% endgooglecharts %}

    hexo-tag-googlechartsに関する過去の記事
    https://ktkr3d.github.io/2019/06/26/Hexo-Tag-Google-Charts

  2. ブラウザで表示してF12でデベロッパーツールを起動

  3. 選択ツールで地図をクリック

  4. 上位階層の<svg>タグを右クリックして、Copy > Copy elementを選択

  5. エディタに貼り付け、ファイル拡張子を.svgにして保存
    最上位の<svg>タグは以下のようになっている。

    <svg width="400" height="400" aria-label="A chart." style="overflow: hidden;">

  6. 画像として扱えるように<svg>タグにxmlns属性を追加

    xmlns="http://www.w3.org/2000/svg"

    VSCode上で画像表示とテキスト表示を切り替えるには、右上のドロップダウンリストボックスでモードを切り替えます。

  7. 位置の移動、拡大する場合は以下のviewBox属性を追加

    viewBox="90 70 200 200"

    横移動、縦移動、幅、高さ

利用

その他のGoogle Charts - GeoChartのサンプル

カスタマイズ例

  • 日本地図 
    {% googlecharts GeoChart %}
    GeoChart
    {"region": "JP", "displayMode": "regions", "backgroundColor": "aliceblue", "resolution": "provinces", "colorAxis": {"colors": ["white", "green"]}, "legend": "none"}
    '都道府県', '訪問回数'
    '北海道',   5
    '東京',   10
    '愛知',   5
    '大阪',   5
    '福岡',   0
    {% endgooglecharts %}
    オプション 値 説明
    “region” “JP” 表示する地域を日本に限定
    “displayMode” “regions” 地図の表示モードを「地域（面）の塗りつぶし」
    “backgroundColor” “aliceblue” 地図の背景色（主に海の部分）を薄い水色
    “resolution” “provinces” 地図の解像度（区切り）を都道府県（州・省）単位
    “colorAxis” {“colors”: [“white”, “green”]} データの数値に応じたカラーグラデーションの範囲
    “legend” “none” 凡例（カラーバーのレジェンド）を非表示

公式サンプル

https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=ja

  • 地域の GeoChart

    {% googlecharts GeoChart %}
    GeoChart
    {}
    'Country', 'Popularity'
    'Germany', 200
    'United States', 300
    'Brazil', 400
    'Canada', 500
    'France', 600
    'RU', 700
    {% endgooglecharts %}