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

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

データのソースは SIGNATE のプロジェクトです。

COVID-19チャレンジ（フェーズ1）

data.csv の取得

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

JSON への変換

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

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)

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")
#
# ------------------------------------------------------------------

ホームページ

フォルダーの構造

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

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>

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;}

/* -------------------------------------------------------------- */

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
}
// -----------------------------------------------------------------------