https://www.stopcovid19.jp/mhlw-beds.html

1<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
2<title>新型コロナウイルス感染症患者の療養状況 病床使用率 - 厚労省発表データ</title>
3<meta property="og:title" content="新型コロナウイルス感染症患者の療養状況 病床使用率 - 厚労省発表データ">
4<link rel="apple-touch-icon" href="mhlw-beds.png">
5<meta name="twitter:card" content="summary_large_image">
6<meta property="og:image" content="https://www.stopcovid19.jp/mhlw-ogp/20210911223026.png">
7<meta name="twitter:image" content="https://www.stopcovid19.jp/mhlw-ogp/20210911223026.png">
8<meta name="format-detection" content="telephone=no"/>

9<script type='module'>
10
11import util from 'https://taisukef.github.io/util/util.mjs'
12import tabularmaps from './tabularmapsjapan.mjs'
13
14window.onload = async () => {
15	//const url = "https://www.stopcovid19.jp/data/covid19japan_beds/latest.csv";
16	const url = "./data/covid19japan_beds/latest.csv";
17	const data = await util.fetchCSVtoJSON(url);
18	console.log(data);
19	lastUpdate.textContent = "更新日: " + data[0].更新日;
20
21	const shownames = ["入院患者病床使用率", "重症患者病床使用率", "宿泊療養施設居室使用率"];
22	shownames.forEach((n) => {
23		const opt = document.createElement("option");
24		opt.value = n;
25		opt.textContent = n;
26		sel.appendChild(opt);
27	});
28	const showunit = "%";
29
30	const show = () => {
31		const showname = sel.value;
32		const getKPI = (pname, cname) => {
33			const p = data.find(a => a.都道府県名 === cname);
34			const kpi = p[showname];
35			const unit = showunit;
36			if (kpi.endsWith(unit)) {
37				return [kpi.substring(0, kpi.length - unit.length), unit];
38			}
39			return [kpi, unit];
40		};
41		const colorTabularMaps = (pname, tmap) => {
42			let min = 0;
43			let max = 100;
44			/*
45			for (const c of tmap.children) {
46				const cname = c.cellname;
47				if (cname !== "-") {
48					const [kpi, _] = getKPI(pname, cname);
49					if (isNaN(kpi)) continue;
50					if (kpi < min) { min = kpi; }
51					if (kpi > max) { max = kpi; }
52				}
53			}
54			*/
55			for (const c of tmap.children) {
56				const cname = c.cellname;
57				if (cname !== "-") {
58					const [kpi, _] = getKPI(pname, cname);
59					if (isNaN(kpi)) continue;
60					const n = (parseFloat(kpi) - min) / (max - min);
61					const h = 0;
62					const s = 80;
63					const l = 100 - n * 50;
64					const col = `hsl(${h},${s}%,${l}%)`;
65					//const col = `rgba(200,50,50,${l / 100 * .5})`;
66					c.style.backgroundColor = col;
67					c.style.color = "black";
68					//c.appendChild(val);
69					//console.log(kpi, l, col);
70				}
71			}
72		};
73		const setCellContent = (c, pname, cname) => {
74			c.textContent = "";
75			const cr = tag => document.createElement(tag);
76			const div = cr("div");
77			div.className = "name";
78			div.textContent = cname;
79			c.appendChild(div);
80			const div2 = cr("div");
81			div2.className = "val";
82			const [kpi, unit] = getKPI(pname, cname);
83			div2.textContent = (isNaN(kpi) ? "-" : kpi) + unit;
84			c.appendChild(div2);
85			c.onclick = () => {
86				const url = "https://www.stopcovid19.jp/beds_graph.html#" + cname;
87				window.open(url, "_blank");
88			};
89		};
90		tabularmaps.showJapan(setCellContent, colorTabularMaps, true);
91	}
92	const nsel = document.location.hash.substring(1) || 0;
93	sel.selectedIndex = nsel;
94	show();
95	sel.onchange = () => {
96		const nsel = sel.selectedIndex;
97		if (nsel) {
98			document.location.hash = "#" + nsel;
99		} else {
100			history.replaceState(null, null, " ");
101		}
102		show();
103	};
104};
105
106</script>

106
107<style>
108body {
109	font-family: sans-serif;
110	text-align: center;
111}
112h1 {
113	font-size: 2.8vw;
114	margin: 1vw 0 0vw 0;
115	padding: 0;
116}
117/* tabularmaps */
118#tmapc {
119	max-width: 700px;
120	margin: 0 auto;
121}
122#tmapc span {
123	font-size: min(2.0vmax, 20px);
124	align-items: center;
125	justify-content: center;
126	border-radius: .5vmax;
127	border: .1vmax solid #333;
128	padding: .2vmax .2vmax;
129	margin: .2vmax;
130}
131/* other */
132#sel {
133	font-size: 130%;
134	margin: .3em;
135}
136#banner {
137	width: 80vw;
138	margin: 1vw;
139}
140/* credit */
141.credit {
142	margin: 20px;
143	text-align: center;
144	font-size: 80%;
145}
146a {
147	color: #666 !important;
148}
149</style>
150</head>
151<body>
152
153<h1>新型コロナウイルス感染症患者の療養状況 病床使用率</h1>
154
155<select id="sel"></select>
156<div id="tmapc"></div>
157<div id=lastUpdate></div>
158
159<a href="https://www.stopcovid19.jp/"><img id="banner" src="img/stopcovid19_banner.png"><br>
160毎日更新「COVID-19 新型コロナウイルス対策ダッシュボード」もどうぞ</a>
161
162<div class="credit">
163APP: CC BY <a href=https://fukuno.jig.jp/2923>@taisukef 福野泰介</a><br>
164DATA: <a href="https://www.mhlw.go.jp/stf/seisakunitsuite/newpage_00023.html">新型コロナウイルス感染症患者の療養状況、病床数等に関する調査結果</a> → (CSV化 by <a href="https://www.stopcovid19.jp/">COVID-19 新型コロナウイルス対策ダッシュボード</a>)<br>
165LAYOUT: <a href=tabularmaps_japan.csv>TabularMaps Japan - 日本カラム地図 CSV</a> CC0 <a href=https://github.com/tabularmaps/hq>カラム地図 / TabularMaps on Github</a><br>
166LIB: <a href=util.mjs>util.mjs</a> CC BY <a href=https://fukuno.jig.jp/2819>@taisukef</a><br>
167</div>
168
169</body>
170</html>