-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
313 lines (287 loc) · 19.5 KB
/
index.html
File metadata and controls
313 lines (287 loc) · 19.5 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Selection of Similar Map Projections</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tabs">
<button class="tab-button" onclick="openTab('tab-find')">Find Similar and Compare</button>
<button class="tab-button" onclick="openTab('tab-pair')">Pairwise Compare</button>
<button class="tab-button" onclick="openTab('tab-recmd')">Recommended List</button>
<button class="tab-button" onclick="openTab('tab-group')">Parameters and Series</button>
<button class="tab-button" onclick="openTab('tab-full')">Full List</button>
<button class="tab-button" onclick="openTab('tab-rdme')">Readme</button>
</div>
<div id="canvasContainer">
<canvas id="canvas"></canvas>
</div>
<div class="container">
<aside id="tab-find" class="sidebar tab-content">
<div class="search-bar">
<h4>Click on <span style="color: dodgerblue;">a node</span> on the right or Select <span style="color: dodgerblue;">a map projection</span> from the drop-down box</h4>
<input type="text" placeholder="Search..." id="search-box-single-map-projection" oninput="showSuggestions('search-box-single-map-projection', 'suggestionsList', 'img-1')">
<ul id="suggestionsList" style="border: 1px solid #ccc; display: none; list-style-type: none; padding: 0;"></ul>
<img id="img-1" src="blank.png" width="100%" onerror="this.src='maperr.png'"></img>
</div>
<hr width="100%">
<div class="info-panel">
<!-- <h5>It's 10 Nearest Neighbors are</h5> -->
<div id="category-container">
</div>
<img id="img-2" src="blank.png" width="100%" onerror="this.src='maperr.png'"></img>
</div>
<!-- <div class="info-panel">
<h3>Nearest Neighbors in 2D space</h3>
<ul id="category-list-2d">
</ul>
</div> -->
<div class="tab-switch">
<button data-tab="compare" disabled>Compare them</button>
</div>
</aside>
<aside id="tab-pair" class="sidebar tab-content">
<div class="search-bar">
<h4>Click on <span style="color: dodgerblue;">a node</span> on the right or Select <span style="color: dodgerblue;">a map projection</span> from the drop-down box</h4>
<input type="text" placeholder="Search..." id="search-box-projection-1" oninput="showSuggestions('search-box-projection-1', 'suggestions-list-1', 'img-3')">
<ul id="suggestions-list-1" style="border: 1px solid #ccc; display: none; list-style-type: none; padding: 0;"></ul>
<img id="img-3" src="blank.png" width="100%" onerror="this.src='maperr.png'"></img>
</div>
<hr width="100%">
<div class="search-bar">
<h4>Select <span style="color: orange;">another map projection</span> to compare</h4>
<input type="text" placeholder="Search..." id="search-box-projection-2" oninput="showSuggestions('search-box-projection-2', 'suggestions-list-2', 'img-4')">
<ul id="suggestions-list-2" style="border: 1px solid #ccc; display: none; list-style-type: none; padding: 0;"></ul>
<img id="img-4" src="blank.png" width="100%" onerror="this.src='maperr.png'"></img>
</div>
<div class="tab-switch">
<div id="distance-show" style="display: none;">
<hr width="100%">
<div>The distance between <span id="mpname1" style="color: dodgerblue;"></span> and <span id="mpname2" style="color: orange;"></span> is <span id="distance-val" style="font-weight: bold">NaN</span>.</div>
<div>They are <span id="distance-stat" style="font-weight: bold">Status</span>.</div>
</div>
<button data-tab="compare-pair" disabled>Compare them</button>
</div>
</aside>
<aside id="tab-recmd" class="sidebar tab-content">
<div class="listContainer">
<select id="tableSelect">
<option value="pairs">Similar Pairs</option>
<option value="triplets">Similar Triplets</option>
<option value="quadruplets">Similar Quadruplets</option>
<option value="distinct">Distinct Ones</option>
</select>
<button data-tab="compare-recmd" disabled>Compare selected cells</button>
</div>
<table id="sim_list">
<thead>
<tr id="tableHeaders">
</tr>
</thead>
<tbody>
</tbody>
</table>
</aside>
<aside id="tab-group" class="sidebar tab-content">
<ul>
<li>Baranyi Series</li>
<li>Cabot with Parameters</li>
<li>Canters Polyconic Series</li>
<li>Canters Pseudocylindric Series</li>
<li>Eckert Series</li>
<li>Frančula Series</li>
<li>Györffy Series</li>
<li>Hufnagel Series</li>
<li>McBryde-Thomas Series</li>
<li>Putniņš Series</li>
<li>Wagner Series (excluding variants)</li>
</ul>
</aside>
<aside id="tab-full" class="sidebar tab-content">
<table id="myTable">
<thead>
<tr>
<th data-column="0">Name</th>
<th data-column="1">Areal Distortion</th>
<th data-column="2">Angular Distortion</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</aside>
<aside id="tab-rdme" class="sidebar tab-content">
Global parameters:
<div>
<label for="slider-similar">
Similar Threshold:
</label>
<input type="range" id="slider-similar" min="0.5" max="2" step="0.01" value="1">
<span id="value-similar" style="font-weight: bold">1.00</span>
</div>
<div>
<label for="slider-moderate">
Moderate Threshold:
</label>
<input type="range" id="slider-moderate" min="1" max="5.0" step="0.01" value="2">
<span id="value-moderate" style="font-weight: bold">2.00</span>
</div>
<div>Map projections with a distance less than <span id="val-range-1" style="font-weight: bold">1.00</span> are considered <span style="font-weight: bold">Similar</span>.</div>
<div>Map projections with a distance greater than <span id="val-range-11" style="font-weight: bold">1.00</span> but less than <span id="val-range-2" style="font-weight: bold">2.00</span> are considered <span style="font-weight: bold">Moderately Similar</span>.</div>
<div>Map projections with a distance greater than <span id="val-range-3" style="font-weight: bold">2.00</span> are considered <span style="font-weight: bold">Not Very Similar</span>.</div>
<hr width="100%">
<p>Welcome to the <b>Interactive Selection of Similar Map Projections</b> website, abbreviated as <b><i>simimp</i></b>. The original website URL (https://simimap.github.io/simimap/) currently returns a 404 error and is unavailable. The new URL is <a href="https://simimp.github.io/">https://simimp.github.io/</a>, and we will do our best to ensure its availability.</p>
<p>We do not collect any personal information, and GitHub does not provide us with any of your private data. Please feel free to use the site with confidence.</p>
<p>You can explore and use various features by clicking the tabs at the top. This website is still a prototype, and we are committed to continuously improving existing features, promptly fixing any bugs, and adding new functionalities as soon as possible. Thank you for your understanding and support!</p>
<hr width="100%">
<h5>Known bug: </h5>
<p>After clicking the "Compare" button, it may only display one projection (in blue) instead of two (blue and orange). In some cases, this is due to slow network loading speeds—please wait a few seconds patiently, and the orange image should appear. However, there is also a bug where the orange image fails to load (see the screenshot below). Please click anywhere on the page and then click the "Compare" button again to resolve this issue. We apologize, as this bug has not yet been fully resolved.<img src="screenshots/img_missing.png" width="100%"</p>
<p><span style="text-decoration: line-through">When comparing projections in blue and orange, some projections are not aligned (i.e., the pixels corresponding to latitude = 0° and longitude = 0° of both projections should overlap). However, projections such as Bonne, Bottomley, Hill Eucyclic, and Bertin-Rivière are already aligned. Other projections (if any) will require adjustments in the future.</span> Additionally, some projections may have incorrect scaling of the x and y coordinates during display. Despite these display issues—such as misalignment or incorrect scaling—the projections are correctly aligned and scaled when calculating the pairwise distances between them.</p>
<p>The thumbnails and orange/blue images of some projections (a total of 22) cannot be displayed because G.Projector does not support these projections, making visual comparison impossible. However, the distances between these projections and others can still be calculated.</p>
<p style="text-decoration: line-through">The laptop's touchpad may not function correctly for selecting items in the drop-down list.</p>
<p>Some tables on certain pages are excessively long.</p>
<p>The Recommended List, Full List, and Parameters and Series pages may not function as expected.</p>
<p><span style="text-decoration: line-through">On certain pages, when clicking on the dropdown list, the highlighting of nodes in the diagram and the animations may not function correctly.</span> There are also other issues related to interactions and display.</p>
<hr width="100%">
<h5>Instructions:</h5>
<p>It is recommended to use a higher desktop resolution (currently tested at 2560×1600) and press F11 to enter full-screen mode. Other resolutions are yet to be tested; we appreciate your understanding. The page layout may not be correct on mobile devices, such as cell phones.</p>
<ol>
<li>When you click on any node in the graph, the interface will automatically switch to the first tab (<i>Find Similar and Compare</i>). On this page, you can either select a map projection from the drop-down list or choose a node directly from the graph. The 10 map projections closest to the selected projection will be displayed. You can then select one from the list and click the "Compare" button to initiate the comparison (see the figure below).<img src="screenshots/find_compare.png" width="100%"></img></li>
<li>On the <i>Pairwise Compare</i> page, you can compare any two projections. You can select the first projection from the drop-down list or by directly clicking a node in the graph. The second projection must be selected from the drop-down list (it cannot be chosen from the graph). Once selected, you can proceed with the comparison (see the image below). <img src="screenshots/pair_compare.png" width="100%"></li>
<li>The <i>Recommended List</i> page provides several lists of similar and dissimilar projections. You can click on two projections in the recommended tables and then click the "Compare" button to initiate the comparison (see the figure below). When you click on the distance value in the last column, the entire row (except for the last column) will be highlighted. However, if more than two projections are highlighted, comparison will not be possible.<img src="screenshots/recmd.png" width="100%"></img></li>
<li>You can select other datasets from the drop-down list on the right side below the tabs (see the figure below), switch the x/y axes, and use color to render the nodes (color rendering is still under development). Alternatively, if the graph is outside the display area, you can click the "Reset Zoom" button.<img src="screenshots/changedataset.png" width="100%"></img></li>
<li>You can also click the different radios at the bottom right of the page to hide certain polylines.</li>
<li>You can click anywhere on the page or press the ESC key to close the projection comparison image in blue and orange.</li>
</ol>
</aside>
<main class="main-content">
<div class="header">
<select title="Select Dataset" id="dataset-selector">
<option>Improved Distance Matrix + Global Distortions + DR (SMACOF + Isomap)</option>
<option>Improved Distance Matrix + DR (SMACOF + Isomap)</option>
<option>Improved Distance Matrix + DR (MDS + Isomap)</option>
<option>Original (Tobler, 1986) Distance Matrix + DR (SMACOF + Isomap)</option>
<option>Global Distortions (Global Areal Distortion + Global Angular Distortion)</option>
<option>Improved Distance Matrix + DR (SMACOF)</option>
<option>Improved Distance Matrix + DR (MDS)</option>
<option>Improved Distance Matrix + DR (Isomap)</option>
<option>Improved Distance Matrix + DR (PCA)</option>
<option>Improved Distance Matrix + DR (k-PCA, cosine func.)</option>
<option>Improved Distance Matrix + DR (k-PCA, RBF)</option>
<option>Improved Distance Matrix + DR (LLE, std.)</option>
<option>Improved Distance Matrix + DR (LLE, LTSA)</option>
<option>Improved Distance Matrix + DR (Fast ICA)</option>
<option>Improved Distance Matrix + DR (SE)</option>
<option>Improved Distance Matrix + DR (t-SNE)</option>
<option>Improved Distance Matrix + DR (UMAP)</option>
<option>Improved Distance Matrix + DR (PHATE)</option>
<option>Improved Distance Matrix + DR (ivis)</option>
<option>Improved Distance Matrix + DR (AE, 2-lys)</option>
<option>Improved Distance Matrix + DR (AE, 5-lys)</option>
<option>Improved Distance Matrix + DR (SMACOF + PCA)</option>
<option>Improved Distance Matrix + DR (SMACOF + Fast ICA)</option>
<option>Improved Distance Matrix + DR (SMACOF + AE, 4-lys)</option>
<option>Improved Distance Matrix + DR (SMACOF + AE, 5-lys)</option>
<option>Improved Distance Matrix + DR (SMACOF + LLE, std.)</option>
<option>Improved Distance Matrix + DR (SMACOF + SE)</option>
<option>Improved Distance Matrix + DR (node2vec + Isomap)</option>
</select>
<label>
<input type="checkbox" id="swap-coord">
Swap X/Y coords.
</label>
<label>
<input title="The radius of a node is related to its distance from the nearest neighbors" type="checkbox" id="scale-node">
<span title="The radius of a node is related to its distance from the nearest neighbors">Scale circles by distances</span>
</label>
<label>
<input title="Colors are determined by global distortions" type="checkbox" id="render-color">
<span title="Colors are determined by global distortions">Render nodes using colors</span>
</label>
<div class="zoom-buttons">
<!-- <button id="zoom-in">Zoom In</button> -->
<!-- <button id="zoom-out">Zoom Out</button> -->
<button id="reset-zoom">Reset Zoom</button>
</div>
</div>
<hr width="100%">
<div class="legend">
§ <b>Equal-qrea</b>:
<label>
<input type="checkbox" id="line-1" checked>
Bonne
</label>
<label>
<input type="checkbox" id="line-2" checked>
Bottomley
</label>
<label>
<input type="checkbox" id="line-4" checked>
Cylindrical Equal-qrea
</label>
<label>
<input type="checkbox" id="line-7" checked>
Foucaut Sinusoidal
</label>
<label>
<input type="checkbox" id="line-9" checked>
Hill Eucyclic
</label>
<label>
<input type="checkbox" id="line-12" checked>
Tobler G1
</label>
<label>
<input type="checkbox" id="line-13" checked>
Urmayev Sinusoidal
</label>
§ <b>Conformal</b>:
<label>
<input type="checkbox" id="line-10" checked>
Lambert-Lagrange
</label>
</div>
<div class="legend">
§ <b>Compromise</b>:
<label>
<input type="checkbox" id="line-3" checked>
Cabot
</label>
<label>
<input type="checkbox" id="line-5" checked>
Cylindrical Stereographic
</label>
<label>
<input type="checkbox" id="line-6" checked>
Equirectangular
</label>
<label>
<input type="checkbox" id="line-8" checked>
Foucaut Sinusoidal [rescaled version]
</label>
<label>
<input type="checkbox" id="line-11" checked>
Loximuthal
</label>
<label>
<input type="checkbox" id="line-14" checked>
Wagner III
</label>
<label>
<input type="checkbox" id="line-15" checked>
Winkel I
</label>
<button onclick="toggleSelectAll(true)">Select All</button>
<button onclick="toggleSelectAll(false)">De-select All</button>
</div>
<div class="map-container">
<svg id="interactive-map"></svg>
</div>
</main>
</div>
<script src="d3.v7.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>