Skip to content

Commit 95b1728

Browse files
refine the layout
1 parent c05205f commit 95b1728

3 files changed

Lines changed: 58 additions & 62 deletions

File tree

assets/css/custom.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
body {
2-
font-size: 16px;
2+
font-size: 18px;
33
}
44

55
.img-teaser{

assets/css/styles.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1218,7 +1218,7 @@ select {
12181218
/* background: #494d55; */
12191219
background: #26282c;
12201220
color: rgba(255, 255, 255, 0.85);
1221-
padding: 60px 0;
1221+
padding: 30px 0;
12221222
}
12231223

12241224
.landing-page .header a {

index.html

Lines changed: 56 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -122,47 +122,42 @@ <h1 class="logo">
122122

123123
<section class="cards-section text-center">
124124
<div class="container">
125-
<div class="intro">
126-
<div class="text-center mb-3">
127-
<img src="assets/images/cagis-logo.png" width="100px"/>
128-
</div>
129-
<h2>Exploropleth</h2>
130-
<br />
131-
<div class="embed-responsive embed-responsive-16by9">
132-
<iframe class="embed-responsive-item"
133-
src="https://www.youtube.com/embed/lNV8VL0owqU?rel=0&amp;showinfo=0" frameborder="0"
134-
allowfullscreen></iframe>
135-
</div>
136-
<br/>
137-
<p class="text-justify">
138-
<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.
139-
</p>
140-
<p class="text-justify">
141-
<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.
142-
</p>
143-
<p class="text-justify">
144-
<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. Exploropleth is open-source and publicly available.
145-
</p>
146-
<br />
147-
<!-- <hr> -->
148-
<div>
149-
<a class="btn btn-info btn-cta m-xs text-white"><i class="fas fa-file-pdf"></i> Paper</a>
150-
&nbsp;
151-
<a class="btn btn-green btn-cta m-xs" href="https://narechania.com/docs/posters/exploropleth_cridc_2023.pdf" target="_blank" download><i class="fas fa-image"></i> Best Poster Award (CRIDC'23)</a>
152-
</div>
153-
<div class="text-left mt-3">
154-
<p><strong>Citation</strong></p>
155-
<pre style="background: #efefef">
156-
125+
<div class="text-center mb-2">
126+
<img src="assets/images/cagis-logo.png" width="100px"/>
127+
</div>
128+
<h2>Exploropleth</h2>
129+
<div class="embed-responsive embed-responsive-16by9 img-center mt-3" style="width: 80% !important;">
130+
<iframe class="embed-responsive-item"
131+
src="https://www.youtube.com/embed/lNV8VL0owqU?rel=0&amp;showinfo=0" frameborder="0"
132+
allowfullscreen></iframe>
133+
</div>
134+
<div class="mt-3">
135+
<a class="btn btn-info btn-cta m-xs text-white"><i class="fas fa-file-pdf"></i> Paper</a>
136+
&nbsp;
137+
<a class="btn btn-green btn-cta m-xs" href="https://narechania.com/docs/posters/exploropleth_cridc_2023.pdf" target="_blank" download><i class="fas fa-image"></i> Best Poster Award (CRIDC'23)</a>
138+
</div>
139+
<br/>
140+
<p class="text-justify">
141+
<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.
142+
</p>
143+
<p class="text-justify">
144+
<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.
145+
</p>
146+
<p class="text-justify">
147+
<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. Exploropleth is open-source and publicly available.
148+
</p>
149+
<div class="text-left mt-2">
150+
<p><strong>Citation</strong></p>
151+
<pre style="background: #efefef">
152+
157153
@article{narechania2025exploropleth,
158154
title={{Exploropleth: Exploratory Analysis of Data Binning Methods in Choropleth Maps}},
159155
author={Narechania, Arpit and Endert, Alex and Andris, Clio},
160156
journal={{Cartography and Geographic Information Science}},
161157
year={2025}
162158
}
163-
</pre>
164-
</div>
165-
</div><!--//intro-->
159+
</pre>
160+
</div>
166161
</div><!--//container-->
167162
<hr/>
168163
<div class="container mt-3">
@@ -179,7 +174,7 @@ <h2 class="mt-3">Related Projects</h2>
179174
</div>
180175
</div>
181176
<div class="row mt-3">
182-
<div class="col-md-4">
177+
<div class="col-md-4 mb-3">
183178
<div id="resiliency">
184179
<div class="text-center mb-3">
185180
<img src="assets/images/giscience2023-logo.png" width="100px"/>
@@ -204,7 +199,8 @@ <h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris<
204199
<a class="btn btn-orange btn-cta-sm m-xs" href="https://exploropleth.github.io/resiliency-app" target="_blank"><i class="fas fa-rocket"></i> Tool</a>
205200
</div>
206201
</br>
207-
<p class="text-justify">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. Resiliency is available in an open-source JavaScript library, BinGuru, described next.
202+
<p class="text-justify">
203+
<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>
208204
</p>
209205
<div class="text-left">
210206
<p><strong>Citation</strong></p>
@@ -222,13 +218,13 @@ <h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris<
222218
</div>
223219
</div>
224220
</div>
225-
<div class="col-md-4">
221+
<div class="col-md-4 mb-3">
226222
<div id="binguru">
227223
<div class="text-center mb-3">
228224
<img src="assets/images/giscience2023-logo.png" width="100px"/>
229225
</div>
230226
<h4><strong>BinGuru</strong></h4>
231-
<span><i>Open-Source JavaScript Library for Data Binning</i></span>
227+
<span><i>JavaScript Library for Data Binning</i></span>
232228
<h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris</h6>
233229
<br/>
234230
<div class="img-teaser-parent">
@@ -247,27 +243,27 @@ <h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris<
247243
class="fas fa-rocket"></i> pip i binguru</a>
248244
</div>
249245
</br>
250-
<p class="text-justify">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:
246+
<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>
251247
</p>
252248
<div class="text-left">
253249
<ul>
254-
<li>Equal Interval</li>
255-
<li>Percentile</li>
256-
<li>Defined Interval</li>
257-
<li>Quantile</li>
258-
<li>Boxplot</li>
259-
<li>Standard Deviation</li>
260-
<li>Maximum Breaks</li>
261-
<li>Pretty Breaks</li>
262-
<li>CK-Means</li>
263-
<li>Head Tail Breaks</li>
264-
<li>Fisher-Jenks</li>
265-
<li>Exponential Bin Size</li>
266-
<li>Geometric Interval</li>
267-
<li>Unclassed</li>
268-
<li>Unique</li>
269-
<li>Manual Interval</li>
270-
<li>Resiliency</li>
250+
<li><small>Equal Interval</small></li>
251+
<li><small>Percentile</small></li>
252+
<li><small>Defined Interval</small></li>
253+
<li><small>Quantile</small></li>
254+
<li><small>Boxplot</small></li>
255+
<li><small>Standard Deviation</small></li>
256+
<li><small>Maximum Breaks</small></li>
257+
<li><small>Pretty Breaks</small></li>
258+
<li><small>CK-Means</small></li>
259+
<li><small>Head Tail Breaks</small></li>
260+
<li><small>Fisher-Jenks</small></li>
261+
<li><small>Exponential Bin Size</small></li>
262+
<li><small>Geometric Interval</small></li>
263+
<li><small>Unclassed</small></li>
264+
<li><small>Unique</small></li>
265+
<li><small>Manual Interval</small></li>
266+
<li><small>Resiliency</small></li>
271267
</ul>
272268
</div>
273269
<div class="text-left">
@@ -286,14 +282,14 @@ <h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris<
286282
</div>
287283
</div>
288284
</div>
289-
<div class="col-md-4">
285+
<div class="col-md-4 mb-3">
290286
<div id="cartographersincubicles">
291287
<div class="text-center mb-3">
292288
<img src="assets/images/cscw2025-logo.png" width="100px"/>
293289
</div>
294290
<h4><strong>Cartographers in Cubicles</strong></h4>
295291
<!-- <span><i>How Training and Preferences of Mapmakers Interplay with Structures and Norms in Not-for-Profit Organizations</i></span> -->
296-
<span><i>How Do Mapmakers Make Choropleth Maps?</i></span>
292+
<span><i>How Do Mapmakers Make Choropleths?</i></span>
297293
<h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris</h6>
298294
<br/>
299295
<div class="embed-responsive embed-responsive-16by9">
@@ -309,7 +305,7 @@ <h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris<
309305
</div>
310306
</br>
311307
<p class="text-justify">
312-
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.
308+
<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>
313309
</p>
314310
<div class="text-left">
315311
<p><strong>Citation</strong></p>

0 commit comments

Comments
 (0)