civic-voice/voice.html at main · code4sabae/civic-voice · GitHub

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
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="icon" href="data:">
<title>鯖江市民の声 （市民アンケートオープンデータより）</title>
</head><body>
<h1>鯖江市民の声</h1>

<select id=selage></select>
<select id=selsex></select>
<select id=selhappiness></select>

<div id=divcount></div>
<main id=main></main>

<hr>
DATA: <a href=https://www.city.sabae.fukui.jp/about_city/opendata/data_list/172825719.html>鯖江市政に関する市民アンケート結果（Excel） – めがねのまちさばえ 鯖江市</a><br>
<a href=https://github.com/code4sabae/civic-voice/>src on GitHub</a><br>

<script type="module">
import { CSV } from "https://js.sabae.cc/CSV.js";
import { ArrayUtil } from "https://js.sabae.cc/ArrayUtil.js";

const data = await CSV.fetchJSON("R5_voice.csv");

const items = ["age", "sex", "happiness"];
const isMatch = (d) => {
  for (const item of items) {
    const sel = document.getElementById("sel" + item);
    const selv = sel.value;
    if (selv != "" && selv != d[item]) {
      return false;
    }
  }
  return true;
};

const text2html = (s) => {
  s = s.replace(/\n/g, "<br>\n");
  s = s.replace(/！！！！！！！！！！！！！！！！/g, "！！！！！！！！！！！！！！！！ ");
  return s;
};

const show = async () => {
  main.innerHTML = "";
  let cnt = 0;
  for (const d of data) {
    if (!isMatch(d)) continue;
    const div = document.createElement("div");
    div.innerHTML = text2html(d.voice) + " (" + d.happiness + "、" + d.age + " " + d.sex + ")";
    main.appendChild(div);
    cnt++;
  }
  divcount.textContent = "該当者: " + cnt + "人";
};

for (const item of items) {
  const vs = ["", ...ArrayUtil.toUnique(data.map(d => d[item])).sort()];
  for (const v of vs) {
    const opt = document.createElement("option");
    opt.textContent = v;
    const sel = document.getElementById("sel" + item);
    sel.appendChild(opt);
    sel.onchange = () => show();
  }
};

show();

</script>

<style>
body {
  background-color: #f44;
  color: #fff;
  x-overflow-x: hidden; /* ?? */
}
/*
* {
  outline: 2px solid blue;
}
*/
main > div {
  background-color: #fff;
  color: #222;
  margin: .3em;
  padding: 1em;
  x-white-space: pre-wrap;
  word-break: break-all !important;
  border-radius: .5em;
}
#divcount {
  margin: .3em;
  padding: .5em;
}
a {
  color: #f8f8f8 !important;
}
</style>