-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
299 lines (279 loc) · 11.4 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
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="台南市1999統計資料視覺化">
<meta property="og:site_name" content="台南市1999統計資料視覺化">
<meta property="og:description" content="">
<title>台南市1999統計資料視覺化</title>
<link rel="shortcut icon" href="./src/favicon.ico" type="image/x-icon">
<link rel="icon" href="./src/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./src/normalize.min.css">
<link rel="stylesheet" href="./src/Semantic-UI-Calendar/dist/calendar.min.css">
<link href="http://fonts.googleapis.com/earlyaccess/notosanstc.css" rel="stylesheet">
<link href="./src/Semantic-UI/semantic.min.css" rel="stylesheet">
<link rel="stylesheet" href="./src/d3.slider.css">
<link rel="stylesheet" href="./src/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="./dist/css/index.css">
</head>
<body>
<header class="header">
<!-- Screen header -->
<div class="header_left header_item headerItemActive" id="overview" data-myid="overview">
<img src="./dist/img/logo.jpeg">
<div>
<p>台南市政府</p>
<h1 id="header_title">OPEN 1999 統計資訊</h1>
</div>
<div class="questionBox">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<div class="triangleL"></div>
<div class="triangleS"></div>
<div class="supportBox">
<p>所有資料皆為台南市政府1999 API 公開即時呈現</p>
<p>由用<a href="https://www.taiwanstat.com" target="_blank">數據看台灣團隊</a>協助並幫忙製作</p>
<hr>
<p align="left">九大分類</p>
<div class="itemBox" id="itemBox9"></div>
<hr>
<p align="left">三十三項案件</p>
<div class="itemBox" id="itemBox33"></div>
</div>
</div>
</div>
<!-- Mobile-Header -->
<div class="header_left mob-header mob-active">
<div>
<p>台南市政府</p>
<h1>OPEN 1999</h1>
</div>
<i class="mob-menu-icon fa fa-align-left" aria-hidden="true"></i>
</div>
<div class="mob-menu">
<div class="mob-header-title mob-active">
<p>台南市政府</p>
<h1>OPEN 1999<i class="mob-menu-icon fa fa-align-left" aria-hidden="true"></i></h1>
</div>
<h2 class="header_item" data-myid="overview">最近一星期概況<i class="fa fa-chevron-right" aria-hidden="true"></i></h2>
<h2 class="header_item" data-myid="area-focus">各區熱點比較<i class="fa fa-chevron-right" aria-hidden="true"></i></h2>
<h2 class="header_item" data-myid="dynamic-bubble">時間動態比較<i class="fa fa-chevron-right" aria-hidden="true"></i></h2>
<div class="mob-support">
<i id="mob-support-icon" class="fa fa-question-circle" aria-hidden="true"></i>
<div class="supportBox">
<p>所有資料皆為台南市政府1999 API 公開即時呈現</p>
<p>由用<a href="https://www.taiwanstat.com" target="_blank">數據看台灣團隊</a>協助並幫忙製作</p>
<hr>
<p align="left">九大分類</p>
<div class="itemBox" id="mob-itemBox9"></div>
<hr>
<p align="left">三十三項案件</p>
<div class="itemBox" id="mob-itemBox33"></div>
</div>
</div>
</div>
<ul class="header_right">
<li class="header_item" id="area-focus" data-myid="area-focus">
<i class="fa fa-th-large" aria-hidden="true"></i>
<p>各區比較</p>
</li>
<li class="header_item" id="dynamic-bubble" data-myid="dynamic-bubble">
<i class="fa fa-bullseye" aria-hidden="true"></i>
<p>動態比較</p>
</li>
</ul>
</header>
<section class="section disable" id="section-overview">
<div class="overview_title">
<h2>台南各區一星期<span>概況</span></h2>
<p><span class="date"></span><!--． <span class = "sub-9-items">9大類說明 ›</span> --></p>
</div>
<div class="selectAreaFiled">
<div class="field">
<i class="fa fa-share" aria-hidden="true"></i>移動至
</div>
<select name="selectArea" class="overview_selectArea ui fluid normal dropdown">
<option value="All">台南市</option>
<option value="Xinhua">新化區</option>
<option value="Xinying">新營區</option>
<option value="Yanshui">鹽水區</option>
<option value="Baihe">白河區</option>
<option value="Liuying">柳營區</option>
<option value="Houbi">後壁區</option>
<option value="Dongshan">東山區</option>
<option value="Madou">麻豆區</option>
<option value="Xiaying">下營區</option>
<option value="Liujia">六甲區</option>
<option value="Guantian">官田區</option>
<option value="Danei">大內區</option>
<option value="Jiali">佳里區</option>
<option value="Xuejia">學甲區</option>
<option value="Xigang">西港區</option>
<option value="Qigu">七股區</option>
<option value="Jiangjun">將軍區</option>
<option value="Beimen">北門區</option>
<option value="Shanhua">善化區</option>
<option value="Xinshi">新市區</option>
<option value="Anding">安定區</option>
<option value="Shanshang">山上區</option>
<option value="Yujing">玉井區</option>
<option value="Nanxi">楠西區</option>
<option value="Nanhua">南化區</option>
<option value="Zuozhen">左鎮區</option>
<option value="Rende">仁德區</option>
<option value="Guiren">歸仁區</option>
<option value="Guanmiao">關廟區</option>
<option value="Longqi">龍崎區</option>
<option value="Yongkang">永康區</option>
<option value="East">東區</option>
<option value="South">南區</option>
<option value="North">北區</option>
<option value="WestCentral">中西區</option>
<option value="Annan">安南區</option>
<option value="Anping">安平區</option>
</select>
</div>
<div class="row">
<div class="column"></div>
</div>
</section>
<section class="section disable" id="section-focus">
<div class="focus_title">
<h2><span class="area_name">台南市</span>詳細統計</h2>
<ul class="focus_ulBox">
<li class="noHover">外圈: 33 項案件資訊</li>
<li class="noHover">內圈: 9 大類別資訊</li>
</ul>
</div>
<div class="infocus ui right floated compact menu">
<div class="infocus item"><i class="Hourglass End icon" href="/"></i><b>時間</b></div>
<a class="infocus reactive item active" value="w">
一星期
</a>
<a class="infocus reactive item" value="m">
一個月
</a>
<a class="infocus reactive item" value="y">
一年內
</a>
<a class="infocus reactive item" id="self-define" value="s">
自訂區間
</a>
</div>
<div class="ui modal">
<div class="ui form">
<div class="two fields">
<div class="field">
<div class="ui calendar" id="rangestart">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="開始日期" id="startDate">
</div>
</div>
</div>
<div class="field">
<div class="ui calendar" id="rangeend">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="結束日期" id="endDate">
</div>
</div>
</div>
</div>
<div class="actions">
<div class="ui fluid large approve button">OK</div>
</div>
</div>
</div>
<div class="infocus ui right floated compact menu">
<a class="infocus reactive item" value="overview"><i class="angle double left icon"></i><b>總覽</b></a>
<select name="selectArea" class="focus_selectArea ui fluid normal dropdown">
<option value="Tainan">台南市</option>
<option value="Xinhua">新化區</option>
<option value="Xinying">新營區</option>
<option value="Yanshui">鹽水區</option>
<option value="Baihe">白河區</option>
<option value="Liuying">柳營區</option>
<option value="Houbi">後壁區</option>
<option value="Dongshan">東山區</option>
<option value="Madou">麻豆區</option>
<option value="Xiaying">下營區</option>
<option value="Liujia">六甲區</option>
<option value="Guantian">官田區</option>
<option value="Danei">大內區</option>
<option value="Jiali">佳里區</option>
<option value="Xuejia">學甲區</option>
<option value="Xigang">西港區</option>
<option value="Qigu">七股區</option>
<option value="Jiangjun">將軍區</option>
<option value="Beimen">北門區</option>
<option value="Shanhua">善化區</option>
<option value="Xinshi">新市區</option>
<option value="Anding">安定區</option>
<option value="Shanshang">山上區</option>
<option value="Yujing">玉井區</option>
<option value="Nanxi">楠西區</option>
<option value="Nanhua">南化區</option>
<option value="Zuozhen">左鎮區</option>
<option value="Rende">仁德區</option>
<option value="Guiren">歸仁區</option>
<option value="Guanmiao">關廟區</option>
<option value="Longqi">龍崎區</option>
<option value="Yongkang">永康區</option>
<option value="East">東區</option>
<option value="South">南區</option>
<option value="North">北區</option>
<option value="WestCentral">中西區</option>
<option value="Annan">安南區</option>
<option value="Anping">安平區</option>
</select>
</div>
<div id="pie-chart"></div>
<div id="bar-chart"></div>
</section>
<section class="section disable" id="section-bubble">
<div class="bubble_title">
<h2><span>台南市案件統計</span><wbr>時間漸變圖</h2>
<ul class="focus_ulBox">
<li class="noHover">移動游標顯示此案件發生前三高之地區</li>
<li class="noHover">按下播放鍵 - 播放動畫圖表</li>
</ul>
</div>
<div class="description">
<h2 class="descriptionTime"></h2>
<div class="descriptionItem">
<p id="item0"></p>
<p id="item1"></p>
<p id="item2"></p>
</div>
</div>
<div id="scroll_container">
<div id="scroll_bar_container">
<input id="slider_input" type="range" min="0" max="100" step="1" value="0">
</div>
<div id="option_container">
<div id="scroll_bar_option">
<i id="play_icon" class="bubble_optionButton fa fa-play fa"></i>
<i id="stop_icon" class="bubble_optionButton fa fa-stop fa"></i>
</div>
</div>
</div>
<div id="bubble_container">
<div id="show">
<div id="bubble_chart"></div>
</div>
</div>
<div id="bubbule_tooltip"></div> </section>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="src/Semantic-UI/semantic.min.js"></script>
<script type="text/javascript" src="src/Semantic-UI-Calendar/dist/calendar.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="./src/d3.slider.js"></script>
<script type="text/javascript" src="./dist/js/G.js"></script>
<script type="text/javascript" src="./dist/js/index.js"></script>
<script type="text/javascript" src="./dist/js/overview.js"></script>
<script type="text/javascript" src="./dist/js/focus.js"></script>
<script type="text/javascript" src="./dist/js/bubble.js"></script>
<script type="text/javascript">
G.initPage();
</script>
</body></html>