Skip to content

Commit f689d07

Browse files
relayout landing page;
1 parent 2c690ad commit f689d07

4 files changed

Lines changed: 95 additions & 56 deletions

File tree

assets/css/custom.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ body {
2929
margin: 8px;
3030
}
3131

32+
.mr-0 {
33+
margin-right: 0;
34+
}
35+
3236
.p-sm{
3337
padding: 8px;
3438
}
142 KB
Binary file not shown.
224 KB
Binary file not shown.

index.html

Lines changed: 91 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -108,80 +108,115 @@ <h1 class="logo">
108108
<img class="m-2" src="assets/images/hkust-logo.png" height="40"/>
109109
</div>
110110
</div>
111-
<div class="cta-container">
112-
<div>
113-
<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>
114-
</div>
115-
<div class="mt-1">
116-
<small><a href="https://github.com/exploropleth/exploropleth" target="_blank"><i class="fab fa-github"></i> Code</a></small>
117-
</div>
118-
</div><!--//cta-container-->
119111

120112
</div><!--//container-->
121113
</header><!--//header-->
122114

123115
<section class="cards-section text-center">
124116
<div class="container">
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>
117+
<div class="row">
118+
<div class="col-md-5">
119+
<h2>Exploropleth Software</h2>
120+
<div class="mt-3">
121+
<div class="img-teaser-parent">
122+
<a href="https://exploropleth.github.io/exploropleth" target="_blank"><img class="img-teaser img-center" src="assets/images/overview.png"/></a>
123+
</div>
124+
</div>
125+
<div class="mt-3">
126+
<div>
127+
<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>
128+
<a class="btn btn-dark btn-cta m-xs" href="assets/docs/Teaching_Exercise_Exploropleth.pdf" target="_blank"><i class="fas fa-graduation-cap"></i> Teaching Exercise</a>
129+
</div>
130+
</div>
131+
<div class="mt-3 mb-3">
132+
<a class="btn btn-info btn-cta btn-cta-sm m-xs text-white" href="https://doi.org/10.1080/15230406.2025.2543483" target="_blank"><i class="fas fa-file-pdf"></i> Paper (CaGIS'25)</a>
133+
<a class="btn btn-info btn-cta btn-cta-sm m-xs text-white" href="https://narechania.com/docs/publications/exploropleth_cagis_2025.pdf" target="_blank"><i class="fas fa-file-pdf"></i> Preprint</a>
134+
<a class="btn btn-info 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>
135+
<a class="btn btn-info 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>
136+
<a class="btn btn-info btn-cta btn-cta-sm m-xs" href="https://github.com/exploropleth/exploropleth" target="_blank"><i class="fab fa-github"></i> Code</a>
137+
</div>
138+
</div>
139+
<div class="col-md-7">
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>
133150
</div>
134-
<div class="mt-3">
135-
<a href="https://doi.org/10.1080/15230406.2025.2543483" target="_blank" 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-
&nbsp;
139-
<a class="btn btn-warning m-xs" href="assets/docs/Teaching_Exercises_Exploropleth.docx" target="_blank"><i class="fas fa-graduation-cap"></i> Download Teaching Exercises</a>
151+
</div><!--//container-->
152+
<hr/>
153+
<div class="container mt-3">
154+
<div class="row">
155+
<div class="col-md-12">
156+
<h2 class="mt-3">Research Paper</h2>
157+
<p class="text-muted">Cartography and Geographic Information Science</p>
158+
</div>
140159
</div>
141-
<br/>
142-
<p class="text-justify">
143-
<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.
144-
</p>
145-
<p class="text-justify">
146-
<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.
147-
</p>
148-
<p class="text-justify">
149-
<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.
150-
</p>
151-
<div class="text-left mt-2">
152-
<p><strong>Citation</strong></p>
153-
<pre style="background: #efefef">
154-
155-
@article{narechania2025exploropleth,
156-
author = {Arpit Narechania and Alex Endert and Clio Andris},
157-
title = {Exploropleth: exploratory analysis of data binning methods in choropleth maps},
158-
journal = {Cartography and Geographic Information Science},
159-
pages = {1--16},
160-
year = {2025},
161-
publisher = {Taylor \& Francis},
162-
doi = {10.1080/15230406.2025.2543483}
163-
}
164-
</pre>
160+
<div class="row mt-3">
161+
<div class="col-md-12 mb-3">
162+
<div>
163+
<p class="text-justify">
164+
If you're interested in learning more about the tool, please check out the Exploropleth paper published in <i>Cartography and Geographic Information Science</i>: <a href="https://doi.org/10.1080/15230406.2025.2543483" target="_blank"></a> (a preprint is attached below). The paper provides detailed information on the design, implementation, and use cases of the tool.
165+
</p>
166+
<iframe
167+
src="https://narechania.com/docs/publications/exploropleth_cagis_2025.pdf"
168+
title="Exploropleth: exploratory analysis of data binning methods in choropleth maps"
169+
style="width:100%; height:70vh; border: 1px solid #eee;"
170+
></iframe>
171+
<div class="text-right mt-1">
172+
<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>
173+
</div>
174+
</div>
175+
<div class="text-left mt-2">
176+
<p><strong>Citation</strong></p>
177+
<pre style="background: #efefef">
178+
179+
@article{narechania2025exploropleth,
180+
author = {Arpit Narechania and Alex Endert and Clio Andris},
181+
title = {Exploropleth: exploratory analysis of data binning methods in choropleth maps},
182+
journal = {Cartography and Geographic Information Science},
183+
pages = {1--16},
184+
year = {2025},
185+
publisher = {Taylor \& Francis},
186+
doi = {10.1080/15230406.2025.2543483}
187+
}
188+
</pre>
189+
</div>
190+
</div>
165191
</div>
166-
</div><!--//container-->
192+
</div>
167193
<hr/>
168194
<div class="container mt-3">
169195
<div class="row">
170196
<div class="col-md-12">
171-
<h2 class="mt-3">Teachers: See Guided Questions + Exercises Here. 1 Hour Estimate</h2>
197+
<h2 class="mt-3">Instructors: Exercises and Guided Questions</h2>
198+
<p class="text-muted">Estimated time: 1 hour</p>
172199
</div>
173200
</div>
174201
<div class="row mt-3">
175202
<div class="col-md-12 mb-3">
176203
<div id="teaching">
177204
<p class="text-justify">
178-
If you are teaching a course on choropleth mapmaking (data binning/classification, how they can sometimes be misleading), we provide a set of guided questions and exercises using Exploropleth to help students explore related concepts.
179-
<br/>
205+
If you are teaching a course on choropleth mapmaking&mdash;in particular data binning/classification and how they can sometimes be misleading&mdash;we provide an exercise with a set of guided questions using Exploropleth to help students explore related concepts.
180206
</p>
181-
<p class="text-center">
182-
<a class="btn btn-warning m-xs" href="assets/docs/Teaching_Exercises_Exploropleth.docx"
183-
target="_blank"><i class="fas fa-graduation-cap"></i> Download Teaching Exercises</a>
207+
<p class="text-justify">
208+
Instructors: let us know if you'd like assistance using these in class&mdash;our team is here to help.
184209
</p>
210+
<div class="mt-2">
211+
<iframe
212+
src="assets/docs/Teaching_Exercise_Exploropleth.pdf#view=FitH"
213+
title="Teaching Exercise using Exploropleth"
214+
style="width:100%; height:70vh; border: 1px solid #eee;"
215+
></iframe>
216+
<div class="text-right mt-1">
217+
<small class="text-muted">Having trouble viewing? <a href="assets/docs/Teaching_Exercise_Exploropleth.pdf" target="_blank">Open in new tab</a>.</small>
218+
</div>
219+
</div>
185220
</div>
186221
</div>
187222
</div>
@@ -218,7 +253,7 @@ <h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris<
218253
<br />
219254
<div>
220255
<a class="btn btn-info btn-cta-sm m-xs" href="https://narechania.com/docs/publications/resiliency_giscience_2023.pdf"
221-
target="_blank" download><i class="fas fa-file-pdf"></i> Paper</a>
256+
target="_blank"><i class="fas fa-file-pdf"></i> Paper</a>
222257
&nbsp;
223258
<a class="btn btn-dark btn-cta-sm m-xs" href="https://github.com/arpitnarechania/binguru/blob/ac5c1a14969e6f8af9236d0dd3d290c17607f7b9/src/index.ts#L890"
224259
target="_blank"><i class="fas fa-key"></i> Code</a>
@@ -255,7 +290,7 @@ <h4><strong>BinGuru</strong></h4>
255290
<h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris</h6>
256291
<br/>
257292
<div class="img-teaser-parent">
258-
<img class="img-teaser img-center" src="assets/images/binguru.png"></iframe>
293+
<img class="img-teaser img-center" src="assets/images/binguru.png"/>
259294
</div>
260295
<br />
261296
<div>
@@ -327,7 +362,7 @@ <h6 class="text-secondary text-bold">Arpit Narechania, Alex Endert, Clio Andris<
327362
<br />
328363
<div>
329364
<a class="btn btn-info btn-cta-sm m-xs" href="https://narechania.com/docs/publications/cartographers-in-cubicles_cscw_2025.pdf"
330-
target="_blank" download><i class="fas fa-file-pdf"></i> Paper</a>
365+
target="_blank"><i class="fas fa-file-pdf"></i> Paper</a>
331366

332367
</div>
333368
</br>

0 commit comments

Comments
 (0)