Web で閲覧できる次の表を作成します。
データのソースは SIGNATE のプロジェクトです。
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
}
// -----------------------------------------------------------------------