-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
329 lines (275 loc) · 38.7 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
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<!-- saved from url=(0031)https://hkcoral.hkustvgd.com/ -->
<html lang="en" class="fontawesome-i2svg-active fontawesome-i2svg-complete">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./HKCoral_files/jquery-1.12.4.min.js"></script>
<style type="text/css">svg:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em}.svg-inline--fa.fa-lg{vertical-align:-.225em}.svg-inline--fa.fa-w-1{width:.0625em}.svg-inline--fa.fa-w-2{width:.125em}.svg-inline--fa.fa-w-3{width:.1875em}.svg-inline--fa.fa-w-4{width:.25em}.svg-inline--fa.fa-w-5{width:.3125em}.svg-inline--fa.fa-w-6{width:.375em}.svg-inline--fa.fa-w-7{width:.4375em}.svg-inline--fa.fa-w-8{width:.5em}.svg-inline--fa.fa-w-9{width:.5625em}.svg-inline--fa.fa-w-10{width:.625em}.svg-inline--fa.fa-w-11{width:.6875em}.svg-inline--fa.fa-w-12{width:.75em}.svg-inline--fa.fa-w-13{width:.8125em}.svg-inline--fa.fa-w-14{width:.875em}.svg-inline--fa.fa-w-15{width:.9375em}.svg-inline--fa.fa-w-16{width:1em}.svg-inline--fa.fa-w-17{width:1.0625em}.svg-inline--fa.fa-w-18{width:1.125em}.svg-inline--fa.fa-w-19{width:1.1875em}.svg-inline--fa.fa-w-20{width:1.25em}.svg-inline--fa.fa-pull-left{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right{margin-left:.3em;width:auto}.svg-inline--fa.fa-border{height:1.5em}.svg-inline--fa.fa-li{width:2em}.svg-inline--fa.fa-fw{width:1.25em}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers-text{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter{background-color:#ff253a;border-radius:1em;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-bottom-right{bottom:0;right:0;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom right;transform-origin:bottom right}.fa-layers-bottom-left{bottom:0;left:0;right:auto;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom left;transform-origin:bottom left}.fa-layers-top-right{right:0;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-top-left{left:0;right:auto;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top left;transform-origin:top left}.fa-lg{font-size:1.3333333333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scale(-1,1);transform:scale(-1,1)}.fa-flip-vertical{-webkit-transform:scale(1,-1);transform:scale(1,-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1,-1);transform:scale(-1,-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-rotate-90{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2.5em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x{height:2em;width:2.5em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.svg-inline--fa .fa-primary{fill:var(--fa-primary-color,currentColor);opacity:1;opacity:var(--fa-primary-opacity,1)}.svg-inline--fa .fa-secondary{fill:var(--fa-secondary-color,currentColor);opacity:.4;opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity .fa-primary{opacity:.4;opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity .fa-secondary{opacity:1;opacity:var(--fa-primary-opacity,1)}.svg-inline--fa mask .fa-primary,.svg-inline--fa mask .fa-secondary{fill:#000}.fad.fa-inverse{color:#fff}</style>
</head><body data-new-gr-c-s-check-loaded="14.1131.0" data-gr-ext-installed=""><br>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<title>HKCoral</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="./HKCoral_files/css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./HKCoral_files/font-awesome.min.css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="./HKCoral_files/normalize.css">
<link rel="stylesheet" href="./HKCoral_files/skeleton.css">
<link rel="stylesheet" href="./HKCoral_files/footable.standalone.min.css">
<link rel="stylesheet" href="./HKCoral_files/fontawesome.all.min.css">
<link rel="stylesheet" href="./HKCoral_files/bulma.min.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="https://HKCoral.hkustvgd.com/images/favicon.png">
<!-- Google icon -->
<link rel="stylesheet" href="./HKCoral_files/icon">
<script type="text/javascript" async="" src="./HKCoral_files/js"></script><script async="" src="./HKCoral_files/analytics.js"></script><script defer="" src="./HKCoral_files/fontawesome.all.min.js"></script>
<script src="./HKCoral_files/bulma-carousel.min.js"></script>
<script src="./HKCoral_files/bulma-carousel.min.js"></script>
<script src="./HKCoral_files/bulma-slider.min.js"></script>
<!-- Analytics -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-86869673-1', 'auto');
ga('send', 'pageview');
</script>
<style>
img {
display: block;
}
.column-50 {
float: left;
width: 50%;
}
.row-50:after {
content: "";
display: table;
clear: both;
}
.floating-teaser {
float: left;
width: 30%;
text-align: center;
padding: 15px;
}
.venue strong {
color: #99324b;
}
.benchmark {
width: 100%;
max-width: 960px;
overflow: scroll;
overflow-y: hidden;
}
.bottom-outer {
color: #888;
text-align: center;
padding: 10px;
padding-top: 40px;
background-color: #fff;
font-size: 14px;
opacity:0.85;
}
</style>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<h4 style="text-align:center">HKCoral: Benchmark for Dense Coral Growth Form Segmentation in the Wild</h4>
<p align="center" ,="" style="margin-bottom:12px;">
<a class="simple" style="text-decoration:none" href=" https://zhengziqiang.github.io/">Ziqiang Zheng</a><sup>1</sup>
<a class="simple">Haixin Liang</a><sup>1</sup>
<a class="simple">Fong Hei Wut</a><sup>2</sup>
<a class="simple" style="text-decoration:none" href="https://scholar.google.com/citations?user=M5j3ZiQAAAAJ">Yue Him Wong</a><sup>3</sup>
<a class="simple" style="text-decoration:none" href="https://scholar.google.com.hk/citations?user=z7mWGNwAAAAJ&hl=en">Apple Pui Yi CHUI</a><sup>2</sup>
<a class="simple" style="text-decoration:none" href="https://www.saikit.org/">Sai-Kit Yeung</a><sup>1</sup>
</p>
<p align="center" style="margin-bottom:20px;">
<sup>1</sup>The Hong Kong University of Science and Technology,
<span style="display:inline-block; width: 32px"></span>
<sup>2</sup>The Chinese University of Hong Kong,
<span style="display:inline-block; width: 32px"></span>
<sup>3</sup>Shenzhen University
<br>
</p>
<p align="center" style="margin-bottom:20px;">
IEEE Journal of Oceanic Engineering, 2024
<span style="display:inline-block; width: 32px"></span>
<!-- <span style="display:inline-block; width: 32px"></span>
<sup>3</sup>VinAI Research
<span style="display:inline-block; width: 32px"></span>
<sup>4</sup>Woven Planet North America, Level 5 -->
<br>
</p>
<div class="publication-links" >
<center>
<span class="link-block" >
<a href="" class="external-link button is-normal is-rounded is-dark" style="font-size: 15px;">
<span class="icon">
<i class="fas fa-database" ></i>
</span>
<span>Dataset (coming soon)</span>
</a>
</span>
</center>
</div>
</div>
</p>
<br>
<div>
<center>
<img src="./HKCoral_files/teaser.jpg" style="width:90%" class="center">
<p align="center" style="width:95%">The illustration of the collected HKCoral dataset, which could contribute towards dense coral growth form segmentation. Our dataset contains 2,515 images with dense pixel-wise coral growth form annotations. The images are collected under challenging in-the-wild conditions (e.g., low visibility, background clutter, motion blur, occlusion, dynamic illumination, color distortion, and optical artifacts).</p>
</center>
</div>
<div class="container">
<br>
<br>
<div id="teaser" class="container" style="width:100%; margin:0; padding:0">
<h5>Abstract</h5>
<p align="justify">
Underwater coral reef monitoring plays an important role in the maintenance and protection of the underwater ecosystem. Extracting information from the collected coral reef images and videos based on computer vision techniques has recently gained increasing attention. Semantic segmentation, which assigns semantic category information to each pixel in images, has been introduced to understand the coral reefs. Satisfactory semantic segmentation performance has been achieved based on large-scale in-air datasets with densely labeled annotations. However, the underwater coral reef understanding is less explored and the existing underwater coral reef datasets are mainly captured under ideal and normal conditions and lack variance. They cannot fully reflect the diversity and properties of coral reefs. Thus, the trained coral reef segmentation model shows a very limited performance when deployed in practical, challenging, and adverse conditions. To address these issues, in this paper, we propose an \textbf{in-the-wild} coral reef dataset named <b>HKCoral</b> to close the gap for performing in-situ coral reef monitoring. The collected dataset with dense pixel-wise annotations possesses larger diversity, appearance, viewpoint, and visibility variations. Besides, we adopt the fundamental coral <b>growth form</b> as the foundation of our semantic coral reef segmentation, which enables a strong generalization ability to unseen coral reef images from different sites. We benchmark the coral reef segmentation performance of 17 state-of-the-art semantic segmentation algorithms (including the recent generalist Segment Anything model) and further introduce a complementary architecture to better utilize the underwater image enhancement for improving the segmentation performance of models. We have conducted extensive experiments based on various up-to-date segmentation models on our benchmark and the experimental results demonstrate that there is still ample room to improve the coral segmentation performance. The ablation studies and discussions are also included. The proposed benchmark could significantly enhance the efficiency and accuracy of real-world underwater coral reef surveying.
<br>
<br>
</p>
</div>
<br>
<div id="teaser" class="container" style="width:100%; margin:0; padding:0">
<h5>Illustration of coral growth form</h5>
<center>
<div>
<img src="HKCoral_files/demo_illu.jpg" style="width:60%" class="center"></img>
</div>
</center>
<center>
<div class="caption">
<p align="center">
The illustration of underwater coral growth form segmentation. Different colors indicate different growth forms.
</p>
</div>
<br>
</center>
<center>
<div>
<img src="HKCoral_files/pattern.jpg" style="width:80%" class="center"></img>
</div>
</center>
<center>
<div class="caption">
<p align="center">
The cropped feature patterns of 6 coral growth forms. Best viewed in color and zoom in for checking more details.
</p>
</div>
<br>
</center>
<div>
<!-- <img src="HKCoral_files/sub_framework.png" style="width:100%"></img> -->
</div>
</div>
<div id="teaser" class="container" style="width:100%; margin:0; padding:0">
<h5>Qualitative Results</h5>
<center>
<h5>Benchmarking various semantic segmentation algorithms</h5>
<img src="./HKCoral_files/compare.jpg" style="width:90%">
<div class="caption">
<p align="center">
The performance comparison between different semantic segmentation algorithms.
</p>
</div>
<br>
</center>
<center>
<h5>Comparison with SAM</h5>
<img src="./HKCoral_files/compare_sam.jpg" style="width:100%">
<div class="caption">
<p align="center">
The coral segmentation comparisons between the generalist segmentation model SAM and our proposed method. We observe that the SAM cannot yield accurate coral masks.
</p>
</div>
<br>
</center>
<center>
<h5>The zero-shot generalization ability</h5>
<img src="./HKCoral_files/coral_unseen.jpg" style="width:90%">
<div class="caption">
<p align="center">
The coral segmentation results of the unseen coral reef images. a), b), and c) are from the YouTube videos collected at the Red Sea. d) and e) are from the YouTube videos collected in Hong Kong. f) is from the Great Barrier Reef dataset. g) is from the CoralNet. h) is from the Google image engine while i) is from the Mosaics UCSD dataset.
</p>
</div>
<br>
</center>
</div>
<div class="section">
<h5>Citation</h5>
<pre style="margin:0"> <code>@inproceedings{ziqiang2024hkcoral,
title={HKCoral: Benchmark for Dense Coral Growth Form Segmentation in the Wild},
author={Ziqiang Zheng, Haixin Liang, Fong Hei Wut, Yue Him Wong, Apple Pui Yi CHUI, Sai-Kit Yeung},
booktitle={IEEE Journal of Oceanic Engineering (JOE)},
year={2024},
}
</code>
</pre>
</div>
<br>
<br>
<!-- -->
<div class="section" style="color: white;">
<script type="text/javascript" src="//clustrmaps.com/map_v2.js?d=SijAMOwwWONM_AoAV6xjcCevqANx_aLBmjGXNC3U5Ns&cl=000000&co=000000&ct=808080&w=100&t"></script>
<script type='text/javascript' id='clustrmaps' src="./HKCoral_files/map_v2.js?cl=ffffff&w=100&t=m&d=SijAMOwwWONM_AoAV6xjcCevqANx_aLBmjGXNC3U5Ns"></script>
</script>
</div>
<br>
<!-- The website is modified from this <a href="https://point2cyl.github.io/">template</a>. -->
<!-- <div class="section">
<h5>Acknowledgements</h5>
<p align="justify">
This research project is supported by The Innovation and Technology Fund (ITF) and The Marine Conservation Enhancement Fund (MCEF) Hong Kong.
</p>
<script type="text/javascript" id="clustrmaps" src="./HKCoral_files/map_v2.js"></script><a target="_top" href="http://clustrmaps.com/site/1bp9e?utm_source=widget&utm_campaign=widget_ctr" id="clustrmaps-widget-v2" class="clustrmaps-map-control" style="width: 300px;"><div class="clustrmaps-map-container" style="background-color: rgb(45, 120, 173);"><div class="clstm clustrmaps-visitors" style="font-size: 12px; line-height: 16px; color: rgb(255, 255, 255);">83 Pageviews</div><div class="clstm clustrmaps-date" style="font-size: 12px; line-height: 16px; color: rgb(255, 255, 255);">Sep. 16th - Oct. 16th</div><div class="clustrmaps-map liveDotsReady" style="width: 300px; height: 147.059px; background-image: url("//clustrmaps.com/generated_content/backs/bg-w_300-co_2d78ad-cl_ffffff.png");"><div class="jvectormap-container" style="background-color: transparent;"><svg width="300" height="147"><defs></defs><g transform="scale(0.2777777777777778) translate(90, 44.2468446279335)"></g><g></g><g style="visibility: visible;"><circle data-index="0" cx="221.34159199538286" cy="75.6962577483041" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="4" class="jvectormap-marker jvectormap-element"></circle><circle data-index="1" cx="216.10894179154454" cy="83.876958616325" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="4" class="jvectormap-marker jvectormap-element"></circle><circle data-index="2" cx="221.35313833966282" cy="75.63539288611568" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="3" class="jvectormap-marker jvectormap-element"></circle><circle data-index="3" cx="221.32997609481205" cy="75.67192914877228" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="3" class="jvectormap-marker jvectormap-element"></circle><circle data-index="4" cx="73.89011526879798" cy="63.86161422809906" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="3" class="jvectormap-marker jvectormap-element"></circle><circle data-index="5" cx="214.16894728363857" cy="90.52831957960865" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="3" class="jvectormap-marker jvectormap-element"></circle><circle data-index="6" cx="215.6611383910964" cy="80.20491109405373" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="7" cx="76.4390751030356" cy="65.21132479257543" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="8" cx="215.55791685548516" cy="76.58417904734273" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="9" cx="81.76527851805795" cy="80.91709379889556" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="10" cx="221.03547475938223" cy="66.2308310923087" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="11" cx="144.95348226563308" cy="52.64602983433435" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="12" cx="90.44986832385948" cy="61.38609462327605" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="13" cx="94.63319232403826" cy="71.43592993686296" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="14" cx="221.39953238565522" cy="75.63539288611568" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="15" cx="230.25286575304216" cy="63.984270366518324" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="16" cx="146.82301625091492" cy="54.080943409127805" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="17" cx="91.67941487709362" cy="60.54584781350551" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="18" cx="57.10256536122523" cy="64.23931283968709" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="19" cx="162.00367672742954" cy="56.09558336061494" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="20" cx="143.5508101044904" cy="54.45021223455068" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="21" cx="91.49029132229111" cy="60.07231548423466" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="22" cx="166.30816778625706" cy="54.79644151544119" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="23" cx="225.51128296255638" cy="69.6985984183734" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="24" cx="168.09618179867076" cy="48.01126644881468" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="25" cx="83.68440613871093" cy="60.147364637192446" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="26" cx="221.32719384317835" cy="75.67470556911633" fill="#3acc3a" stroke="#ffffff" fill-opacity="0.7" stroke-width="0.5" stroke-opacity="1" r="2" class="jvectormap-marker jvectormap-element"></circle><circle data-index="141667295" cx="221.35313833966282" cy="75.64752383610238" fill="#ff5353" stroke="#FFFFFF" fill-opacity="1" stroke-width="0.4" stroke-opacity="1" r="3" class="jvectormap-marker jvectormap-element"></circle></g><g></g></svg><div class="jvectormap-legend-cnt jvectormap-legend-cnt-h"></div><div class="jvectormap-legend-cnt jvectormap-legend-cnt-v"></div></div></div><div id="clstminf" style="display: table-cell;position: absolute;bottom: 3px;right: 5px;color: white;font-size: 12px;"></div></div><div class=""></div></a><style type="text/css">.jvectormap-container { width: 100%; height: 100%; position: absolute; overflow: hidden;}.jvectormap-tip { position: absolute; display: none; border: solid 1px #CDCDCD; border-radius: 3px; background: #292929; color: white; font-family: Arial, Helvetica, sans-serif; padding: 3px; z-index: 9999; font-size: 11px; line-height: 13px;}.jvectormap-zoomin, .jvectormap-zoomout, .jvectormap-goback { background: #ffffff none repeat scroll 0 0; border: 1px solid #bebebe; border-radius: 2px; box-sizing: content-box; color: #838383; cursor: pointer; font-weight: bold; left: 10px; padding: 3px; position: absolute; text-align: center; z-index: 1;}.jvectormap-zoomin, .jvectormap-zoomout { padding: 2px 10px;}.jvectormap-zoomin { top: 10px;}.jvectormap-zoomout { top: 37px;}.jvectormap-goback { bottom: 10px; z-index: 1000; padding: 6px;}.jvectormap-spinner { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: center no-repeat url(data:image/gif;base64,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);}.jvectormap-legend-title { font-weight: bold; font-size: 14px; text-align: center;}.jvectormap-legend-cnt { position: absolute;}.jvectormap-legend-cnt-h { bottom: 0; right: 0;}.jvectormap-legend-cnt-v { top: 0; right: 0;}.jvectormap-legend { background: black; color: white; border-radius: 3px;}.jvectormap-legend-cnt-h .jvectormap-legend { float: left; margin: 0 10px 10px 0; padding: 3px 3px 1px 3px;}.jvectormap-legend-cnt-h .jvectormap-legend .jvectormap-legend-tick { float: left;}.jvectormap-legend-cnt-v .jvectormap-legend { margin: 10px 10px 0 0; padding: 3px;}.jvectormap-legend-cnt-h .jvectormap-legend-tick { width: 40px;}.jvectormap-legend-cnt-h .jvectormap-legend-tick-sample { height: 15px;}.jvectormap-legend-cnt-v .jvectormap-legend-tick-sample { height: 20px; width: 20px; display: inline-block; vertical-align: middle;}.jvectormap-legend-tick-text { font-size: 12px;}.jvectormap-legend-cnt-h .jvectormap-legend-tick-text { text-align: center;}.jvectormap-legend-cnt-v .jvectormap-legend-tick-text { display: inline-block; vertical-align: middle; line-height: 20px; padding-left: 3px;}</style><style type="text/css">a#clustrmaps-widget-v2, #clustrmaps-widget-v2 { display: block; font-size: 11px; line-height: 13px; margin: 0 auto; padding: 0; position: relative; text-align: center; color: transparent; min-height: 139px; text-decoration: none; /* text-shadow: 1px 1px 0 #01324f; */ border: 0 none;}.clustrmaps-map { position: relative;}#clustrmaps-widget-v2 > .clustrmaps-map-container { background-position: 0 0; background-repeat: no-repeat; position: relative;}#clustrmaps-widget-v2 > .clustrmaps-map-container > .clustrmaps-date { text-align: center; width: 100%; z-index: 10;}#clustrmaps-widget-v2 > .clustrmaps-map-container > .clustrmaps-logo { position: absolute; background-image: url("//clustrmaps.com/assets/clustrmaps/img/logo4-small.png"); bottom: 0px; background-repeat: no-repeat; background-position: center center; z-index: 1; width: 100px; height: 31px; left: 0px;}#clustrmaps-widget-v2 > .clustrmaps-map-container > .clustrmaps-connection { background-position: center center; background-repeat: no-repeat; bottom: 0; color: rgba(255, 255, 255, 0.5); padding: 4px 4px; position: absolute; right: 0; z-index: 1; font-variant: small-caps;}#clustrmaps-widget-v2 > .clustrmaps-bottom-text { letter-spacing: 0px; background: #FFFFFF; color: #000000; text-shadow: none;}#clustrmaps-widget-v2 > .clustrmaps-cursor-click { background-position: center center; background-repeat: no-repeat; display: block; height: 29px; position: absolute; right: 0; top: 56px; width: 30px;}#clustrmaps-widget-v2 > .clustrmaps-map-container > .clustrmaps-connection.clustrmaps-failed { color: rgba(255, 0, 0, 0.8);}/*#clustrmaps-widget-v2 > .clustrmaps-map-container { background-image: url("//clustrmaps.com/images/map_v2_loading.png");}*/#clustrmaps-widget-v2 > .clustrmaps-cursor-click { background-image: url("//clustrmaps.com/assets/clustrmaps/img/cursor_click.png");}#clustrmaps-widget-v2 > .clustrmaps-bottom-text.variation { display: none;}/* CONTROL *//*#clustrmaps-widget-v2.clustrmaps-map-control > .clustrmaps-map-container { background-image: url("//clustrmaps.com/images/map_v2-control.png");}*/#clustrmaps-widget-v2.clustrmaps-map-control > .clustrmaps-bottom-text { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #999; background: #F24D58; background: -moz-linear-gradient(top, #FF636D 50%, #DD2929 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#f83737), color-stop(50%,#f83737)); background: linear-gradient(to bottom, #FF636D 50%,#DD2929 51%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#FF636D", endColorstr="#f83737",GradientType=0 ); display: block; margin: 2px auto 0; padding: 3px 14px; color: #FFFFFF; text-shadow: 1px 1px 0px #5B0000; font-weight: 600;}#clustrmaps-widget-v2.clustrmaps-map-control > .clustrmaps-bottom-text:hover { border: 1px solid #888; background: #a3f5a2; background: -moz-linear-gradient(top, #ed8b92 50%, #D76666 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#ed8b92), color-stop(50%,#D76666)); background: linear-gradient(to bottom, #ed8b92 50%,#D76666 51%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ed8b92", endColorstr="#D76666",GradientType=0 );}#clustrmaps-widget-v2.clustrmaps-map-control > .clustrmaps-bottom-text.variation { display: none;}.clstm { text-transform: capitalize !important; position: relative;}#clustrmaps-widget-v2.clustrmaps-map-variation > .clustrmaps-bottom-text { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #999; background: #F24D58; background: -moz-linear-gradient(top, #FF636D 50%, #DD2929 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#f83737), color-stop(50%,#f83737)); background: linear-gradient(to bottom, #FF636D 50%,#DD2929 51%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#FF636D", endColorstr="#f83737",GradientType=0 ); display: block; margin: 2px auto 0; padding: 3px 14px; color: #FFFFFF; text-shadow: 1px 1px 0px #5B0000; font-weight: 600;}#clustrmaps-widget-v2.clustrmaps-map-variation > .clustrmaps-bottom-text { display: none;}#clustrmaps-widget-v2.clustrmaps-map-variation > .clustrmaps-bottom-text.variation { display: block;}#clustrmaps-widget-v2.clustrmaps-map-variation > .clustrmaps-bottom-text:hover { border: 1px solid #888; background: #a3f5a2; background: -moz-linear-gradient(top, #ed8b92 50%, #D76666 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#ed8b92), color-stop(50%,#D76666)); background: linear-gradient(to bottom, #ed8b92 50%,#D76666 51%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ed8b92", endColorstr="#D76666",GradientType=0 );}.clustrmaps-visitors, .clustrmaps-date, .clustrmaps-bottom-text { font-family: Arial, Helvetica, sans-serif; text-align: center; font-weight: normal;}.clustrmaps-bottom-text { font-size: 12px;}</style>
</div> -->
</div>
<script type="text/javascript" src="./HKCoral_files/jquery.min.js"></script>
<script type="text/javascript" src="./HKCoral_files/footable.min.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$('.table').footable();
});
</script>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="jvectormap-tip"></div></body><grammarly-desktop-integration data-grammarly-shadow-root="true"><template shadowrootmode="open"><style>
div.grammarly-desktop-integration {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}
div.grammarly-desktop-integration:before {
content: attr(data-content);
}
</style><div aria-label="grammarly-integration" role="group" tabindex="-1" class="grammarly-desktop-integration" data-content="{"mode":"full","isActive":true,"isUserDisabled":false}"></div></template></grammarly-desktop-integration>
</html>