krz/world-incarceration
An interactive map of world incarceration statistics.
clone: git clone https://gitbay.org/krz/world-incarceration.git
v2: index.html · raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <title>World Incarceration</title>
5 <meta charset="UTF-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <meta
8 name="description"
9 content="An interactive world map of incarceration statistics with optional choropleth overlays. Explore the map, compare countries, and dive into the source data."
10 />
11 <link rel="apple-touch-icon" sizes="57x57" href="./assets/images/icons/apple-icon-57x57.png" />
12 <link rel="apple-touch-icon" sizes="60x60" href="./assets/images/icons/apple-icon-60x60.png" />
13 <link rel="apple-touch-icon" sizes="72x72" href="./assets/images/icons/apple-icon-72x72.png" />
14 <link rel="apple-touch-icon" sizes="76x76" href="./assets/images/icons/apple-icon-76x76.png" />
15 <link rel="apple-touch-icon" sizes="114x114" href="./assets/images/icons/apple-icon-114x114.png" />
16 <link rel="apple-touch-icon" sizes="120x120" href="./assets/images/icons/apple-icon-120x120.png" />
17 <link rel="apple-touch-icon" sizes="144x144" href="./assets/images/icons/apple-icon-144x144.png" />
18 <link rel="apple-touch-icon" sizes="152x152" href="./assets/images/icons/apple-icon-152x152.png" />
19 <link rel="apple-touch-icon" sizes="180x180" href="./assets/images/icons/apple-icon-180x180.png" />
20 <link rel="icon" type="image/png" sizes="192x192" href="./assets/images/icons/android-icon-192x192.png" />
21 <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/icons/favicon-32x32.png" />
22 <link rel="icon" type="image/png" sizes="96x96" href="./assets/images/icons/favicon-96x96.png" />
23 <link rel="icon" type="image/png" sizes="16x16" href="./assets/images/icons/favicon-16x16.png" />
24 <link rel="manifest" href="./assets/images/icons/manifest.json" />
25 <meta name="msapplication-TileColor" content="#ffffff" />
26 <meta name="msapplication-TileImage" content="./assets/images/icons/ms-icon-144x144.png" />
27 <meta name="theme-color" content="#0d0d14" />
28
29 <!-- Fonts -->
30 <link rel="preconnect" href="https://fonts.googleapis.com" />
31 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
32 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
33
34 <link rel="stylesheet" href="./assets/css/bootstrap-5.0.0.min.css" />
35 <link rel="stylesheet" href="./assets/css/app.css" />
36 </head>
37
38 <body>
39 <!-- ── Navbar ──────────────────────────────────────────────────────── -->
40 <nav class="navbar navbar-expand-lg">
41 <div class="container-fluid">
42 <a class="navbar-brand" href="./">World Incarceration</a>
43
44 <button
45 class="navbar-toggler"
46 type="button"
47 data-bs-toggle="collapse"
48 data-bs-target="#navbarSupportedContent"
49 aria-controls="navbarSupportedContent"
50 aria-expanded="false"
51 aria-label="Toggle navigation"
52 >
53 <span class="navbar-toggler-icon"></span>
54 </button>
55
56 <div class="collapse navbar-collapse" id="navbarSupportedContent">
57 <ul class="navbar-nav ms-auto me-0 mb-2 mb-lg-0">
58
59 <!-- settings dropdown -->
60 <li class="nav-item dropdown">
61 <button
62 class="nav-icon-btn"
63 data-bs-toggle="dropdown"
64 aria-expanded="false"
65 title="Settings"
66 >
67 <!-- gear icon -->
68 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
69 <path d="M24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z"/>
70 </svg>
71 </button>
72 <div class="dropdown-menu dropdown-menu-end">
73 <a class="dropdown-item" href="#" data-action="labels">Toggle Labels</a>
74 <a class="dropdown-item" href="#" data-action="reset">Reset Map</a>
75 </div>
76 </li>
77
78 <!-- compare -->
79 <li class="nav-item">
80 <button
81 id="comparebtn"
82 type="button"
83 class="nav-icon-btn"
84 data-bs-toggle="modal"
85 data-bs-target="#compareModal"
86 title="Compare Countries"
87 >
88 <!-- compare arrows icon -->
89 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
90 <path d="M6 11v-4l-6 5 6 5v-4h12v4l6-5-6-5v4z"/>
91 </svg>
92 </button>
93 </li>
94
95 <!-- graphs -->
96 <li class="nav-item">
97 <button
98 id="graphsbtn"
99 type="button"
100 class="nav-icon-btn"
101 data-bs-toggle="modal"
102 data-bs-target="#graphModal"
103 title="Charts"
104 >
105 <!-- pie/chart icon -->
106 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
107 <path d="M13.012 5.007v-1.668l2.802-2.771c.409.136.809.293 1.197.471l-3.999 3.968zm7.089-1.93l-7.089 7.058v.853h.877l7.044-7.076c-.263-.292-.541-.57-.832-.835zm-7.089-1.468l1.437-1.406c-.46-.094-.96-.163-1.437-.203v1.609zm10.789 7.962l-1.386 1.417h1.585c-.04-.47-.106-.964-.199-1.417zm-.363-1.366c-.135-.41-.292-.81-.469-1.199l-3.951 3.982h1.668l2.752-2.783zm-1.063-2.337c-.205-.346-.426-.682-.664-1.004l-6.093 6.124h1.668l5.089-5.12zm-3.225-3.57c-.322-.238-.657-.459-1.003-.665l-5.135 5.104v1.668l6.138-6.107zm-8.15 10.702v-13c-6.161.519-11 5.683-11 11.978 0 6.639 5.382 12.022 12.021 12.022 6.296 0 11.46-4.839 11.979-11h-13z"/>
108 </svg>
109 </button>
110 </li>
111
112 <!-- information -->
113 <li class="nav-item">
114 <button
115 id="infobtn"
116 type="button"
117 class="nav-icon-btn"
118 data-bs-toggle="modal"
119 data-bs-target="#infoModal"
120 title="Information"
121 >
122 <!-- info circle icon -->
123 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
124 <path d="M13.25 7c0 .69-.56 1.25-1.25 1.25s-1.25-.56-1.25-1.25.56-1.25 1.25-1.25 1.25.56 1.25 1.25zm10.75 5c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-2 0c0-5.514-4.486-10-10-10s-10 4.486-10 10 4.486 10 10 10 10-4.486 10-10zm-13-2v2h2v6h2v-8h-4z"/>
125 </svg>
126 </button>
127 </li>
128
129 <!-- precautions -->
130 <li class="nav-item">
131 <button
132 id="alertbtn"
133 type="button"
134 class="nav-icon-btn"
135 data-bs-toggle="modal"
136 data-bs-target="#alertModal"
137 title="Precautions"
138 >
139 <!-- warning triangle icon -->
140 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
141 <path d="M12 5.177l8.631 15.823h-17.262l8.631-15.823zm0-4.177l-12 22h24l-12-22zm-1 9h2v6h-2v-6zm1 9.75c-.689 0-1.25-.56-1.25-1.25s.561-1.25 1.25-1.25 1.25.56 1.25 1.25-.561 1.25-1.25 1.25z"/>
142 </svg>
143 </button>
144 </li>
145
146 </ul>
147 </div>
148 </div>
149 </nav>
150
151 <!-- ── Map ─────────────────────────────────────────────────────────── -->
152 <div id="map-container"></div>
153
154 <!-- ── Metric pill bar ─────────────────────────────────────────────── -->
155 <div id="gbar">
156 <button id="totPop" type="button" class="metric-btn active-metric" title="Total Prison Populations">Total Population</button>
157 <button id="perCapita" type="button" class="metric-btn" title="Prisoners Per Capita">Per Capita</button>
158 <button id="women" type="button" class="metric-btn" title="Percent Women Imprisoned">% Women</button>
159 <button id="juveniles" type="button" class="metric-btn" title="Percent Juveniles Imprisoned">% Juveniles</button>
160 <button id="occupancy" type="button" class="metric-btn" title="Prison Occupancy Level">Occupancy</button>
161 </div>
162
163 <!-- ── MODALS ──────────────────────────────────────────────────────── -->
164
165 <!-- country detail modal (populated by modal.js) -->
166 <div class="modal fade" id="countryModal" tabindex="-1" role="dialog">
167 <div class="modal-dialog">
168 <div class="modal-content">
169 <div class="modal-header">
170 <h5 class="modal-title" id="country-modal-title"></h5>
171 <button type="button" class="nav-icon-btn ms-auto" data-bs-dismiss="modal" aria-label="Close">
172 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.1 9.179 2.81 2.81 9.074-9.185 9.19 9.075z"/></svg>
173 </button>
174 </div>
175 <div class="modal-body" id="country-modal-body"></div>
176 <div class="modal-footer">
177 <button type="button" class="btn-modal-ghost" data-bs-dismiss="modal">Close</button>
178 </div>
179 </div>
180 </div>
181 </div>
182
183 <!-- compare: country selection -->
184 <div class="modal fade" id="compareModal" tabindex="-1" role="dialog">
185 <div class="modal-dialog modal-lg">
186 <div class="modal-content">
187 <div class="modal-header">
188 <h5 class="modal-title">Country Comparison</h5>
189 <button type="button" class="nav-icon-btn ms-auto" data-bs-dismiss="modal" aria-label="Close">
190 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.1 9.179 2.81 2.81 9.074-9.185 9.19 9.075z"/></svg>
191 </button>
192 </div>
193 <div class="modal-body">
194 <div id="compare-alert"></div>
195 <div class="row g-3">
196 <div class="col-md-6">
197 <select id="compare-select-1"></select>
198 </div>
199 <div class="col-md-6">
200 <select id="compare-select-2"></select>
201 </div>
202 </div>
203 </div>
204 <div class="modal-footer">
205 <button type="button" class="btn-modal-ghost" data-bs-dismiss="modal">Cancel</button>
206 <button type="button" class="btn-modal-primary" id="compare-go-btn">Compare</button>
207 </div>
208 </div>
209 </div>
210 </div>
211
212 <!-- compare: side-by-side result -->
213 <div class="modal fade" id="compareResultModal" tabindex="-1" role="dialog">
214 <div class="modal-dialog modal-lg">
215 <div class="modal-content">
216 <div class="modal-header">
217 <h5 class="modal-title">Side-by-Side Comparison</h5>
218 <button type="button" class="nav-icon-btn ms-auto" data-bs-dismiss="modal" aria-label="Close">
219 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.1 9.179 2.81 2.81 9.074-9.185 9.19 9.075z"/></svg>
220 </button>
221 </div>
222 <div class="modal-body">
223 <table class="table">
224 <thead>
225 <tr>
226 <th></th>
227 <th id="compare-result-c1"></th>
228 <th id="compare-result-c2"></th>
229 </tr>
230 </thead>
231 <tbody id="compare-result-body"></tbody>
232 </table>
233 </div>
234 <div class="modal-footer">
235 <button type="button" class="btn-modal-ghost" data-bs-dismiss="modal">Close</button>
236 </div>
237 </div>
238 </div>
239 </div>
240
241 <!-- information modal -->
242 <div class="modal fade" id="infoModal" tabindex="-1" role="dialog">
243 <div class="modal-dialog modal-lg">
244 <div class="modal-content">
245 <div class="modal-header">
246 <h5 class="modal-title">Information</h5>
247 <button type="button" class="nav-icon-btn ms-auto" data-bs-dismiss="modal" aria-label="Close">
248 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.1 9.179 2.81 2.81 9.074-9.185 9.19 9.075z"/></svg>
249 </button>
250 </div>
251 <div class="modal-body">
252 <p>Hover over any country to view its name and click to see its statistics.</p>
253 <p>Use the <b>Settings</b> menu to toggle country labels or reset the map view.</p>
254 <p>To compare two countries, click the <b>Compare</b> button in the navbar.</p>
255 <p>In the <b>Charts</b> modal, click any pie slice to drill into that country's incarceration metrics. Click <b>← Back</b> to return.</p>
256 <hr />
257 <p><b>References</b></p>
258 <div class="row g-2">
259 <div class="col-sm-6">
260 <a class="ref-btn" href="http://www.prisonstudies.org" target="_blank" rel="noopener">World Prison Brief</a>
261 </div>
262 <div class="col-sm-6">
263 <a class="ref-btn" href="https://en.wikipedia.org/wiki/List_of_countries_by_system_of_government" target="_blank" rel="noopener">Wikipedia — Governments</a>
264 </div>
265 </div>
266 </div>
267 <div class="modal-footer">
268 <button type="button" class="btn-modal-ghost" data-bs-dismiss="modal">Close</button>
269 </div>
270 </div>
271 </div>
272 </div>
273
274 <!-- alert / precautions modal -->
275 <div class="modal fade" id="alertModal" tabindex="-1" role="dialog">
276 <div class="modal-dialog modal-lg">
277 <div class="modal-content">
278 <div class="modal-header">
279 <h5 class="modal-title">Precautions</h5>
280 <button type="button" class="nav-icon-btn ms-auto" data-bs-dismiss="modal" aria-label="Close">
281 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.1 9.179 2.81 2.81 9.074-9.185 9.19 9.075z"/></svg>
282 </button>
283 </div>
284 <div class="modal-body">
285 <p>Data is sourced from the <a class="btn-modal-link p-0" href="http://www.prisonstudies.org" target="_blank" rel="noopener">World Prison Brief</a> and may not reflect the most current figures. Always consult primary sources for research purposes.</p>
286 <p>If any part of this site is inaccurate or confusing, please reach out.</p>
287 </div>
288 <div class="modal-footer">
289 <button type="button" class="btn-modal-ghost" data-bs-dismiss="modal">Close</button>
290 </div>
291 </div>
292 </div>
293 </div>
294
295 <!-- graph modal -->
296 <div class="modal fade" id="graphModal" tabindex="-1" role="dialog">
297 <div class="modal-dialog modal-lg">
298 <div class="modal-content">
299 <div class="modal-header">
300 <h5 class="modal-title">Top 5 by Current Metric</h5>
301 <button type="button" class="nav-icon-btn ms-auto" data-bs-dismiss="modal" aria-label="Close">
302 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.1 9.179 2.81 2.81 9.074-9.185 9.19 9.075z"/></svg>
303 </button>
304 </div>
305 <div class="modal-body">
306 <div id="myChart2"></div>
307 <div id="myNextChart" style="display:none;"></div>
308 </div>
309 <div class="modal-footer">
310 <button type="button" class="btn-modal-ghost" data-bs-dismiss="modal">Close</button>
311 </div>
312 </div>
313 </div>
314 </div>
315
316 <!-- ── Scripts ─────────────────────────────────────────────────────── -->
317 <script src="./assets/js/bootstrap.bundle.min.js"></script>
318 <script type="module" src="./assets/js/app.js"></script>
319 </body>
320</html>