-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtraffic.html
106 lines (89 loc) · 2.83 KB
/
traffic.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
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="icon" href="data:">
<title>北陸観光Wi-Fiパケットセンシングによる時間帯別混雑状況目安</title>
</head><body>
<h1 id=h1></h1>
<main id=main></main>
<hr>
DATA: <a href=https://github.com/code4fukui/mac-address>金沢大学のwi-fiパケットセンシングにより取得したデータをオープンデータとしたもの</a><br>
<a href=https://github.com/code4fukui/hokuriku-kanko-route>src on GitHub</a>
<script type="module">
import { CSV } from "https://code4fukui.github.io/CSV/CSV.js";
import { cr } from "https://js.sabae.cc/cr.js";
import { move2count } from "https://code4fukui.github.io/mac-address/move2count.js";
import { showLineChart } from "./showLineChart.js";
import { DateTime } from "https://js.sabae.cc/DateTime.js";
import { shuffle } from "https://js.sabae.cc/shuffle.js";
h1.textContent = document.title;
const base = "https://code4fukui.github.io/mac-address/";
// No.,エリア,業種,施設名(日本語),施設名(ローマ字),緯度,経度
const index = await CSV.fetchJSON(base + "00_M5_facility list.csv");
const nsel = 4;
const sels = [];
for (let i = 0; i < nsel; i++) {
const sel = cr("select", main);
cr("option", sel).textContent = "-";
for (const i of index) {
const op = cr("option", sel);
op.textContent = i["エリア"] + " " + i["施設名(日本語)"];
op.value = i["No."];
}
//sel.value = index[rnd(index.length)]["No."];
sels.push(sel);
}
const btnrnd = cr("button", main);
btnrnd.textContent = "ランダム";
const div = cr("div", main);
const cache = {};
const cachedFetch = async (url) => {
if (cache[url]) cache[url];
const data = await CSV.fetchJSON(url, null);
cache[url] = data;
return data;
};
const show = async () => {
div.innerHTML = "loading...";
const series = [];
for (const sel of sels) {
const no = sel.value;
if (no == "-") continue;
const url = base + "move/" + no + ".csv";
const data = await cachedFetch(url);
if (!data) continue;
console.log(no, data);
const cnt = move2count(data);
const name = index.find(i => i["No."] == no)["施設名(日本語)"];
series.push({ name, data: cnt.map(i => ([new DateTime(i.dt).getTime(), i.cnt])) });
}
console.log(series);
const height = 500;
div.innerHTML = "";
showLineChart(div, series, height);
};
const setRandom = () => {
const nos = index.map(i => i["No."]);
shuffle(nos);
for (let i = 0; i < sels.length; i++) {
sels[i].value = nos[i];
}
};
setRandom();
show();
sels.forEach(i => i.oninput = show);
btnrnd.onclick = () => {
setRandom();
show();
};
cr("br", main);
</script>
<style>
body {
font-family: sans-serif;
}
a {
color: gray !important;
}
select, button {
margin-right: 0.5em;
}
</style>
</body></html>