Web で閲覧できる次の地図を作成します。

埼玉県の新型コロナウイルス感染状況

フォルダーの構造です。

$ tree
.
├── index.html -> saitama_area.html
├── saitama.json
├── saitama_area.css
├── saitama_area.html
├── saitama_area.js
└── saitama_status.json

１）　saitama.json の作り方
次から　埼玉県の地図情報をダウンロードします。

国土数値情報　行政区域データ

unzip N03-190101_11_GML.zip
ogr2ogr -f GeoJSON saitama.json N03-19_11_190101.shp

２）　saitama_status.json の作り方

次のページのようにして、data_saitama.json を作成

埼玉県の新型コロナウイルス感染症患者の発生状況の表を作成

次のページのようにして、code_cities.json を作成

都市名を市区町村コードに変換

./status_convert.py data_saitama.json code_cities.json saitama_status.json

status_convert.py

# ! /usr/bin/python
# -*- coding: utf-8 -*-
#
#	status_convert.py
#
#					Apr/03/2020
#
# ------------------------------------------------------------------
import	sys
import	os
import	json
from dateutil.parser import parse
#
# --------------------------------------------------------------------
def file_to_str_proc(file_in):
	str_out = ""
	try:
		fp_in = open(file_in,encoding='utf-8')
		str_out = fp_in.read()
		fp_in.close()
	except Exception as ee:
		sys.stderr.write("*** error *** file_to_str_proc ***\n")
		sys.stderr.write(str (ee))
#
	return	str_out
# --------------------------------------------------------------------
def file_write_proc(file_name,str_out):
#
	fp_out = open(file_name,mode='w',encoding='utf-8')
	fp_out.write(str_out)
	fp_out.close()
#
# ------------------------------------------------------------------
# [4]:
def add_data_proc(data_city,code,city,ddx,date_kijun):
	if code in data_city:
		data_city[code]["data"].append(date)
	else:
		data_city[code] = {"data": [date], "name": city,
				"status": 0, "count_a": 0, "count_b": 0}
#
	if (date_kijun[1] <= ddx):
		data_city[code]["status"] = 1
		data_city[code]["count_b"] += 1
	elif (date_kijun[0] <= ddx):
		data_city[code]["count_a"] += 1
#
	return data_city
# ------------------------------------------------------------------
# [6]:
def level_two_find_proc(data_city):
	for key in data_city:
		unit_aa = data_city[key]
		count_a = unit_aa["count_a"]
		count_b = unit_aa["count_b"]
		if count_a < count_b:
			unit_aa["status"] = 2
		print(key,unit_aa["name"],count_a,count_b,unit_aa["status"])
	return	data_city
# ------------------------------------------------------------------
sys.stderr.write("*** 開始 ***\n")
#
json_in = sys.argv[1]
json_code = sys.argv[2]
json_out = sys.argv[3]
sys.stderr.write(json_in + "\n")
sys.stderr.write(json_code + "\n")
sys.stderr.write(json_out + "\n")
#
str_data = file_to_str_proc(json_in)
str_code = file_to_str_proc(json_code)
#
dict_aa = json.loads(str_data)
city_code = json.loads(str_code) 
#
data_city = {}
date_kijun = [parse("2020/3/17"), parse("2020/3/24")]
for key in dict_aa:
	code = "99999"
	unit_aa = dict_aa[key]
	city = unit_aa['place']
	date = unit_aa['date']
	ddx = parse(date)
	if city in city_code:
		code = city_code[city]['code']
#
	if (date_kijun[0] <= ddx):
#		print(city,code,date,ddx)
		data_city = add_data_proc(data_city,code,city,ddx,date_kijun)
#
data_city = level_two_find_proc(data_city)
out_str = json.dumps(data_city)
file_write_proc(json_out,out_str)
sys.stderr.write("*** 終了 ***\n")
# ------------------------------------------------------------------

ホームページ

