-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
433 lines (407 loc) · 28.6 KB
/
index.html
File metadata and controls
433 lines (407 loc) · 28.6 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
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XCXV85PGS9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XCXV85PGS9');
</script>
<!-- Hotjar Tracking Code for Exploropleth Homepage -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:6440049,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
<title>Exploropleth | Home</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Exploropleth: Exploratory Analysis of Data Binning Methods in Choropleth Maps">
<meta name="author" content="Arpit Narechania">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://exploropleth.github.io/">
<meta property="og:title" content="Exploropleth">
<meta property="og:description"
content="Exploropleth: Exploratory Analysis of Data Binning Methods in Choropleth Maps">
<meta property="og:image"
content="https://raw.githubusercontent.com/exploropleth/exploropleth.github.io/main/assets/images/overview.png">
<meta property="og:video" content="https://youtu.be/lNV8VL0owqU">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://exploropleth.github.io/">
<meta property="twitter:title" content="Exploropleth">
<meta property="twitter:description"
content="Exploropleth: Exploratory Analysis of Data Binning Methods in Choropleth Maps">
<meta property="twitter:image"
content="https://raw.githubusercontent.com/exploropleth/exploropleth.github.io/main/assets/images/overview.png">
<meta property="twitter:site" content="@arpitnarechania">
<meta property="twitter:creator" content="@arpitnarechania">
<!-- Favicon -->
<link rel="shortcut icon" href="./assets/images/favicon.ico">
<!-- No Caching -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
<link
href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<!-- FontAwesome JS -->
<script defer src="./assets/fontawesome/js/all.js"></script>
<!-- Global CSS -->
<link rel="stylesheet" href="./assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="./assets/plugins/elegant_font/css/style.css">
<link rel="stylesheet" href="./assets/plugins/prism/prism.css">
<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="./assets/css/styles.css">
<!-- Custom CSS -->
<link id="custom-style" rel="stylesheet" href="./assets/css/custom.css">
</head>
<body class="landing-page">
<!-- GITHUB BUTTON JS -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<div class="page-wrapper">
<!-- ******Header****** -->
<header class="header text-center">
<div class="container">
<div class="branding my-4">
<h1 class="logo">
<img src="./assets/images/logo-darkbg.png" class="img-center" width="350" alt="Exploropleth logo" />
</h1>
<span style="text-transform: capitalize;">Exploratory Analysis of Data Binning Methods for Choropleth Maps</span>
</div><!--//branding-->
<div class="d-flex justify-content-center align-items-center flex-column my-4">
<div class="authors mx-3">
<a href="https://narechania.com" class="text-info" target="_blank"><strong>Arpit Narechania</strong></a>,
<a href="https://va.gatech.edu/endert/" class="text-info" target="_blank"><strong>Alex Endert</strong></a>,
<a href="https://friendlycities.gatech.edu" class="text-info" target="_blank"><strong>Clio Andris</strong></a>
</div>
<div class="mt-xs">
<small><a class="text-white" href="mailto:arpit@ust.hk"><i class="fas fa-envelope"></i> arpit [at] ust [dot] hk</a></small>
</div>
<div class="affiliations mt-2 mx-3">
<img class="m-2" src="assets/images/gatech-logo.png" height="40"/>
<img class="m-2" src="assets/images/hkust-logo.png" height="40"/>
</div>
</div>
</div><!--//container-->
</header><!--//header-->
<section class="cards-section text-center">
<div class="container">
<div class="row">
<div class="col-md-5">
<!-- <div class="text-center mb-3">
<img src="assets/images/cagis-logo.png" width="100px"/>
</div> -->
<h2>Exploropleth Software</h2>
<div class="mt-3">
<div class="img-teaser-parent">
<a href="https://exploropleth.github.io/exploropleth" target="_blank"><img class="img-teaser img-center" src="assets/images/overview.png"/></a>
</div>
</div>
<div class="mt-3">
<div>
<a class="btn btn-orange btn-cta m-xs" href="https://exploropleth.github.io/exploropleth" target="_blank"><i class="fas fa-rocket"></i> Launch Tool</a>
<a class="btn btn-info btn-cta m-xs" href="assets/docs/Teaching_Exercise_Exploropleth.pdf" target="_blank"><i class="fas fa-graduation-cap"></i> Download Teaching Exercise</a>
</div>
</div>
<div class="mt-3 mb-3">
<a class="btn btn-outline-dark btn-cta btn-cta-sm m-xs" href="https://doi.org/10.1080/15230406.2025.2543483" target="_blank"><i class="fas fa-file-pdf"></i> Paper (CaGIS'25)</a>
<a class="btn btn-outline-dark btn-cta btn-cta-sm m-xs" href="https://narechania.com/docs/publications/exploropleth_cagis_2025.pdf" target="_blank"><i class="fas fa-file-pdf"></i> Preprint</a>
<a class="btn btn-outline-dark btn-cta btn-cta-sm m-xs" href="https://narechania.com/docs/posters/exploropleth_cridc_2023.pdf" target="_blank"><i class="fas fa-image"></i> Poster (CRIDC'23)</a>
<a class="btn btn-outline-dark btn-cta btn-cta-sm m-xs" href="https://www.youtube.com/watch?v=lNV8VL0owqU" target="_blank"><i class="fas fa-video"></i> Video</a>
<a class="btn btn-outline-dark btn-cta btn-cta-sm m-xs" href="https://github.com/exploropleth/exploropleth" target="_blank"><i class="fab fa-github"></i> Code</a>
</div>
</div>
<div class="col-md-7">
<p class="text-justify">
<strong>When creating choropleth maps, mapmakers often bin (i.e., group, classify) quantitative data values into groups</strong> to help show that certain areas fall within a similar range of values. For instance, a mapmaker may divide counties into groups of high, middle, and low life expectancy (measured in years). It is well known that different binning methods (e.g., natural breaks, quantile) yield different groupings, meaning the same data can be presented differently depending on how it is divided into bins.
</p>
<p class="text-justify">
<strong>To help guide a wide variety of users, we present an open source, web-based, geospatial visualization tool, Exploropleth,</strong> that lets users interact with a catalog of established data binning methods, and subsequently compare, customize, and export custom maps. This tool advances the state of the art by providing multiple binning methods in one view and supporting administrative unit reclassification on-the-fly.
</p>
<p class="text-justify">
<strong>We interviewed 16 cartographers and geographic information systems (GIS) experts from 13 government organizations, NGOs, and federal agencies</strong> who identified opportunities to integrate Exploropleth into their existing mapmaking workflow, and found that the tool has potential to educate students as well as mapmakers with varying levels of experience.
</p>
</div>
</div>
</div><!--//container-->
<hr/>
<div class="container mt-3">
<div class="row">
<div class="col-md-12">
<h2 class="mt-3">Exploropleth Research Paper</h2>
<p class="text-muted">Cartography and Geographic Information Science 2025</p>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12 mb-3">
<div>
<p class="text-left">
If you're interested in learning more about the tool, please check out the Exploropleth research paper: <a href="https://doi.org/10.1080/15230406.2025.2543483" target="_blank">https://doi.org/10.1080/15230406.2025.2543483</a> published in <i>Cartography and Geographic Information Science</i> (a preprint is attached below). The paper provides detailed information on the design, implementation, and use cases of the tool.
</p>
<iframe
src="https://narechania.com/docs/publications/exploropleth_cagis_2025.pdf"
title="Exploropleth: exploratory analysis of data binning methods in choropleth maps"
style="width:100%; height:70vh; border: 1px solid #eee;"
></iframe>
<div class="text-right mt-1">
<small class="text-muted">Having trouble viewing? <a href="https://narechania.com/docs/publications/exploropleth_cagis_2025.pdf" target="_blank">Open in new tab</a>.</small>
</div>
</div>
<div class="text-left mt-2">
<p><strong>Citation</strong></p>
<pre style="background: #efefef">
@article{narechania2025exploropleth,
author = {Arpit Narechania and Alex Endert and Clio Andris},
title = {Exploropleth: exploratory analysis of data binning methods in choropleth maps},
journal = {Cartography and Geographic Information Science},
pages = {1--16},
year = {2025},
publisher = {Taylor \& Francis},
doi = {10.1080/15230406.2025.2543483}
}
</pre>
</div>
</div>
</div>
</div>
<hr/>
<div class="container mt-3">
<div class="row">
<div class="col-md-12">
<h2 class="mt-3">Exercises and Guided Questions for Instructors</h2>
<p class="text-muted">Estimated time: 1 hour</p>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12 mb-3">
<div id="teaching">
<p class="text-justify">
If you are teaching a course on choropleth mapmaking—in particular data binning/classification and how they can sometimes be misleading—we provide an exercise with a set of guided questions using Exploropleth to help students explore related concepts.
</p>
<p class="text-justify">
Instructors: let us know if you'd like assistance using these in class—our team is here to help.
</p>
<div class="mt-2">
<iframe
src="assets/docs/Teaching_Exercise_Exploropleth.pdf#view=FitH"
title="Teaching Exercise using Exploropleth"
style="width:100%; height:70vh; border: 1px solid #eee;"
></iframe>
<div class="text-right mt-1">
<small class="text-muted">Having trouble viewing? <a href="assets/docs/Teaching_Exercise_Exploropleth.pdf" target="_blank">Open in new tab</a>.</small>
</div>
</div>
</div>
</div>
</div>
</div>
<hr/>
<div class="container mt-3">
<div class="row">
<div class="col-md-12">
<h2 class="mt-3">Related Projects</h2>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<p class="text-justify">
In addition to Exploropleth, we have also invented a new <i>consensus</i> data binning/classification method (<a href="#resiliency"><strong>Resiliency</strong></a>), developed an open-source JavaScript library that offers 16+ data binning/classification methods (<a href="#binguru"><strong>BinGuru</strong></a>), and conducted interviews with professional cartographers and GIS experts to understand how they make maps (<a href="#cartographersincubicles"><strong>Cartographers in Cubicles</strong></a>). Check these out!
</p>
</div>
</div>
<div class="row mt-3">
<div class="col-md-4 mb-3">
<div id="resiliency">
<div class="text-center mb-3">
<img src="assets/images/giscience2023-logo.png" width="100px"/>
</div>
<h4><strong>Resiliency</strong></h4>
<span><i>A Consensus Data Binning Method</i></span>
<h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris</h6>
<br/>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/pkK0216P68o?rel=0&showinfo=0&start=255&end=282&autoplay=1" frameborder="0"
allowfullscreen></iframe>
</div>
<!-- <br /> -->
<div class="mt-3 mb-3">
<a class="btn btn-outline-dark btn-cta-sm m-xs" href="https://narechania.com/docs/publications/resiliency_giscience_2023.pdf"
target="_blank"><i class="fas fa-file-pdf"></i> Paper</a>
<a class="btn btn-outline-dark btn-cta-sm m-xs" href="https://github.com/arpitnarechania/binguru/blob/ac5c1a14969e6f8af9236d0dd3d290c17607f7b9/src/index.ts#L890"
target="_blank"><i class="fas fa-key"></i> Code</a>
<a class="btn btn-outline-dark btn-cta-sm m-xs" href="https://exploropleth.github.io/resiliency-app" target="_blank"><i class="fas fa-rocket"></i> Tool</a>
</div>
<!-- </br> -->
<p class="text-justify">
<small>Data binning, or data classification, involves grouping quantitative data points into bins (or classes) to represent spatial patterns and show variation in choropleth maps. There are many methods for binning data (e.g., natural breaks, quantile) that may make the same data appear very different on a map. Some of these methods may be more or less appropriate for certain types of data distributions and map purposes. Thus, when designing a map, novice users may be overwhelmed by the number of choices for binning methods and experts may find comparing results from different binning methods challenging. We present resiliency, a new data binning method that assigns areal units to their most agreed-upon, consensus bin as it persists across multiple chosen binning methods. We show how this "smart average" can effectively communicate spatial patterns that are agreed-upon across binning methods. We also measure the variety of bins a single areal unit can be placed in under different binning methods showing fuzziness and uncertainty on a map.</small>
</p>
<div class="text-left">
<p><strong>Citation</strong></p>
<pre style="background: #efefef">
@article{narechania2023resiliency,
title={{Resiliency: A Consensus Data Binning Method}},
author={Narechania, Arpit and Endert, Alex and Andris, Clio},
journal={12th International Conference on Geographic Information Science (GIScience)},
year={{2023}},
publisher={Leibniz International Proceedings in Informatics},
url={https://doi.org/10.4230/LIPIcs.GIScience.2023.55}
}
</pre>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div id="binguru">
<div class="text-center mb-3">
<img src="assets/images/giscience2023-logo.png" width="100px"/>
</div>
<h4><strong>BinGuru</strong></h4>
<span><i>JavaScript Library for Data Binning</i></span>
<h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris</h6>
<br/>
<div class="img-teaser-parent">
<img class="img-teaser img-center" src="assets/images/binguru.png"/>
</div>
<!-- <br /> -->
<div class="mt-3 mb-3">
<a class="btn btn-outline-dark btn-cta-sm m-xs" href="https://github.com/arpitnarechania/binguru"
target="_blank"><i class="fas fa-key"></i> Code</a>
<a class="btn btn-orange btn-cta-sm m-xs"
href="https://observablehq.com/@arpitnarechania/binguru-demo" target="_blank"><i
class="fas fa-rocket"></i> Demo</a>
<a class="btn btn-outline-dark btn-cta-sm m-xs" href="https://www.npmjs.com/package/binguru" target="_blank"><i
class="fas fa-rocket"></i> pip i binguru</a>
</div>
<!-- </br> -->
<p class="text-justify"><small>BinGuru is a JavaScript package with an API to several established data binning methods (including Resiliency) that are often used for visualizing data on choropleth maps. Currently supported methods include:</small>
</p>
<div class="text-left">
<ul>
<li><small>Equal Interval</small></li>
<li><small>Percentile</small></li>
<li><small>Defined Interval</small></li>
<li><small>Quantile</small></li>
<li><small>Boxplot</small></li>
<li><small>Standard Deviation</small></li>
<li><small>Maximum Breaks</small></li>
<li><small>Pretty Breaks</small></li>
<li><small>CK-Means</small></li>
<li><small>Head Tail Breaks</small></li>
<li><small>Fisher-Jenks</small></li>
<li><small>Exponential Bin Size</small></li>
<li><small>Geometric Interval</small></li>
<li><small>Unclassed</small></li>
<li><small>Unique</small></li>
<li><small>Manual Interval</small></li>
<li><small>Resiliency</small></li>
</ul>
</div>
<div class="text-left">
<p><strong>Citation</strong></p>
<pre style="background: #efefef">
@article{narechania2023resiliency,
title={{Resiliency: A Consensus Data Binning Method}},
author={Narechania, Arpit and Endert, Alex and Andris, Clio},
journal={12th International Conference on Geographic Information Science (GIScience)},
year={{2023}},
publisher={Leibniz International Proceedings in Informatics},
url={https://doi.org/10.4230/LIPIcs.GIScience.2023.55}
}
</pre>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div id="cartographersincubicles">
<div class="text-center mb-3">
<img src="assets/images/cscw2025-logo.png" width="100px"/>
</div>
<h4><strong>Cartographers in Cubicles</strong></h4>
<!-- <span><i>How Training and Preferences of Mapmakers Interplay with Structures and Norms in Not-for-Profit Organizations</i></span> -->
<span><i>How Do Mapmakers Make Choropleths?</i></span>
<h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris</h6>
<br/>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="https://www.youtube.com/embed/pkK0216P68o?rel=0&showinfo=0&start=295&end=378&autoplay=1" frameborder="0"
allowfullscreen></iframe>
</div>
<!-- <br /> -->
<div class="mt-3 mb-3">
<a class="btn btn-outline-dark btn-cta-sm m-xs" href="https://narechania.com/docs/publications/cartographers-in-cubicles_cscw_2025.pdf"
target="_blank"><i class="fas fa-file-pdf"></i> Paper</a>
</div>
<!-- </br> -->
<p class="text-justify">
<small>Choropleth maps are a common and effective way to visualize geographic thematic data. Although cartographers have established many principles about map design, data binning and color usage, less is known about how mapmakers make individual decisions in practice. We interview 16 cartographers and geographic information systems (GIS) experts from 13 government organizations, NGOs, and federal agencies about their choropleth mapmaking decisions and workflows. We categorize our findings and report on how mapmakers follow cartographic guidelines and personal rules of thumb, collaborate with other stakeholders within and outside their organization, and how organizational structures and norms are tied to decision-making during data preparation, data analysis, data binning, map styling, and map post-processing. We find several points of variation as well as regularity across mapmakers and organizations and present takeaways to inform cartographic education and practice, including broader implications and opportunities for CSCW, HCI, and information visualization researchers and practitioners.</small>
</p>
<div class="text-left">
<p><strong>Citation</strong></p>
<pre style="background: #efefef">
@article{narechania2025cartographersincubicles,
title = {{Cartographers in Cubicles: How Training and Preferences of Mapmakers Interplay with Structures and Norms in Not-for-Profit Organizations}},
shorttitle = {{Cartographers in Cubicles}},
author = {{Narechania}, Arpit and {Endert}, Alex and {Andris}, Clio},
journal = {ACM CSCW},
year = {2025},
doi = {10.1145/3757461},
publisher = {ACM}
}
</pre>
</div>
</div>
</div>
</div>
</div>
</section><!--//cards-section-->
</div><!--//page-wrapper-->
<footer class="footer text-center">
<div class="container">
<div>
<div class="my-2">
<img src="./assets/images/logo-darkbg.png" class="img-center" width="250" alt="Exploropleth logo" />
<small>© 2025</small><br/>
<small><a href="mailto:arpit@ust.hk"><i class="fas fa-envelope"></i> arpit [at] ust [dot] hk</a></small>
</div>
<div class="d-flex justify-content-center align-items-center flex-column my-4">
<div class="authors mx-3 text-white">
<a href="https://narechania.com" target="_blank">Arpit Narechania</a>, <a href="https://va.gatech.edu/endert/" target="_blank">Alex Endert</a>, <a href="https://friendlycities.gatech.edu" target="_blank">Clio Andris</a>
</div>
<div class="affiliations mx-3">
<img class="m-2" src="assets/images/gatech-logo.png" height="40"/>
<img class="m-2" src="assets/images/hkust-logo.png" height="40"/>
</div>
</div>
</div>
<!--/* This template is free as long as you keep the footer attribution link. If you'd like to use the template without the attribution link, you can buy the commercial license via our website: themes.3rdwavemedia.com Thank you for your support. :) */-->
<small class="copyright">Designed with <i class="fas fa-heart"></i> by <a
href="https://themes.3rdwavemedia.com/" target="_blank">Xiaoying Riley</a> for developers</small>
</div><!--//container-->
</footer><!--//footer-->
<!-- Main Javascript -->
<script type="text/javascript" src="./assets/plugins/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="./assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./assets/plugins/prism/prism.js"></script>
<script type="text/javascript" src="./assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="./assets/plugins/lightbox/dist/ekko-lightbox.min.js"></script>
<script type="text/javascript" src="./assets/plugins/stickyfill/dist/stickyfill.min.js"></script>
<script type="text/javascript" src="./assets/js/main.js"></script>
</body>
</html>