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

Web で閲覧できる次の表を作成します。
>[栃木県隣県の新型コロナウイルス感染症患者の発生状況](https://ekzemplaro.org/corona/prefecture/)
![prefecture_apr13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/d46776e5-4542-38a2-4e39-f9a9bec52fdf.png)

データのソースは SIGNATE のプロジェクトです。
>[COVID-19チャレンジ（フェーズ1）](https://signate.jp/competitions/260)

data.csv の取得

```bash
wget --no-check-certificate --output-document=data.csv 'https://docs.google.com/spreadsheets/d/10MFfRQTblbOpuvOs_yjIYgntpMGBg592dL8veXoPpp4/export?gid=0&format=csv'
```

JSON への変換

```bash
./csv_to_json.py data.csv > data.json
#
./convert.py data.json data_all.json
```

```py:csv_to_json.py
#! /usr/bin/python
#
import sys
import pandas as pd

csv_in = sys.argv[1]
sys.stderr.write(csv_in + "\n")
#
df = pd.read_csv(csv_in)
df = df[["都道府県症例番号","確定日","居住都道府県", \
	"居住市区町村","年代","性別","職業"]]
dic = {'都道府県症例番号': 'code',
       '確定日': 'date',
       '居住都道府県': 'pref',
	'居住市区町村': 'city',
	'年代': 'age',
       '性別': 'sex',
       '職業': 'occupation'}
df = df.rename(columns=dic)
json = df.to_json(orient="records")
print(json)
```

```py:convert.py
#! /usr/bin/python
# -*- coding: utf-8 -*-
#
#	convert.py
#
#					Apr/04/2020
#
# ------------------------------------------------------------------
import	sys
import	os
import	json
#
sys.path.append('/var/www/data_base/common/python_common')
from file_io import file_to_str_proc
from file_io import file_write_proc
#
# ------------------------------------------------------------------
def convert_proc(array_aa):
	dict_aa = {}
	count = 0
	for unit_aa in array_aa:
		code = unit_aa['code']
		if code != None:
			arr = code.split('-')
			pref_code = arr[0]
			key = "p%02d" % int(pref_code)
			pref_no = arr[1]
#			print(pref_code,pref_no)
			if not key in dict_aa.keys():
				dict_aa[key] = []
			dict_aa[key].append(unit_aa)
			count += 1
#
	sys.stderr.write("count = %d\n" % count)
#
	return dict_aa
# ------------------------------------------------------------------
sys.stderr.write("*** 開始 ***\n")
#
file_in = sys.argv[1]
file_out = sys.argv[2]
sys.stderr.write(file_in + "\n")
sys.stderr.write(file_out + "\n")
#
json_str = file_to_str_proc(file_in)
array_aa = json.loads(json_str)
dict_aa = {}
#
try:
	dict_aa = convert_proc(array_aa)
except Exception as ee:
	sys.stderr.write("*** error *** convert_proc ***\n")
	sys.stderr.write(str(ee) + "\n")
#
out_str = json.dumps(dict_aa)
file_write_proc(file_out,out_str)
#
sys.stderr.write("*** 終了 ***\n")
#
# ------------------------------------------------------------------
```

ホームページ

フォルダーの構造

```text
$ tree
.
├── data_all.json
├── index.html -> prefecture.html
├── prefecture.css
├── prefecture.html
└── prefecture.js
```

```html:prefecture.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" />
<meta name="author" content="Uchida Masatomo" />
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="prefecture.js"></script>
<link href="prefecture.css" rel="stylesheet" />
	<title>新型コロナウイルス感染症患者の発生状況</title>
</head>
<body>

栃木県隣県の新型コロナウイルス感染症患者の発生状況<p />
<blockquote>
	<button id="p07">福島県</button>
	<button id="p08">茨城県</button>
	<button id="p09">栃木県</button>
	<button id="p10">群馬県</button>
	<button id="p11">埼玉県</button>
</blockquote>

<blockquote>
	<div class="contents">
	県名をクリックして名をクリックして下さい。<p />
	</div>
</blockquote>

データソース<p />
<blockquote>
	<a href="https://signate.jp/competitions/260">COVID-19チャレンジ（フェーズ1）</a><p />
</blockquote>
<p />
<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>
<p /> 
<a href="../">戻る</a><p />
<hr />
Apr/13/2020<br>
</body>
</html>
```

```cs:prefecture.css
/* -------------------------------------------------------------- */
/*

	prefecture.css

						Apr/13/2020

*/
/* -------------------------------------------------------------- */
table.main,td,th {
table-layout:fixed;
border:1.5px #7e7e7e solid;
border-collapse: collapse;
height: 16px;
}

th {
	background: #c6c6c6;
}


table.tag {
border:0.5px green solid;
}

tr.cyan {
	background-color: #c7d7c7;
}

.red {color:#ff0000;}

/* -------------------------------------------------------------- */
```

```js:prefecture.js
// -----------------------------------------------------------------------
//	prefecture.js
//
//					Apr/12/2020
//
// -----------------------------------------------------------------------
jQuery (function ()
{
	jQuery("#outarea_aa").text ("*** start *** prefecture.js ***")

	const file_in = "./data_all.json"

	jQuery.getJSON (file_in,function (data_aa)
		{
		jQuery ("button").click (function ()
		{

		jQuery ("button").css ("color","black")
		jQuery ("button#" + this.id).css ("color","blue")

		const key = this.id

		jQuery("#outarea_bb").text (key + " clicked ***")
		
		const str_out = display_proc(data_aa[key])

		jQuery(".contents").html (str_out)
		})
		})

	jQuery("#outarea_hh").text ("*** end *** prefecture.js ***")
})

// -----------------------------------------------------------------------
function display_proc(array_aa)
{
	array_aa.sort (compare_by_key_proc)

	var str_out = ""
	str_out += "<table>"
	str_out += "<tr>"
	str_out += "<th>No</th>"
	str_out += "<th>陽性判明日</th>"
	str_out += "<th>年代</th>"
	str_out += "<th>性別</th>"
	str_out += "<th>居住地</th>"
	str_out += "<th>職業</th>"
	str_out += "</tr>"

	for (var it in array_aa)
		{
		const unit_aa = array_aa[it]
		str_out += "<tr>"
		str_out += "<td>" + unit_aa.code + "</td>"
		str_out += "<td>" + unit_aa.date + "</td>"
		str_out += "<td>" + unit_aa.age + "</td>"
		str_out += "<td>" + unit_aa.sex + "</td>"
		str_out += "<td>" + unit_aa.city + "</td>"
		str_out += "<td>" + unit_aa.occupation + "</td>"
		str_out += "</tr>"
		}

	str_out += "</table>"

	return str_out
}

// -----------------------------------------------------------------------
function compare_by_key_proc (left,right)
{
	var aa = left.code.split('-')
	var bb = right.code.split('-')

	var rvalue = 0

	const iaa = parseInt(aa[1])
	const ibb = parseInt(bb[1])

	if (iaa < ibb)
		{
		rvalue = 1
		}
	else if (iaa > ibb)
		{
		rvalue = -1
		}

	return	rvalue
}
// -----------------------------------------------------------------------
```

```