saitama_area.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<link href="saitama_area.css" rel="stylesheet">
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/d3.v5.min.js"></script>
<script src="saitama_area.js"></script>
<title>埼玉県の新型コロナウイルス感染状況</title>
</head>
<body>
<h2>埼玉県の新型コロナウイルス感染状況</h2>
<blockquote>
(3月30日 17:30時点)<p />
<span class="red">赤</span>&nbsp;感染拡大警戒地域<br />
<span class="yellow">黄</span>&nbsp;感染確認地域<br />
<span class="silver">銀</span>&nbsp;感染未確認地域<br />
</blockquote>
<svg id="map"></svg>
<p />

<blockquote>
3/24 から 3/30 の間に感染者が確認されたところは、黄または赤になる。<br />
3/24 から 3/30 の間の感染者数が前週より増加すれば、赤になる。<br />
</blockquote>

<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
Apr/03/2020<p />
</body>
</html>

saitama_area.css

/* -------------------------------------------------------------- */
/*
	saitama_area.css

					Apr/03/2020
*/
/* -------------------------------------------------------------- */
.area {
    fill: silver;
    stroke: white;
}
.popup {
    fill: black;
    font-size: 10pt;
}

.red {color: red;}
.yellow {color: yellow;}
.silver {color: silver;}
.green {color: green;}
/* -------------------------------------------------------------- */

saitama_area.js

// ------------------------------------------------------------------------
//	saitama_area.js
//
//						Apr/03/2020
// ------------------------------------------------------------------------
const file_json = "saitama.json"
const file_status = "saitama_status.json"

jQuery.getJSON(file_json,function (data)
	{
	jQuery.getJSON(file_status,function (status_aa)
		{
		jQuery("#outarea_aa").text ("*** start ***")
		const status_bb = to_district_proc(status_aa)
		draw_map_proc(data,status_bb)
		jQuery("#outarea_hh").text ("*** end ***")
		})
	})

// ------------------------------------------------------------------------
// [4]:
function to_district_proc(status_in)
{
	var status_out = {}
	var str_out = ""

	for (var key in status_in)
		{
		const unit_aa = status_in[key]
		str_out += key + "<br />"

		if (key == "11100")
			{
			for (var it=1; it<= 10; it += 1)
				{
				const key_dd = "111" + ('00' + it).slice(-2)
				str_out += "key_dd = " + key_dd + "<br />"
				status_out[key_dd] = unit_aa
				}
			}
		else
			{
			status_out[key] = unit_aa
			}
		}

//	jQuery("#outarea_cc").html (str_out)

	return status_out
}

// ------------------------------------------------------------------------
// [6]:
function draw_map_proc(data_in,status_in)
{
	const WIDTH = 700
//	const HEIGHT = 560
	const HEIGHT = 350

	var svg = d3.selectAll("#map")
		.attr("width", WIDTH)
		.attr("height", HEIGHT);

	var gg = svg.append("g");

        var projection = d3.geoMercator()
            .scale(25000)
            .center(d3.geoCentroid(data_in))
            .translate([WIDTH / 2, HEIGHT / 2])

        var path = d3.geoPath()
            .projection(projection)

        gg.selectAll('path')
		.data(data_in.features)
		.enter()
		.append('path')
		.attr('d', path)
		.attr('class', 'area')
		.attr('name', function(d) {
			const pp = d.properties;
           		this.style.fill = add_color_proc(pp,status_in)
			return pp.N03_004;
			})
		.attr('key', function(d) {
			const pp = d.properties;
			return pp.N03_007
			})
/*
		.on('mouseover', function() {
                this.style.fill = 'red';
            })
            .on('mouseout', function() {
                this.style.fill = 'silver';
		})
*/
            .on('click', function() {
                this.style.fill = 'blue';
		const key = this.getAttribute('key')
		const name = this.getAttribute('name')
		var str_out = key + "<br />"
		str_out += name + "<br />"
		jQuery("#outarea_cc").html (str_out)
            })

}

// ------------------------------------------------------------------------
// [6-4]:
function add_color_proc(pp,status_in)
{
	var color = 'silver'

	const key = pp.N03_007

	if (key in status_in)
		{
		const status = status_in[key].status

		if (status == 2)
			color = 'red'
		else if (status == 1)
			color = 'yellow'
		else if (status == 0)
			color = 'silver'
		}

	return	color
}

// ------------------------------------------------------------------------