Help us understand the problem. What is going on with this article?

GeoChart:1000人あたりPCR検査数で都道府県を塗り分ける

Google ChartsのGeoChartを利用して、1000人あたりPCR検査数に応じて地図上で都道府県の色を塗り分ける。

ソースコード

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div>
      <select id="dividend" onchange="drawMap()">
        <option value="patients">確定患者数</option>
        <option value="tests" selected>PCR検査数</option>
        <option value="doctors">医師数</option>
        <option value="population">人口(千人)</option>
      </select>
      <select id="divisor" onchange="drawMap()">
        <option value="patients">÷確定患者数</option>
        <option value="tests">÷PCR検査数</option>
        <option value="doctors">÷医師数</option>
        <option value="population" selected>÷人口(千人)</option>
        <option value="nothing"></option>
      </select>
    </div>
    <div id="app"></div>

    <script
      type="text/javascript"
      src="https://www.gstatic.com/charts/loader.js"
    ></script>

    <script>
      const patients = {
        愛知: 932, 愛媛: 84, 茨城: 239, 岡山: 59, 沖縄: 186, 岩手: 0, 岐阜: 220, 宮崎: 36, 宮城: 140, 京都: 586, 熊本: 58, 群馬: 179, 広島: 250, 香川: 45, 高知: 78, 佐賀: 66, 埼玉: 2035, 三重: 63, 山形: 75, 山口: 47, 山梨: 85, 滋賀: 152, 鹿児島: 203, 秋田: 17, 新潟: 92, 神奈川: 2206, 青森: 31, 静岡: 119, 石川: 310, 千葉: 1453, 大阪: 2915, 大分: 60, 長崎: 47, 長野: 88, 鳥取: 6, 島根: 28, 東京: 10975, 徳島: 12, 栃木: 151, 奈良: 200, 富山: 235, 福井: 127, 福岡: 1292, 福島: 86, 兵庫: 941, 北海道: 1377, 和歌山: 116
      };

      const tests = {
        愛知: 16828, 愛媛: 2799, 茨城: 6442, 岡山: 2579, 沖縄: 6226, 岩手: 1290, 岐阜: 8608, 宮崎: 1868, 宮城: 5534, 京都: 14909, 熊本: 4607, 群馬: 7310, 広島: 10572, 香川: 4213, 高知: 2179, 佐賀: 2108, 埼玉: 56423, 三重: 3571, 山形: 2851, 山口: 3552, 山梨: 6805, 滋賀: 3848, 鹿児島: 9099, 秋田: 1054, 新潟: 5858, 神奈川: 16219, 青森: 1317, 静岡: 10472, 石川: 3112, 千葉: 25929, 大阪: 60635, 大分: 6001, 長崎: 5671, 長野: 5565, 鳥取: 2283, 島根: 2181, 東京: 156867, 徳島: 1518, 栃木: 12024, 奈良: 7978, 富山: 4874, 福井: 4539, 福岡: 21128, 福島: 9030, 兵庫: 21956, 北海道: 26689, 和歌山: 5599
      };

      const doctors = {
        愛知: 16894, 愛媛: 3773, 茨城: 5682, 岡山: 6088, 沖縄: 3589, 岩手: 2673, 岐阜: 4416, 宮崎: 2810, 宮城: 5792, 京都: 8847, 熊本: 5310, 群馬: 4654, 広島: 7609, 香川: 2852, 高知: 2308, 佐賀: 2383, 埼玉: 12928, 三重: 4159, 山形: 2614, 山口: 3675, 山梨: 2016, 滋賀: 3386, 鹿児島: 4545, 秋田: 2413, 新潟: 4727, 神奈川: 20254, 青森: 2712, 静岡: 7948, 石川: 3430, 千葉: 12586, 大阪: 25552, 大分: 3283, 長崎: 4300, 長野: 5035, 鳥取: 1828, 島根: 2050, 東京: 45392, 徳島: 2552, 栃木: 4592, 奈良: 3582, 富山: 2808, 福井: 2057, 福岡: 16310, 福島: 3993, 兵庫: 14463, 北海道: 13425, 和歌山: 2915
      };

      const population = {
        愛知: 7537, 愛媛: 1352, 茨城: 2877, 岡山: 1898, 沖縄: 1448, 岩手: 1241, 岐阜: 1997, 宮崎: 1081, 宮城: 2316, 京都: 2591, 熊本: 1757, 群馬: 1952, 広島: 2817, 香川: 962, 高知: 706, 佐賀: 819, 埼玉: 7330, 三重: 1791, 山形: 1090, 山口: 1370, 山梨: 817, 滋賀: 1412, 鹿児島: 1614, 秋田: 981, 新潟: 2246, 神奈川: 9177, 青森: 1263, 静岡: 3659, 石川: 1143, 千葉: 6255, 大阪: 8813, 大分: 1144, 長崎: 1341, 長野: 2063, 鳥取: 560, 島根: 680, 東京: 13822, 徳島: 736, 栃木: 1946, 奈良: 1339, 富山: 1050, 福井: 774, 福岡: 5107, 福島: 1864, 兵庫: 5484, 北海道: 5286, 和歌山: 935
      };

      const provinces = [
        "愛知", "愛媛", "茨城", "岡山", "沖縄", "岩手", "岐阜", "宮崎", "宮城", "京都", "熊本", "群馬", "広島", "香川", "高知", "佐賀", "埼玉", "三重", "山形", "山口", "山梨", "滋賀", "鹿児島", "秋田", "新潟", "神奈川", "青森", "静岡", "石川", "千葉", "大阪", "大分", "長崎", "長野", "鳥取", "島根", "東京", "徳島", "栃木", "奈良", "富山", "福井", "福岡", "福島", "兵庫", "北海道", "和歌山"
      ];

      const options = {
        region: "JP",
        displayMode: "regions",
        backgroundColor: "#ebf7fe",
        resolution: "provinces",
        colors: ["white", "green"]
      };

      function divideOrGetData() {
        let dt = {
          patients: patients,
          tests: tests,
          doctors: doctors,
          population: population
        };

        let dividend = document.getElementById("dividend");
        let divisor = document.getElementById("divisor");
        let data = provinces.map(province => [
          province,
          dt[dividend.value][province] /
            (divisor.value === "nothing" ? 1 : dt[divisor.value][province])
        ]);
        let dividendText = dividend.options[dividend.selectedIndex].text;
        let divisorText = divisor.options[divisor.selectedIndex].text;
        data.unshift(["都道府県", dividendText + divisorText]);

        // console.log(data);
        return data;
      }

      function drawMap() {
        let data = google.visualization.arrayToDataTable(divideOrGetData());
        let chart = new google.visualization.GeoChart(
          document.getElementById("app")
        );
        chart.draw(data, options);
      }

      google.charts.load("current", {
        packages: ["geochart"]
      });
      google.charts.setOnLoadCallback(drawMap);
    </script>
  </body>
</html>

実行結果

https://rtte4.csb.app/
スクリーンショット 2020-07-30 17.16.06.png
おまけ: 1000人あたり確定患者数
スクリーンショット 2020-07-30 17.17.09.png

リンク

公式ドキュメント
Visualization: GeoChart  |  Charts  |  Google Developers
https://developers.google.com/chart/interactive/docs/gallery/geochart

データ
https://www.mhlw.go.jp/stf/seisakunitsuite/newpage_00016.html
https://www.e-stat.go.jp/

  • 厚生労働省 地域ごとの感染状況等の公表について (2020/07/25)
  • 社会・人口統計体系 → 都道府県データ / 基礎データ → A 人口・世帯 (2018年度)
  • 医師・歯科医師・薬剤師統計 → 医師・歯科医師・薬剤師統計 / 平成30年医師・歯科- 医師・薬剤師統計/ 統計表 → 27 医師数,主たる従業地による都道府県-指定都市・特別区・中核市(再掲)、主たる業務の種別(2018年)
shoek
吾輩は開発者である。肩書はまだない。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away