-
Notifications
You must be signed in to change notification settings - Fork 24
/
beds_graph.html
executable file
·128 lines (121 loc) · 4.43 KB
/
beds_graph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html><html lang="ja"><head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162141832-1"></script>
<script>
window.dataLayer = window.dataLayer || []
function gtag(){dataLayer.push(arguments)}
gtag('js', new Date())
gtag('config', 'UA-162141832-1')
</script>
<meta charset="utf-8">
<title>新型コロナ対策病床数推移（厚労省）</title>
<meta property="og:title" content="新型コロナ対策病床数推移（厚労省）">
<meta property="og:description" content="厚生労働省発表の新型コロナ対策病床数と宿泊療養施設室数の推移を都道府県別にグラフ表示します">
<meta name="theme-color" content="#AD232F">
<meta name="msapplication-TileColor" content="#AD232F">
<link rel="icon" type="image/png" href="covid19japan-icon.png">
<link rel="apple-touch-icon" href="covid19japan-leargeicon.png">
<meta name="msapplication-square310x310logo" content="covid19japan-leargeicon.png">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="https://www.stopcovid19.jp/beds-ogp/20210818.png">
<meta name="twitter:image" content="https://www.stopcovid19.jp/beds-ogp/20210818.png">
<style>
body {
text-align: center;
}
a {
color: gray !important;
}
</style>
</head><body>
<h1>新型コロナ対策病床数推移（厚労省）</h1>
<script type="module">
import Chart from "https://code4sabae.github.io/kafumon/lib/Chart.mjs";
import { CSV } from "https://code4sabae.github.io/js/CSV.js";
import { JAPAN_PREF } from "https://code4sabae.github.io/js/JAPAN_PREF.js";
let chartobj = null;
const showChart = (chart, data) => {
if (chartobj) {
chartobj.destroy();
}
const filterDate = (d) => {
if (d.endsWith("T00:00"))
return d.substring(0, d.length - 6);
return d;
}
for (let i = 0; i < data.length; i++) {
const d = data[i];
d.更新日 = filterDate(d.更新日);
}
const pref = sel.value;
document.location.hash = "#" + pref;
const setlabels = new Set();
for (let i = 0; i < data.length; i++) {
const d = data[i];
setlabels.add(d.更新日);
}
const labels = Array.from(setlabels.values());
const show = ["入院患者受入確保病床", "宿泊施設受入可能室数", "入院者数", "宿泊療養者数", "確認中の人数", "自宅療養者数", "社会福祉施設等療養者数"];
const makeColor = hue => {
return `hsla(${hue},60%,50%,100%)`;
};
const datasets = [];
let idx = 0;
for (const type of show) {
const val = [];
for (const date of labels) {
const d = data.find(d => d.更新日 == date && d.都道府県名 == pref);
if (d) {
val.push(d[type]);
} else {
console.log(d, date, pref)
}
}
datasets.push({ type: "line", label: type, fill: false, borderColor: makeColor(idx++ * 40), lineTension: 0, data: val });
}
const config = {
data: { labels, datasets },
options: {
scales: {
xAxes: [{ scaleLabel: { display: false, labelString: "日付" } }],
yAxes: [{ scaleLabel: { display: true, labelString: "数" }, ticks: { beginAtZero: true } }],
},
legend: { display: true }
}
};
chart.width = 600;
chart.height = 320;
chartobj = new Chart.Chart(chart, config);
};
window.onload = async () => {
const pref = document.location.hash.length > 0 ? decodeURIComponent(document.location.hash.substring(1)) : "東京都";
for (const p of JAPAN_PREF) {
const op = document.createElement("option");
op.textContent = p;
if (p == pref) {
op.selected = true;
}
sel.appendChild(op);
}
const url = "data/covid19japan_beds/all.csv";
const data = CSV.toJSON(await CSV.fetch(url));
console.log(data);
showChart(canvas, data);
sel.onchange = () => {
showChart(canvas, data);
};
};
</script>
<select id=sel></select><br>
<canvas id="canvas"></canvas>
<div>
Data: CC BY <a href=https://www.mhlw.go.jp/stf/seisakunitsuite/newpage_00023.html>療養状況等及び入院患者受入病床数等に関する調査について｜厚生労働省</a> PDF/XLSX→<a href=https://www.stopcovid19.jp/data/covid19japan_beds/all.csv>CSV</a><br>
App: CC BY <a href=https://fukuno.jig.jp/3095>厚労省オープンデータでチェックする、対策病床数は増えているか？ 福野泰介の一日一創</a><br>
</div>
<div style="margin:1em">
<a href="https://www.stopcovid19.jp/">
<img src=img/stopcovid19_banner.png style="width:70vw"><br>
「COVID-19 JAPAN 新型コロナウイルス対策ダッシュボード」<br>
</a>
</div>
</body><html>