-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
63 lines (57 loc) · 1.97 KB
/
index.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
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="icon" href="data:">
<title>気象庁 潮位データ 2024-01-01/03 （日本海側5府県）</title>
<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="https://code4fukui.github.io/tidelevel/ss.jpg">
<meta name="twitter:image" content="https://code4fukui.github.io/tidelevel/ss.jpg">
</head><body>
<h1>気象庁 潮位データ 2024-01-01/03 （日本海側5府県）</h1>
<div class=chart id=divlinechart></div>
<div id=divlinecharts></div>
<hr>
DATA: <a href=https://www.jma.go.jp/bosai/tidelevel/>気象庁｜潮位観測情報</a>, <a href=https://www.data.jma.go.jp/multi/quake/index.html?lang=jp>気象庁 | 地震情報</a><br>
APP: <a href=https://github.com/code4fukui/tidelevel/>src on GitHub</a><br>
<script type="module">
import { CSV } from "https://js.sabae.cc/CSV.js";
import { showLineChart } from "./showLineChart.js";
import { getTideData } from "./getTideData.js";
const days = ["20240101", "20240102", "20240103"];
const stations = await CSV.fetchJSON("data/stations.csv");
const show = async (div, pref = null) => {
const series = [];
for (const s of stations) {
if (pref && s.pref != pref) continue;
const data = await getTideData(s, days);
series.push(data);
}
showLineChart(div, series, 700);
};
await show(divlinechart);
const prefs = ["石川県", "富山県", "新潟県", "福井県", "京都府"];
for (const pref of prefs) {
const div = document.createElement("div");
div.className = "chart";
const h2 = document.createElement("h2");
h2.textContent = pref;
divlinecharts.appendChild(h2);
divlinecharts.appendChild(div);
show(div, pref);
}
</script>
<style>
body {
background-color: #222255;
font-family: sans-serif;
color: white;
}
h1 {
color: white;
}
.chart {
background-color: #f8f8f8;
color: #222;
margin-bottom: .6em;
}
a {
color: white !important;
}
</style>