/
hotrank.html
150 lines (134 loc) · 4.16 KB
/
hotrank.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<html>
<head>
<meta charset="utf-8"/>
<title>暑さ予測ランキング - 環境省WBGTオープンデータ</title>
<meta property="og:title" content="暑さ予測ランキング"/>
<meta property="og:description" content="暑さ予測ランキング"/>
<link rel="apple-touch-icon" href="hotrank-icon.png"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta property="og:image" content="https://code4sabae.github.io/wbgt-japan/hotrank.png"/>
<meta name="twitter:image" content="https://code4sabae.github.io/wbgt-japan/hotrank.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no"/>
<style>
body {
font-family: sans-serif;
}
td, th {
padding: .2em .3em;
white-space: nowrap;
border: 1px solid gray;
font-size: 80%;
}
table {
border-collapse: collapse;
}
#main {
width: 100%;
height: 70vh;
overflow: scroll;
}
.credit {
font-size: 80%;
}
a {
color: gray !important;
}
</style>
<script type="module">
window.onload = async () => {
const url = "https://code4sabae.github.io/wbgt-japan/data/prev15WG/latest.json";
const json = await (await fetch(url)).json();
console.log(json);
const urlarea = "https://code4sabae.github.io/wbgt-japan/data/area.json";
const area = await (await fetch(urlarea)).json();
const findArea = (id) => area.find(a => a.地点番号 === id);
console.log(area);
const lastUpdate = json[0].dt;
const dts = [];
for (const a in json[0]) {
if (a.length > 3) {
dts.push(a);
}
}
const rank = {};
for (const dt of dts) {
const list = [];
for (const d of json) {
list.push([d[dt], d.id]);
}
list.sort((a, b) => b[0] - a[0]);
rank[dt] = list;
}
// console.log(rank);
showRanking(rank, lastUpdate, findArea);
};
/*
31以上 危険
28以上 厳重警戒
25以上 警戒
21以上 注意
21未満 ほぼ安全
*/
const setBackground = (td, num) => {
let color = "white";
if (num >= 31) {
color = `hsl(0,80%,70%)`;
} else if (num >= 28) {
color = `hsl(0,80%,80%)`;
} else if (num >= 25) {
color = `hsl(60,80%,90%)`;
} else if (num >= 21) {
color = `hsl(180,80%,90%)`;
}
td.style.backgroundColor = color;
};
const showRanking = (rank, lastUpdate, findArea) => {
const nrank = 840;
const formatDateTime = d => {
return d.substring(4, 6) + "/" + d.substring(6, 8) + " " + d.substring(8, 10) + ":00";
};
const c = tag => document.createElement(tag);
const tbl = c("table");
{
const tr = c("tr");
const th = c("th");
tr.appendChild(th);
for (const dt in rank) {
const th = c("th");
th.textContent = formatDateTime(dt);
tr.appendChild(th);
}
tbl.appendChild(tr);
}
for (let i = 0; i < nrank; i++) {
const tr = c("tr");
const th = c("th");
th.innerHTML = "暑さ予想<br>" + (i + 1) + "位";
tr.appendChild(th);
for (const dt in rank) {
const r = rank[dt][i];
const td = c("td");
const area = findArea(r[1]);
// console.log(area);
const wbgt = Math.floor(r[0] / 10);
td.innerHTML = wbgt + "℃<br>" + area.振興局 + " " + area.観測所名;
setBackground(td, wbgt);
tr.appendChild(td);
}
tbl.appendChild(tr);
}
main.appendChild(tbl);
};
</script>
</head>
<body>
<h1>暑さ予測ランキング - 環境省WBGTオープンデータ</h1>
<div id="main"></div>
<div class="credit">
APP: CC BY <a href=https://fukuno.jig.jp/2894>熱中症対策とオープンデータ</a> (<a href=https://github.com/code4sabae/wbgt-japan/>src on GitHub</a>)<br>
DATA: CC BY 「<a href=https://www.wbgt.env.go.jp/data_service2.php>環境省の暑さ指数(WBGT)予測値等電子情報提供サービスについて</a>」を加工 <a href=https://code4sabae.github.io/wbgt-japan/data/prev15WG/latest.csv>CSV</a>/<a href=https://code4sabae.github.io/wbgt-japan/data/prev15WG/latest.json>JSON</a> (<a href=https://github.com/code4sabae/wbgt-japan/>src on GitHub</a>)<br>
<img id=qrcode><script>addEventListener("load", () => qrcode.src = "https://chart.apis.google.com/chart?chs=140x140&cht=qr&chl=" + encodeURIComponent(document.location))</script><br>
</div>
</body>
</html>