PageSourceSearch

https://fines-fees.netlify.app/map

html fines-fees.netlify.app collected 2026-10-03 10:44:01 UTC 85,070 bytes, 801 lines download raw bytes

1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
3
4<meta charset="utf-8">
5<meta name="generator" content="quarto-1.1.251">
6
7<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
8
9
10<title></title>
11<style>
12code{white-space: pre-wrap;}
13span.smallcaps{font-variant: small-caps;}
14div.columns{display: flex; gap: min(4vw, 1.5em);}
15div.column{flex: auto; overflow-x: auto;}
16div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
17ul.task-list{list-style: none;}
18ul.task-list li input[type="checkbox"] {
19  width: 0.8em;
20  margin: 0 0.8em 0.2em -1.6em;
21  vertical-align: middle;
22}
23pre > code.sourceCode { white-space: pre; position: relative; }
24pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
25pre > code.sourceCode > span:empty { height: 1.2em; }
26.sourceCode { overflow: visible; }
27code.sourceCode > span { color: inherit; text-decoration: inherit; }
28div.sourceCode { margin: 1em 0; }
29pre.sourceCode { margin: 0; }
30@media screen {
31div.sourceCode { overflow: auto; }
32}
33@media print {
34pre > code.sourceCode { white-space: pre-wrap; }
35pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
36}
37pre.numberSource code
38  { counter-reset: source-line 0; }
39pre.numberSource code > span
40  { position: relative; left: -4em; counter-increment: source-line; }
41pre.numberSource code > span > a:first-child::before
42  { content: counter(source-line);
43    position: relative; left: -1em; text-align: right; vertical-align: baseline;
44    border: none; display: inline-block;
45    -webkit-touch-callout: none; -webkit-user-select: none;
46    -khtml-user-select: none; -moz-user-select: none;
47    -ms-user-select: none; user-select: none;
48    padding: 0 4px; width: 4em;
49    color: #aaaaaa;
50  }
51pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
52div.sourceCode
53  {   }
54@media screen {
55pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
56}
57code span.al { color: #ff0000; font-weight: bold; } /* Alert */
58code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
59code span.at { color: #7d9029; } /* Attribute */
60code span.bn { color: #40a070; } /* BaseN */
61code span.bu { color: #008000; } /* BuiltIn */
62code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
63code span.ch { color: #4070a0; } /* Char */
64code span.cn { color: #880000; } /* Constant */
65code span.co { color: #60a0b0; font-style: italic; } /* Comment */
66code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
67code span.do { color: #ba2121; font-style: italic; } /* Documentation */
68code span.dt { color: #902000; } /* DataType */
69code span.dv { color: #40a070; } /* DecVal */
70code span.er { color: #ff0000; font-weight: bold; } /* Error */
71code span.ex { } /* Extension */
72code span.fl { color: #40a070; } /* Float */
73code span.fu { color: #06287e; } /* Function */
74code span.im { color: #008000; font-weight: bold; } /* Import */
75code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
76code span.kw { color: #007020; font-weight: bold; } /* Keyword */
77code span.op { color: #666666; } /* Operator */
78code span.ot { color: #007020; } /* Other */
79code span.pp { color: #bc7a00; } /* Preprocessor */
80code span.sc { color: #4070a0; } /* SpecialChar */
81code span.ss { color: #bb6688; } /* SpecialString */
82code span.st { color: #4070a0; } /* String */
83code span.va { color: #19177c; } /* Variable */
84code span.vs { color: #4070a0; } /* VerbatimString */
85code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
86</style>
87
88
89<script src="site_libs/quarto-nav/quarto-nav.js"></script>
vendor: 1 bytes, line 89
89
90<script src="site_libs/clipboard/clipboard.min.js"></script>
vendor: 1 bytes, line 90
90
91<script src="site_libs/quarto-search/autocomplete.umd.js"></script>
vendor: 1 bytes, line 91
91
92<script src="site_libs/quarto-search/fuse.min.js"></script>
vendor: 1 bytes, line 92
92
93<script src="site_libs/quarto-search/quarto-search.js"></script>
93
94<meta name="quarto:offset" content="./">
95<link href="./images/favicon.ico" rel="icon">
96<script src="site_libs/quarto-html/quarto.js"></script>
vendor: 1 bytes, line 96
96
97<script src="site_libs/quarto-html/popper.min.js"></script>
vendor: 1 bytes, line 97
97
98<script src="site_libs/quarto-html/tippy.umd.min.js"></script>
vendor: 1 bytes, line 98
98
99<script src="site_libs/quarto-html/anchor.min.js"></script>
99
100<link href="site_libs/quarto-html/tippy.css" rel="stylesheet">
101<link href="site_libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
102<script src="site_libs/bootstrap/bootstrap.min.js"></script>
102
103<link href="site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
104<link href="site_libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
105<script id="quarto-search-options" type="application/json">{
106  "location": "sidebar",
107  "copy-button": false,
108  "collapse-after": 3,
109  "panel-placement": "start",
110  "type": "textbox",
111  "limit": 20,
112  "language": {
113    "search-no-results-text": "No results",
114    "search-matching-documents-text": "matching documents",
115    "search-copy-link-title": "Copy link to search",
116    "search-hide-matches-text": "Hide additional matches",
117    "search-more-match-text": "more match in this document",
118    "search-more-matches-text": "more matches in this document",
119    "search-clear-button-title": "Clear",
120    "search-detached-cancel-button-title": "Cancel",
121    "search-submit-button-title": "Submit"
122  }
123}</script>
vendor: 1 bytes, line 123
123
124<script type="module" src="site_libs/quarto-ojs/quarto-ojs-runtime.js"></script>
124
125<link href="site_libs/quarto-ojs/quarto-ojs.css" rel="stylesheet">
126
127
128</head>
129
130<body>
131
132<div id="quarto-search-results"></div>
133<!-- content -->
134<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-full">
135<!-- sidebar -->
136<!-- margin-sidebar -->
137    <div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
138        
139    </div>
140<!-- main -->
141<main class="content column-page" id="quarto-document-content">
142
143
144
145<div class="cell">
146<div class="sourceCode cell-code hidden" id="cb1" data-startfrom="18" data-source-offset="-1"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 17;"><span id="cb1-18"><a href="#cb1-18" aria-hidden="true" tabindex="-1"></a>viewof scenarioInputs <span class="op">=</span> <span class="fu">form</span>(</span>
147<span id="cb1-19"><a href="#cb1-19" aria-hidden="true" tabindex="-1"></a>  <span class="fu">html</span><span class="vs">`</span></span>
148<span id="cb1-20"><a href="#cb1-20" aria-hidden="true" tabindex="-1"></a><span class="vs">    &lt;form style="text-align: center; font-size: 16px; margin-bottom: 5px;"&gt;</span></span>
149<span id="cb1-21"><a href="#cb1-21" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;label class="first-radio-button"&gt;</span></span>
150<span id="cb1-22"><a href="#cb1-22" aria-hidden="true" tabindex="-1"></a><span class="vs">          &lt;input id="first-radio-button" type="radio" name="optradio" value="0" checked&gt;Cities &amp; Towns</span></span>
151<span id="cb1-23"><a href="#cb1-23" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;/label&gt;</span></span>
152<span id="cb1-24"><a href="#cb1-24" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;label class="second-radio-button"&gt;</span></span>
153<span id="cb1-25"><a href="#cb1-25" aria-hidden="true" tabindex="-1"></a><span class="vs">          &lt;input id="second-radio-button" type="radio" name="optradio"  value="1"&gt;Counties</span></span>
154<span id="cb1-26"><a href="#cb1-26" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;/label&gt;</span></span>
155<span id="cb1-27"><a href="#cb1-27" aria-hidden="true" tabindex="-1"></a><span class="vs">    &lt;/form&gt;</span></span>
156<span id="cb1-28"><a href="#cb1-28" aria-hidden="true" tabindex="-1"></a><span class="vs">  `</span></span>
157<span id="cb1-29"><a href="#cb1-29" aria-hidden="true" tabindex="-1"></a>)</span>
158<span id="cb1-30"><a href="#cb1-30" aria-hidden="true" tabindex="-1"></a></span>
159<span id="cb1-31"><a href="#cb1-31" aria-hidden="true" tabindex="-1"></a></span>
160<span id="cb1-32"><a href="#cb1-32" aria-hidden="true" tabindex="-1"></a>viewof filterInputs <span class="op">=</span> <span class="fu">form</span>(</span>
161<span id="cb1-33"><a href="#cb1-33" aria-hidden="true" tabindex="-1"></a>  <span class="fu">html</span><span class="vs">`</span></span>
162<span id="cb1-34"><a href="#cb1-34" aria-hidden="true" tabindex="-1"></a><span class="vs">    &lt;form style="text-align: center; font-size: 16px; margin-bottom: 5px;"&gt;</span></span>
163<span id="cb1-35"><a href="#cb1-35" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;label class="second-filter-button"&gt;</span></span>
164<span id="cb1-36"><a href="#cb1-36" aria-hidden="true" tabindex="-1"></a><span class="vs">          &lt;input id="second-filter-button" type="radio" name="optradio"  value="0.05" checked&gt;5%</span></span>
165<span id="cb1-37"><a href="#cb1-37" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;/label&gt;</span></span>
166<span id="cb1-38"><a href="#cb1-38" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;label class="third-filter-button"&gt;</span></span>
167<span id="cb1-39"><a href="#cb1-39" aria-hidden="true" tabindex="-1"></a><span class="vs">          &lt;input id="third-filter-button" type="radio" name="optradio"  value="0.1"&gt;10%</span></span>
168<span id="cb1-40"><a href="#cb1-40" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;/label&gt;</span></span>
169<span id="cb1-41"><a href="#cb1-41" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;label class="fourth-filter-button"&gt;</span></span>
170<span id="cb1-42"><a href="#cb1-42" aria-hidden="true" tabindex="-1"></a><span class="vs">          &lt;input id="fourth-filter-button" type="radio" name="optradio"  value="
1700.15"&gt;15%</span></span>
171<span id="cb1-43"><a href="#cb1-43" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;/label&gt;</span></span>
172<span id="cb1-44"><a href="#cb1-44" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;label class="fifth-filter-button"&gt;</span></span>
173<span id="cb1-45"><a href="#cb1-45" aria-hidden="true" tabindex="-1"></a><span class="vs">          &lt;input id="fifth-filter-button" type="radio" name="optradio"  value="0.25"&gt;25%</span></span>
174<span id="cb1-46"><a href="#cb1-46" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;/label&gt;</span></span>
175<span id="cb1-47"><a href="#cb1-47" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;label class="sixth-filter-button"&gt;</span></span>
176<span id="cb1-48"><a href="#cb1-48" aria-hidden="true" tabindex="-1"></a><span class="vs">          &lt;input id="sixth-filter-button" type="radio" name="optradio"  value="0.5"&gt;50%</span></span>
177<span id="cb1-49"><a href="#cb1-49" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;/label&gt;</span></span>
178<span id="cb1-50"><a href="#cb1-50" aria-hidden="true" tabindex="-1"></a><span class="vs">    &lt;/form&gt;</span></span>
179<span id="cb1-51"><a href="#cb1-51" aria-hidden="true" tabindex="-1"></a><span class="vs">  `</span></span>
180<span id="cb1-52"><a href="#cb1-52" aria-hidden="true" tabindex="-1"></a>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
181<div class="cell-output cell-output-display">
182<div>
183<div id="ojs-cell-1-1" data-nodetype="declaration">
184
185</div>
186</div>
187</div>
188<div class="cell-output cell-output-display">
189<div>
190<div id="ojs-cell-1-2" data-nodetype="declaration">
191
192</div>
193</div>
194</div>
195</div>
196<div class="cell">
197<div class="sourceCode cell-code hidden" id="cb2" data-startfrom="55" data-source-offset="0"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 54;"><span id="cb2-55"><a href="#cb2-55" aria-hidden="true" tabindex="-1"></a><span class="fu">html</span><span class="vs">`</span></span>
198<span id="cb2-56"><a href="#cb2-56" aria-hidden="true" tabindex="-1"></a><span class="vs">&lt;div&gt;</span></span>
199<span id="cb2-57"><a href="#cb2-57" aria-hidden="true" tabindex="-1"></a><span class="vs">  &lt;div style="width: 300px; padding: 5px; font-weight: 700; position: fixed; display: inline-block; left: 0; right: auto;"&gt;</span><span class="sc">${</span>viewof filterInputs<span class="sc">}</span><span class="vs">&lt;/div&gt;</span></span>
200<span id="cb2-58"><a href="#cb2-58" aria-hidden="true" tabindex="-1"></a><span class="vs">  &lt;div style="width: 250px; padding: 5px; font-weight: 700; position: fixed; display: inline-block; right: auto; right: 0;"&gt;</span><span class="sc">${</span>viewof scenarioInputs<span class="sc">}</span><span class="vs">&lt;/div&gt;</span></span>
201<span id="cb2-59"><a href="#cb2-59" aria-hidden="true" tabindex="-1"></a><span class="vs">&lt;/div&gt;</span></span>
202<span id="cb2-60"><a href="#cb2-60" aria-hidden="true" tabindex="-1"></a><span class="vs">`</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
203<div class="cell-output cell-output-display">
204<div id="ojs-cell-2" data-nodetype="expression">
205
206</div>
207</div>
208</div>
209<div class="cell">
210<div class="sourceCode cell-code hidden" id="cb3" data-startfrom="66" data-source-offset="0"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 65;"><span id="cb3-66"><a href="#cb3-66" aria-hidden="true" tabindex="-1"></a>container <span class="op">=</span> <span class="fu">html</span> <span class="vs">`&lt;div id= "container" style='height: 500px; margin: 40px 0 0 0; padding: 0;' /&gt;`</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
211<div class="cell-output cell-output-display">
212<div id="ojs-cell-3" data-nodetype="declaration">
213
214</div>
215</div>
216</div>
217<div class="cell">
218<div class="sourceCode cell-code hidden" id="cb4" data-startfrom="77" data-source-offset="-56"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 76;"><span id="cb4-77"><a href="#cb4-77" aria-hidden="true" tabindex="-1"></a>d3 <span class="op">=</span> <span class="pp">require</span>(<span class="st">"d3@5"</span>)<span class="op">;</span></span>
219<span id="cb4-78"><a href="#cb4-78" aria-hidden="true" tabindex="-1"></a></span>
220<span id="cb4-79"><a href="#cb4-79" aria-hidden="true" tabindex="-1"></a>muniData <span class="op">=</span> <span class="fu">FileAttachment</span>(<span class="st">"fines_fees_cities_ii.json"</span>)<span class="op">.</span><span class="fu">json</span>()<span class="op">;</span></span>
221<span id="cb4-80"><a href="#cb4-80" aria-hidden="true" tabindex="-1"></a>countyData <span class="op">=</span> <span class="fu">FileAttachment</span>(<span class="st">"fines_fees_counties_ii.json"</span>)<span class="op">.</span><span class="fu">json</span>()<span class="op">;</span></span>
222<span id="cb4-81"><a href="#cb4-81" aria-hidden="true" tabindex="-1"></a></span>
223<span id="cb4-82"><a href="#cb4-82" aria-hidden="true" tabindex="-1"></a>MapboxGeocoder <span class="op">=</span> <span class="pp">require</span>(<span class="st">"[email protected]/dist/mapbox-gl-geocoder.min.js"</span>)<span class="op">;</span></span>
224<span id="cb4-83"><a href="#cb4-83" aria-hidden="true" tabindex="-1"></a>mapboxToken <span class="op">=</span> <span class="st">"pk.eyJ1Ijoiam9yZGFuLXJlYXNvbiIsImEiOiJja21wYzBzeHgwMjV6MnZteDByMDFqM2I0In0.MLbmWpdibeG0GY-vHqxzDg"</span><span class="op">;</span></span>
225<span id="cb4-84"><a href="#cb4-84" aria-hidden="true" tabindex="-1"></a></span>
226<span id="cb4-85"><a href="#cb4-85" aria-hidden="true" tabindex="-1"></a>mapboxgl <span class="op">=</span> {</span>
227<span id="cb4-86"><a href="#cb4-86" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> mbgl <span class="op">=</span> <span class="cf">await</span> <span class="pp">require</span>(<span class="st">"https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js"</span>)<span class="op">;</span></span>
228<span id="cb4-87"><a href="#cb4-87" aria-hidden="true" tabindex="-1"></a>  <span class="cf">if</span> (<span class="op">!</span>mbgl<span class="op">.</span><span class="at">accessToken</span>) {</span>
229<span id="cb4-88"><a href="#cb4-88" aria-hidden="true" tabindex="-1"></a>    mbgl<span class="op">.</span><span class="at">accessToken</span> <span class="op">=</span> mapboxToken<span class="op">;</span></span>
230<span id="cb4-89"><a href="#cb4-89" aria-hidden="true" tabindex="-1"></a>    <span class="kw">const</span> href <span class="op">=</span> <span class="cf">await</span>
230 require<span class="op">.</span><span class="fu">resolve</span>(</span>
231<span id="cb4-90"><a href="#cb4-90" aria-hidden="true" tabindex="-1"></a>      <span class="st">"https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css"</span></span>
232<span id="cb4-91"><a href="#cb4-91" aria-hidden="true" tabindex="-1"></a>    )<span class="op">;</span></span>
233<span id="cb4-92"><a href="#cb4-92" aria-hidden="true" tabindex="-1"></a>    <span class="bu">document</span><span class="op">.</span><span class="at">head</span><span class="op">.</span><span class="fu">appendChild</span>(<span class="fu">html</span><span class="vs">`&lt;link href=</span><span class="sc">${</span>href<span class="sc">}</span><span class="vs"> rel=stylesheet&gt;`</span>)<span class="op">;</span></span>
234<span id="cb4-93"><a href="#cb4-93" aria-hidden="true" tabindex="-1"></a>  }</span>
235<span id="cb4-94"><a href="#cb4-94" aria-hidden="true" tabindex="-1"></a>  <span class="cf">return</span> mbgl<span class="op">;</span></span>
236<span id="cb4-95"><a href="#cb4-95" aria-hidden="true" tabindex="-1"></a>}<span class="op">;</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
237<div class="cell-output cell-output-display">
238<div>
239<div id="ojs-cell-4-1" data-nodetype="declaration">
240
241</div>
242</div>
243</div>
244<div class="cell-output cell-output-display">
245<div>
246<div id="ojs-cell-4-2" data-nodetype="declaration">
247
248</div>
249</div>
250</div>
251<div class="cell-output cell-output-display">
252<div>
253<div id="ojs-cell-4-3" data-nodetype="declaration">
254
255</div>
256</div>
257</div>
258<div class="cell-output cell-output-display">
259<div>
260<div id="ojs-cell-4-4" data-nodetype="declaration">
261
262</div>
263</div>
264</div>
265<div class="cell-output cell-output-display">
266<div>
267<div id="ojs-cell-4-5" data-nodetype="declaration">
268
269</div>
270</div>
271</div>
272<div class="cell-output cell-output-display">
273<div>
274<div id="ojs-cell-4-6" data-nodetype="declaration">
275
276</div>
277</div>
278</div>
279</div>
280<div class="cell">
281<div class="sourceCode cell-code hidden" id="cb5" data-startfrom="102" data-source-offset="-1"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 101;"><span id="cb5-102"><a href="#cb5-102" aria-hidden="true" tabindex="-1"></a><span class="fu">html</span><span class="vs">`&lt;link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' /&gt;`</span><span class="op">;</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
282<div class="cell-output cell-output-display">
283<div>
284<div id="ojs-cell-5-1" data-nodetype="expression">
285
286</div>
287</div>
288</div>
289<div class="sourceCode cell-code hidden" id="cb6" data-startfrom="103" data-source-offset="-150"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 102;"><span id="cb6-103"><a href="#cb6-103" aria-hidden="true" tabindex="-1"></a><span class="fu">html</span><span class="vs">`&lt;link href='https://unpkg.com/[email protected]/dist/mapbox-gl.css' rel='stylesheet' /&gt;`</span><span class="op">;</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
290<div class="cell-output cell-output-display">
291<div>
292<div id="ojs-cell-5-2" data-nodetype="expression">
293
294</div>
295</div>
296</div>
297</div>
298<div class="cell">
299<div class="sourceCode cell-code hidden" id="cb7" data-startfrom="110" data-source-offset="-1"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 109;"><span id="cb7-110"><a href="#cb7-110" aria-hidden="true" tabindex="-1"></a>data <span class="op">=</span> {</span>
300<span id="cb7-111"><a href="#cb7-111" aria-hidden="true" tabindex="-1"></a>  <span class="cf">if</span> (scenarioInputs<span class="op">.</span><span class="at">optradio</span> <span class="op">==</span> <span class="st">'0'</span>) {</span>
301<span id="cb7-112"><a href="#cb7-112" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> muniData</span>
302<span id="cb7-113"><a href="#cb7-113" aria-hidden="true" tabindex="-1"></a>  } <span class="cf">else</span> {</span>
303<span id="cb7-114"><a href="#cb7-114" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> countyData</span>
304<span id="cb7-115"><a href="#cb7-115" aria-hidden="true" tabindex="-1"></a>  }</span>
305<span id="cb7-116"><a href="#cb7-116" aria-hidden="true" tabindex="-1"></a>}<span class="op">;</span></span>
306<span id="cb7-117"><a href="#cb7-117" aria-hidden="true" tabindex="-1"></a></span>
307<span id="cb7-118"><a href="#cb7-118" aria-hidden="true" tabindex="-1"></a></span>
308<span id="cb7-119"><a href="#cb7-119" aria-hidden="true" tabindex="-1"></a>fineFeesMap <span class="op">=</span> {</span>
309<span id="cb7-120"><a href="#cb7-120" aria-hidden="true" tabindex="-1"></a>  </span>
310<span id="cb7-121"><a href="#cb7-121" aria-hidden="true" tabindex="-1"></a>  <span class="kw">let</span> map <span class="op">=</span> <span class="kw">new</span> mapboxgl<span class="op">.</span><span class="fu">Map</span>({</span>
311<span id="cb7-122"><a href="#cb7-122" aria-hidden="true" tabindex="-1"></a>    container<span class="op">,</span></span>
312<span id="cb7-123"><a href="#cb7-123" aria-hidden="true" tabindex="-1"></a>    <span class="co">// projection: 'globe',</span></span>
313<span id="cb7-124"><a href="#cb7-124" aria-hidden="true" tabindex="-1"></a>
313      <span class="dt">center</span><span class="op">:</span> [</span>
314<span id="cb7-125"><a href="#cb7-125" aria-hidden="true" tabindex="-1"></a>        <span class="op">-</span><span class="dv">98</span><span class="op">,</span></span>
315<span id="cb7-126"><a href="#cb7-126" aria-hidden="true" tabindex="-1"></a>        <span class="dv">38</span></span>
316<span id="cb7-127"><a href="#cb7-127" aria-hidden="true" tabindex="-1"></a>      ]<span class="op">,</span></span>
317<span id="cb7-128"><a href="#cb7-128" aria-hidden="true" tabindex="-1"></a>      <span class="dt">zoom</span><span class="op">:</span> <span class="fl">3.3</span><span class="op">,</span></span>
318<span id="cb7-129"><a href="#cb7-129" aria-hidden="true" tabindex="-1"></a>      <span class="dt">style</span><span class="op">:</span> <span class="st">'mapbox://styles/jordan-reason/cld4wfcml002301nw869edr1g'</span><span class="op">,</span></span>
319<span id="cb7-130"><a href="#cb7-130" aria-hidden="true" tabindex="-1"></a>    })<span class="op">;</span></span>
320<span id="cb7-131"><a href="#cb7-131" aria-hidden="true" tabindex="-1"></a></span>
321<span id="cb7-132"><a href="#cb7-132" aria-hidden="true" tabindex="-1"></a>    <span class="co">// Configure geocoder</span></span>
322<span id="cb7-133"><a href="#cb7-133" aria-hidden="true" tabindex="-1"></a>  <span class="kw">let</span> geocoder <span class="op">=</span> <span class="kw">new</span> <span class="fu">MapboxGeocoder</span>({</span>
323<span id="cb7-134"><a href="#cb7-134" aria-hidden="true" tabindex="-1"></a>    <span class="dt">accessToken</span><span class="op">:</span> mapboxgl<span class="op">.</span><span class="at">accessToken</span><span class="op">,</span></span>
324<span id="cb7-135"><a href="#cb7-135" aria-hidden="true" tabindex="-1"></a>    <span class="dt">country</span><span class="op">:</span> <span class="st">'us'</span><span class="op">,</span></span>
325<span id="cb7-136"><a href="#cb7-136" aria-hidden="true" tabindex="-1"></a>    <span class="co">// bbox: [-125.35400390624999, 31.970803930433096, -113.26904296874999, 42.53689200787315]</span></span>
326<span id="cb7-137"><a href="#cb7-137" aria-hidden="true" tabindex="-1"></a>  })<span class="op">;</span></span>
327<span id="cb7-138"><a href="#cb7-138" aria-hidden="true" tabindex="-1"></a>  map<span class="op">.</span><span class="fu">addControl</span>(geocoder<span class="op">,</span> <span class="st">"top-left"</span>)<span class="op">;</span></span>
328<span id="cb7-139"><a href="#cb7-139" aria-hidden="true" tabindex="-1"></a></span>
329<span id="cb7-140"><a href="#cb7-140" aria-hidden="true" tabindex="-1"></a>    <span class="co">// Configure nav</span></span>
330<span id="cb7-141"><a href="#cb7-141" aria-hidden="true" tabindex="-1"></a>  <span class="kw">let</span> nav <span class="op">=</span> <span class="kw">new</span> mapboxgl<span class="op">.</span><span class="fu">NavigationControl</span>()<span class="op">;</span></span>
331<span id="cb7-142"><a href="#cb7-142" aria-hidden="true" tabindex="-1"></a>  map<span class="op">.</span><span class="fu">addControl</span>(nav<span class="op">,</span> <span class="st">"top-right"</span>)<span class="op">;</span></span>
332<span id="cb7-143"><a href="#cb7-143" aria-hidden="true" tabindex="-1"></a>    </span>
333<span id="cb7-144"><a href="#cb7-144" aria-hidden="true" tabindex="-1"></a><span class="co">//   yield new Promise(resolve =&gt; {</span></span>
334<span id="cb7-145"><a href="#cb7-145" aria-hidden="true" tabindex="-1"></a>      map<span class="op">.</span><span class="fu">on</span>(<span class="st">'load'</span><span class="op">,</span> () <span class="kw">=&gt;</span> {</span>
335<span id="cb7-146"><a href="#cb7-146" aria-hidden="true" tabindex="-1"></a></span>
336<span id="cb7-147"><a href="#cb7-147" aria-hidden="true" tabindex="-1"></a>          map<span class="op">.</span><span class="fu">addSource</span>(<span class="st">"finesfees"</span><span class="op">,</span> {</span>
337<span id="cb7-148"><a href="#cb7-148" aria-hidden="true" tabindex="-1"></a>            <span class="dt">type</span><span class="op">:</span> <span class="st">"geojson"</span><span class="op">,</span></span>
338<span id="cb7-149"><a href="#cb7-149" aria-hidden="true" tabindex="-1"></a>
338            <span class="dt">data</span><span class="op">:</span> data<span class="op">,</span></span>
339<span id="cb7-150"><a href="#cb7-150" aria-hidden="true" tabindex="-1"></a>          })</span>
340<span id="cb7-151"><a href="#cb7-151" aria-hidden="true" tabindex="-1"></a></span>
341<span id="cb7-152"><a href="#cb7-152" aria-hidden="true" tabindex="-1"></a>          map<span class="op">.</span><span class="fu">addLayer</span>({</span>
342<span id="cb7-153"><a href="#cb7-153" aria-hidden="true" tabindex="-1"></a>            <span class="dt">id</span><span class="op">:</span> <span class="st">'test'</span><span class="op">,</span></span>
343<span id="cb7-154"><a href="#cb7-154" aria-hidden="true" tabindex="-1"></a>            <span class="dt">type</span><span class="op">:</span> <span class="st">'circle'</span><span class="op">,</span></span>
344<span id="cb7-155"><a href="#cb7-155" aria-hidden="true" tabindex="-1"></a>            <span class="dt">paint</span><span class="op">:</span> {</span>
345<span id="cb7-156"><a href="#cb7-156" aria-hidden="true" tabindex="-1"></a>              <span class="st">'circle-radius'</span><span class="op">:</span> {</span>
346<span id="cb7-157"><a href="#cb7-157" aria-hidden="true" tabindex="-1"></a>                <span class="st">'base'</span><span class="op">:</span> <span class="fl">1.9</span><span class="op">,</span></span>
347<span id="cb7-158"><a href="#cb7-158" aria-hidden="true" tabindex="-1"></a>                <span class="st">'stops'</span><span class="op">:</span> [</span>
348<span id="cb7-159"><a href="#cb7-159" aria-hidden="true" tabindex="-1"></a>                  [<span class="dv">6</span><span class="op">,</span> <span class="dv">3</span>]<span class="op">,</span></span>
349<span id="cb7-160"><a href="#cb7-160" aria-hidden="true" tabindex="-1"></a>                  [<span class="dv">14</span><span class="op">,</span> <span class="dv">100</span>]</span>
350<span id="cb7-161"><a href="#cb7-161" aria-hidden="true" tabindex="-1"></a>                ]</span>
351<span id="cb7-162"><a href="#cb7-162" aria-hidden="true" tabindex="-1"></a>              }<span class="op">,</span></span>
352<span id="cb7-163"><a href="#cb7-163" aria-hidden="true" tabindex="-1"></a>                <span class="st">"circle-opacity"</span><span class="op">:</span> <span class="fl">0.9</span><span class="op">,</span></span>
353<span id="cb7-164"><a href="#cb7-164" aria-hidden="true" tabindex="-1"></a>                <span class="st">"circle-stroke-width"</span><span class="op">:</span> <span class="fl">0.25</span><span class="op">,</span></span>
354<span id="cb7-165"><a href="#cb7-165" aria-hidden="true" tabindex="-1"></a>                <span class="st">"circle-stroke-color"</span><span class="op">:</span> <span class="st">"#333"</span><span class="op">,</span></span>
355<span id="cb7-166"><a href="#cb7-166" aria-hidden="true" tabindex="-1"></a>              <span class="st">'circle-color'</span><span class="op">:</span> {</span>
356<span id="cb7-167"><a href="#cb7-167" aria-hidden="true" tabindex="-1"></a>        <span class="dt">property</span><span class="op">:</span> <span class="st">'PercentGenRev'</span><span class="op">,</span></span>
357<span id="cb7-168"><a href="#cb7-168" aria-hidden="true" tabindex="-1"></a>        <span class="dt">stops</span><span class="op">:</span> [</span>
358<span id="cb7-169"><a href="#cb7-169" aria-hidden="true" tabindex="-1"></a>          [<span class="dv">0</span><span class="op">,</span> <span class="st">'#ed1107'</span>]<span class="op">,</span></span>
359<span id="cb7-170"><a href="#cb7-170" aria-hidden="true" tabindex="-1"></a>          [<span class="fl">0.8</span><span class="op">,</span> <span class="st">'#ed1107'</span>]</span>
360<span id="cb7-171"><a href="#cb7-171" aria-hidden="true" tabindex="-1"></a>        ]</span>
361<span id="cb7-172"><a href="#cb7-172" aria-hidden="true" tabindex="-1"></a>      }<span class="op">,</span></span>
362<span id="cb7-173"><a href="#cb7-173" aria-hidden="true" tabindex="-1"></a>            }<span class="op">,</span></span>
363<span id="cb7-174"><a href="#cb7-174" aria-hidden="true" tabindex="-1"></a>
363            <span class="dt">filter</span><span class="op">:</span> [<span class="st">'&gt;'</span><span class="op">,</span> <span class="st">'PercentGenRev'</span><span class="op">,</span> <span class="op">+</span>filterInputs<span class="op">.</span><span class="at">optradio</span>]<span class="op">,</span></span>
364<span id="cb7-175"><a href="#cb7-175" aria-hidden="true" tabindex="-1"></a>             <span class="dt">source</span><span class="op">:</span> <span class="st">"finesfees"</span><span class="op">,</span></span>
365<span id="cb7-176"><a href="#cb7-176" aria-hidden="true" tabindex="-1"></a>        })</span>
366<span id="cb7-177"><a href="#cb7-177" aria-hidden="true" tabindex="-1"></a></span>
367<span id="cb7-178"><a href="#cb7-178" aria-hidden="true" tabindex="-1"></a>        <span class="co">// map.setFilter('test', ['&gt;', 'PercentGenRev', y])</span></span>
368<span id="cb7-179"><a href="#cb7-179" aria-hidden="true" tabindex="-1"></a></span>
369<span id="cb7-180"><a href="#cb7-180" aria-hidden="true" tabindex="-1"></a>        map<span class="op">.</span><span class="at">popup</span> <span class="op">=</span> <span class="kw">new</span> mapboxgl<span class="op">.</span><span class="fu">Popup</span>({</span>
370<span id="cb7-181"><a href="#cb7-181" aria-hidden="true" tabindex="-1"></a>            <span class="dt">closeButton</span><span class="op">:</span> <span class="kw">false</span><span class="op">,</span></span>
371<span id="cb7-182"><a href="#cb7-182" aria-hidden="true" tabindex="-1"></a>            <span class="dt">closeOnClick</span><span class="op">:</span> <span class="kw">false</span><span class="op">,</span></span>
372<span id="cb7-183"><a href="#cb7-183" aria-hidden="true" tabindex="-1"></a>        })</span>
373<span id="cb7-184"><a href="#cb7-184" aria-hidden="true" tabindex="-1"></a>        map<span class="op">.</span><span class="fu">on</span>(<span class="st">'mouseenter'</span><span class="op">,</span> <span class="st">'test'</span><span class="op">,</span> <span class="kw">function</span>(e) {</span>
374<span id="cb7-185"><a href="#cb7-185" aria-hidden="true" tabindex="-1"></a>          map<span class="op">.</span><span class="fu">getCanvas</span>()<span class="op">.</span><span class="at">style</span><span class="op">.</span><span class="at">cursor</span> <span class="op">=</span> <span class="st">'pointer'</span></span>
375<span id="cb7-186"><a href="#cb7-186" aria-hidden="true" tabindex="-1"></a>          <span class="kw">var</span> coordinates <span class="op">=</span> e<span class="op">.</span><span class="at">features</span>[<span class="dv">0</span>]<span class="op">.</span><span class="at">geometry</span><span class="op">.</span><span class="at">coordinates</span><span class="op">.</span><span class="fu">slice</span>()</span>
376<span id="cb7-187"><a href="#cb7-187" aria-hidden="true" tabindex="-1"></a>          <span class="kw">const</span> { Name<span class="op">,</span> State<span class="op">,</span> Population<span class="op">,</span> PercentGenRev<span class="op">,</span> GeneralRevenue<span class="op">,</span> FinesForfeits } <span class="op">=</span> e<span class="op">.</span><span class="at">features</span>[<span class="dv">0</span>]<span class="op">.</span><span class="at">properties</span></span>
377<span id="cb7-188"><a href="#cb7-188" aria-hidden="true" tabindex="-1"></a>          <span class="cf">while</span> (<span class="bu">Math</span><span class="op">.</span><span class="fu">abs</span>(e<span class="op">.</span><span class="at">lngLat</span><span class="op">.</span><span class="at">lng</span> <span class="op">-</span> coordinates[<span class="dv">0</span>]) <span class="op">&gt;</span> <span class="dv">180</span>) {</span>
378<span id="cb7-189"><a href="#cb7-189" aria-hidden="true" tabindex="-1"></a>            coordinates[<span class="dv">0</span>] <span class="op">+=</span> e<span class="op">.</span><span class="at">lngLat</span><span class="op">.</span><span class="at">lng</span> <span class="op">&gt;</span> coordinates[<span class="dv">0</span>] <span class="op">?</span> <span class="dv">360</span> <span class="op">:</span> <span class="op">-</span><span class="dv">360</span></span>
379<span id="cb7-190"><a href="#cb7-190" aria-hidden="true" tabindex="-1"></a>          }</span>
380<span id="cb7-191"><a href="#cb7-191" aria-hidden="true" tabindex="-1"></a>
380          <span class="kw">var</span> htmlContent <span class="op">=</span> <span class="vs">`</span></span>
381<span id="cb7-192"><a href="#cb7-192" aria-hidden="true" tabindex="-1"></a><span class="vs">          &lt;span style="font-family: 'Open Sans', sans-serif; font-weight: 500;"&gt;</span></span>
382<span id="cb7-193"><a href="#cb7-193" aria-hidden="true" tabindex="-1"></a><span class="vs">            &lt;span style="font-size: 18px; font-weight: 700;"&gt;&lt;span class="capitalize"&gt;</span><span class="sc">${</span>Name<span class="sc">}</span><span class="vs">&lt;/span&gt;&lt;/span&gt;</span></span>
383<span id="cb7-194"><a href="#cb7-194" aria-hidden="true" tabindex="-1"></a><span class="vs">            &lt;hr style='margin:2px; padding:0; border-top: 3px solid #d3d3d3;'&gt;</span></span>
384<span id="cb7-195"><a href="#cb7-195" aria-hidden="true" tabindex="-1"></a><span class="vs">            Fines &amp; Forfeits: </span><span class="sc">${</span>d3<span class="op">.</span><span class="fu">format</span>(<span class="st">"$,.0f"</span>)(FinesForfeits <span class="op">*</span> <span class="fl">1e3</span>)<span class="sc">}</span><span class="vs">&lt;br&gt;</span></span>
385<span id="cb7-196"><a href="#cb7-196" aria-hidden="true" tabindex="-1"></a><span class="vs">            &lt;hr style='margin:1px; padding:0; border-top: 1px solid #d3d3d3;'&gt;</span></span>
386<span id="cb7-197"><a href="#cb7-197" aria-hidden="true" tabindex="-1"></a><span class="vs">            % of Revenue: </span><span class="sc">${</span>d3<span class="op">.</span><span class="fu">format</span>(<span class="st">".1%"</span>)(FinesForfeits <span class="op">/</span> GeneralRevenue)<span class="sc">}</span><span class="vs">&lt;br&gt;</span></span>
387<span id="cb7-198"><a href="#cb7-198" aria-hidden="true" tabindex="-1"></a><span class="vs">            &lt;hr style='margin:1px; padding:0; border-top: 1px solid #d3d3d3;'&gt;</span></span>
388<span id="cb7-199"><a href="#cb7-199" aria-hidden="true" tabindex="-1"></a><span class="vs">            General Revenue: </span><span class="sc">${</span>d3<span class="op">.</span><span class="fu">format</span>(<span class="st">"$,.0f"</span>)(GeneralRevenue <span class="op">*</span> <span class="fl">1e3</span>)<span class="sc">}</span><span class="vs">&lt;br&gt;</span></span>
389<span id="cb7-200"><a href="#cb7-200" aria-hidden="true" tabindex="-1"></a><span class="vs">            &lt;hr style='margin:1px; padding:0; border-top: 1px solid #d3d3d3;'&gt;</span></span>
390<span id="cb7-201"><a href="#cb7-201" aria-hidden="true" tabindex="-1"></a><span class="vs">            Per Capita: </span><span class="sc">${</span>d3<span class="op">.</span><span class="fu">format</span>(<span class="st">"$,.0f"</span>)((FinesForfeits <span class="op">*</span> <span class="fl">1e3</span>)<span class="op">/</span>Population)<span class="sc">}</span></span>
391<span id="cb7-202"><a href="#cb7-202" aria-hidden="true" tabindex="-1"></a><span class="vs">        &lt;/span&gt;</span></span>
392<span id="cb7-203"><a href="#cb7-203" aria-hidden="true" tabindex="-1"></a><span class="vs">          `</span></span>
393<span id="cb7-204"><a href="#cb7-204" aria-hidden="true" tabindex="-1"></a>          map<span class="op">.</span><span class="at">popup</span><span class="op">.</span><span class="fu">setLngLat</span>(coordinates)</span>
394<span id="cb7-205"><a href="#cb7-205" aria-hidden="true" tabindex="-1"></a>          <span class="op">.</span><span class="fu">setHTML</span>(htmlContent)</span>
395<span id="cb7-206"><a href="#cb7-206" aria-hidden="true" tabindex="-1"></a>          <span class="op">.</span><span class="fu">addTo</span>(map)</span>
396<span id="cb7-207"><a href="#cb7-207" aria-hidden="true" tabindex="-1"></a>        })</span>
397<span id="cb7-208"><a href="#cb7-208" aria-hidden="true" tabindex="-1"></a>      })</span>
398<span id="cb7-209"><a href="#cb7-209" aria-hidden="true" tabindex="-1"></a>       map<span class="op">.</span><span class="fu">on</span>(<span class="st">'mouseleave'</span><span class="op">,</span><span class="st">'test'</span><span class="op">,</span> <span class="kw">function</span>() {</span>
399<span id="cb7-210"><a href="#cb7-210" aria-hidden="true" tabindex="-1"></a>         map<span class="op">.</span><span class="fu">getCanvas</span>()<span class="op">.</span><span class="at">style</span><span class="op">.</span><span class="at">cursor</span> <span class="op">=</span> <span class="st">''</span></span>
400<span id="cb7-211"><a href="#cb7-211" aria-hidden="true" tabindex="-1"></a>         map<span class="op">.</span><span class="at">popup</span><span class="op">.</span><span class="fu">remove</span>()</span>
401<span id="cb7-212"><a href="#cb7-212" aria-hidden="true" tabindex="-1"></a>       })</span>
402<span id="cb7-213"><a href="#cb7-213" aria-hidden="true" tabindex="-1"></a><span class="co">//         return resolve(map)</span></span>
403<span id="cb7-214"><a href="#cb7-214" aria-hidden="true" tabindex="-1"></a><span class="cf">return</span> map<span class="op">;</span></span>
404<span id="cb7-215"><a href="#cb7-215" aria-hidden="true" tabindex="-1"></a><span class="co">//   })</span></span>
405<span id="cb7-216"><a href="#cb7-216" aria-hidden="true" tabindex="-1"></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
406<div class="cell-output cell-output-display">
407<div>
408<div id="ojs-cell-6-1" data-nodetype="declaration">
409
410</div>
411</div>
412</div>
413<div class="cell-output cell-output-display">
414<div>
415<div id="ojs-cell-6-2" data-nodetype="declaration">
416
417</div>
418</div>
419</div>
420</div>
421<div class="cell">
422<div class="sourceCode cell-code hidden" id="cb8" data-startfrom="224" data-source-offset="-2"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 223;"><span id="cb8-224"><a href="#cb8-224" aria-hidden="true" tabindex="-1"></a>scenario1ButtonColor <span class="op">=</span> {</span>
423<span id="cb8-225"><a href="#cb8-225" aria-hidden="true" tabindex="-1"></a>  <span class="cf">if</span>
423 (scenarioInputs<span class="op">.</span><span class="at">optradio</span> <span class="op">==</span> <span class="st">'0'</span>) {</span>
424<span id="cb8-226"><a href="#cb8-226" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#d3d3d3"</span></span>
425<span id="cb8-227"><a href="#cb8-227" aria-hidden="true" tabindex="-1"></a>  } <span class="cf">else</span> {</span>
426<span id="cb8-228"><a href="#cb8-228" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#fff"</span></span>
427<span id="cb8-229"><a href="#cb8-229" aria-hidden="true" tabindex="-1"></a>  }</span>
428<span id="cb8-230"><a href="#cb8-230" aria-hidden="true" tabindex="-1"></a>}<span class="op">;</span></span>
429<span id="cb8-231"><a href="#cb8-231" aria-hidden="true" tabindex="-1"></a></span>
430<span id="cb8-232"><a href="#cb8-232" aria-hidden="true" tabindex="-1"></a>scenario2ButtonColor <span class="op">=</span> {</span>
431<span id="cb8-233"><a href="#cb8-233" aria-hidden="true" tabindex="-1"></a>  <span class="cf">if</span> (scenarioInputs<span class="op">.</span><span class="at">optradio</span> <span class="op">==</span> <span class="st">'1'</span>) {</span>
432<span id="cb8-234"><a href="#cb8-234" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#d3d3d3"</span></span>
433<span id="cb8-235"><a href="#cb8-235" aria-hidden="true" tabindex="-1"></a>  } <span class="cf">else</span> {</span>
434<span id="cb8-236"><a href="#cb8-236" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#fff"</span></span>
435<span id="cb8-237"><a href="#cb8-237" aria-hidden="true" tabindex="-1"></a>  }</span>
436<span id="cb8-238"><a href="#cb8-238" aria-hidden="true" tabindex="-1"></a>}<span class="op">;</span></span>
437<span id="cb8-239"><a href="#cb8-239" aria-hidden="true" tabindex="-1"></a></span>
438<span id="cb8-240"><a href="#cb8-240" aria-hidden="true" tabindex="-1"></a></span>
439<span id="cb8-241"><a href="#cb8-241" aria-hidden="true" tabindex="-1"></a>filter1ButtonColor <span class="op">=</span> {</span>
440<span id="cb8-242"><a href="#cb8-242" aria-hidden="true" tabindex="-1"></a>  <span class="cf">if</span> (filterInputs<span class="op">.</span><span class="at">optradio</span> <span class="op">==</span> <span class="st">'0'</span>) {</span>
441<span id="cb8-243"><a href="#cb8-243" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#d3d3d3"</span></span>
442<span id="cb8-244"><a href="#cb8-244" aria-hidden="true" tabindex="-1"></a>  } <span class="cf">else</span> {</span>
443<span id="cb8-245"><a href="#cb8-245" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#fff"</span></span>
444<span id="cb8-246"><a href="#cb8-246" aria-hidden="true" tabindex="-1"></a>  }</span>
445<span id="cb8-247"><a href="#cb8-247" aria-hidden="true" tabindex="-1"></a>}<span class="op">;</span></span>
446<span id="cb8-248"><a href="#cb8-248" aria-hidden="true" tabindex="-1"></a></span>
447<span id="cb8-249"><a href="#cb8-249" aria-hidden="true" tabindex="-1"></a>filter2ButtonColor <span class="op">=</span> {</span>
448<span id="cb8-250"><a href="#cb8-250" aria-hidden="true" tabindex="-1"></a>  <span class="cf">if</span> (filterInputs<span class="op">.</span><span class="at">optradio</span> <span class="op">==</span> <span class="st">'0.05'</span>) {</span>
449<span id="cb8-251"><a href="#cb8-251" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#d3d3d3"</span></span>
450<span id="cb8-252"><a href="#cb8-252" aria-hidden="true" tabindex="-1"></a>  } <span class="cf">else</span> {</span>
451<span id="cb8-253"><a href="#cb8-253" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#fff"</span></span>
452<span id="cb8-254"><a href="#cb8-254" aria-hidden="true" tabindex="-1"></a>  }</span>
453<span id="cb8-255"><a href="#cb8-255" aria-hidden="true" tabindex="-1"></a>}<span class="op">;</span></span>
454<span id="cb8-256"><a href="#cb8-256" aria-hidden="true" tabindex="-1"></a></span>
455<span id="cb8-257"><a href="#cb8-257" aria-hidden="true" tabindex="-1"></a>filter3ButtonColor <span class="op">=</span> {</span>
456<span id="cb8-258"><a href="#cb8-258" aria-hidden="true" tabindex="-1"></a>  <span class="cf">if</span> (filterInputs<span class="op">.</span><span class="at">optradio</span> <span class="op">==</span> <span class="st">'0.1'</span>) {</span>
457<span id="cb8-259"><a href="#cb8-259" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#d3d3d3"</span></span>
458<span id="cb8-260"><a href="#cb8-260" aria-hidden="true" tabindex="-1"></a>  } <span class="cf">else</span> {</span>
459<span id="cb8-261"><a href="#cb8-261" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#fff"</span></span>
460<span id="cb8-262"><a href="#cb8-262" aria-hidden="true" tabindex="-1"></a>  }</span>
461<span id="cb8-263"><a href="#cb8-263" aria-hidden="true" tabindex="-1"></a>}<span class="op">;</span></span>
462<span id="cb8-264"><a href="#cb8-264" aria-hidden="true" tabindex="-1"></a></span>
463<span id="cb8-265"><a href="#cb8-265" aria-hidden="true" tabindex="-1"></a>filter4ButtonColor <span class="op">=</span> {</span>
464<span id="cb8-266"><a href="#cb8-266" aria-hidden="true" tabindex="-1"></a>  <span class="cf">if</span> (filterInputs<span class="op">.</span><span class="at">optradio</span> <span class="op">==</span> <span class="st">'0.15'</span>) {</span>
465<span id="cb8-267"><a href="#cb8-267" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#d3d3d3"</span></span>
466<span id="cb8-268"><a href="#cb8-268" aria-hidden="true" tabindex="-1"></a>  } <span class="cf">else</span> {</span>
467<span id="cb8-269"><a href="#cb8-269" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#fff"</span></span>
468<span id="cb8-270"><a href="#cb8-270" aria-hidden="true" tabindex="-1"></a>  }</span>
469<span id="cb8-271"><a href="#cb8-271" aria-hidden="true" tabindex="-1"></a>}<span class="op">;</span></span>
470<span id="cb8-272"><a href="#cb8-272" aria-hidden="true" tabindex="-1"></a></span>
471<span id="cb8-273"><a href="#cb8-273" aria-hidden="true" tabindex="-1"></a>filter5ButtonColor <span class="op">=</span> {</span>
472<span id="cb8-274"><a href="#cb8-274" aria-hidden="true" tabindex="-1"></a>  <span class="cf">if</span> (filterInputs<span class="op">.</span><span class="at">optradio</span> <span class="op">==</span> <span class="st">'0.25'</span>) {</span>
473<span id="cb8-275"><a href="#cb8-275" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#d3d3d3"</span></span>
474<span id="cb8-276"><a href="#cb8-276" aria-hidden="true" tabindex="-1"></a>  } <span class="cf">else</span> {</span>
475<span id="cb8-277"><a href="#cb8-277" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#fff"</span></span>
476<span id="cb8-278"><a href="#cb8-278" aria-hidden="true" tabindex="-1"></a>  }</span>
477<span id="cb8-279"><a href="#cb8-279" aria-hidden="true" tabindex="-1"></a>}<span class="op">;</span></span>
478<span id="cb8-280"><a href="#cb8-280" aria-hidden="true" tabindex="-1"></a></span>
479<span id="cb8-281"><a href="#cb8-281" aria-hidden="true" tabindex="-1"></a>filter6ButtonColor <span class="op">=</span> {</span>
480<span id="cb8-282"><a href="#cb8-282" aria-hidden="true" tabindex="-1"></a>  <span class="cf">if</span> (filterInputs<span class="op">.</span><span class="at">optradio</span> <span class="op">==</span> <span class="st">'0.5'</span>) {</span>
481<span id="cb8-283"><a href="#cb8-283" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#d3d3d3"</span></span>
482<span id="cb8-284"><a href="#cb8-284" aria-hidden="true" tabindex="-1"></a>  } <span class="cf">else</span> {</span>
483<span id="cb8-285"><a href="#cb8-285" aria-hidden="true" tabindex="-1"></a>    <span class="cf">return</span> <span class="st">"#fff"</span></span>
484<span id="cb8-286"><a href="#cb8-286" aria-hidden="true" tabindex="-1"></a>  }</span>
485<span id="cb8-287"><a href="#cb8-287" aria-hidden="true" tabindex="-1"></a>}<span class="op">;</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
486<div class="cell-output cell-output-display">
487<div>
488<div id="ojs-cell-7-1" data-nodetype="declaration">
489
490</div>
491</div>
492</div>
493<div class="cell-output cell-output-display">
494<div>
495<div id="ojs-cell-7-2" data-nodetype="declaration">
496
497</div>
498</div>
499</div>
500<div class="cell-output cell-output-display">
501<div>
502<div id="ojs-cell-7-3" data-nodetype="declaration">
503
504</div>
505</div>
506</div>
507<div class="cell-output cell-output-display">
508<div>
509<div id="ojs-cell-7-4" data-nodetype="declaration">
510
511</div>
512</div>
513</div>
514<div class="cell-output cell-output-display">
515<div>
516<div id="ojs-cell-7-5" data-nodetype="declaration">
517
518</div>
519</div>
520</div>
521<div class="cell-output cell-output-display">
522<div>
523<div id="ojs-cell-7-6" data-nodetype="declaration">
524
525</div>
526</div>
527</div>
528<div class="cell-output cell-output-display">
529<div>
530<div id="ojs-cell-7-7" data-nodetype="declaration">
531
532</div>
533</div>
534</div>
535<div class="cell-output cell-output-display">
536<div>
537<div id="ojs-cell-7-8" data-nodetype="declaration">
538
539</div>
540</div>
541</div>
542</div>
543<div class="cell">
544<div class="sourceCode cell-code hidden" id="cb9" data-startfrom="293" data-source-offset="0"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 292;"><span id="cb9-293"><a href="#cb9-293" aria-hidden="true" tabindex="-1"></a><span class="fu">html</span><span class="vs">`</span></span>
545<span id="cb9-294"><a href="#cb9-294" aria-hidden="true" tabindex="-1"></a><span class="vs">&lt;style&gt;</span></span>
546<span id="cb9-295"><a href="#cb9-295" aria-hidden="true" tabindex="-1"></a></span>
547<span id="cb9-296"><a href="#cb9-296" aria-hidden="true" tabindex="-1"></a><span class="vs">#first-radio-button,</span></span>
548<span id="cb9-297"><a href="#cb9-297" aria-hidden="true" tabindex="-1"></a><span class="vs">#second-radio-button,</span></span>
549<span id="cb9-298"><a href="#cb9-298" aria-hidden="true" tabindex="-1"></a><span class="vs">#first-filter-button,</span></span>
550<span id="cb9-299"><a href="#cb9-299" aria-hidden="true" tabindex="-1"></a><span class="vs">#second-filter-button,</span></span>
551<span id="cb9-300"><a href="#cb9-300" aria-hidden="true" tabindex="-1"></a><span class="vs">#third-filter-button,</span></span>
552<span id="cb9-301"><a href="#cb9-301" aria-hidden="true" tabindex="-1"></a><span class="vs">#fourth-filter-button,</span></span>
553<span id="cb9-302"><a href="#cb9-302" aria-hidden="true" tabindex="-1"></a><span class="vs">#fifth-filter-button,</span></span>
554<span id="cb9-303"><a href="#cb9-303" aria-hidden="true" tabindex="-1"></a><span class="vs">#sixth-filter-button {</span></span>
555<span id="cb9-304"><a href="#cb9-304" aria-hidden="true" tabindex="-1"></a><span class="vs">  display: none;</span></span>
556<span id="cb9-305"><a href="#cb9-305" aria-hidden="true" tabindex="-1"></a><span class="vs">}</span></span>
557<span id="cb9-306"><a href="#cb9-306" aria-hidden="true" tabindex="-1"></a></span>
558<span id="cb9-307"><a href="#cb9-307" aria-hidden="true" tabindex="-1"></a><span class="vs">.first-radio-button {</span></span>
559<span id="cb9-308"><a href="#cb9-308" aria-hidden="true" tabindex="-1"></a><span class="vs">    background-color: </span><span class="sc">${</span>scenario1ButtonColor<span class="sc">}</span><span class="vs">;</span></span>
560<span id="cb9-309"><a href="#cb9-309" aria-hidden="true" tabindex="-1"></a><span class="vs">  border-radius: 5px 0 0 5px;</span></span>
561<span id="cb9-310"><a href="#cb9-310" aria-hidden="true" tabindex="-1"></a><span class="vs">  border: 1px solid #000;</span></span>
562<span id="cb9-311"><a href="#cb9-311" aria-hidden="true" tabindex="-1"></a><span class="vs">  padding: 0 5px 0 5px;</span></span>
563<span id="cb9-312"><a href="#cb9-312" aria-hidden="true" tabindex="-1"></a><span class="vs">}</span></span>
564<span id="cb9-313"><a href="#cb9-313" aria-hidden="true" tabindex="-1"></a></span>
565<span id="cb9-314"><a href="#cb9-314" aria-hidden="true" tabindex="-1"></a><span class="vs">.second-radio-button {</span></span>
566<span id="cb9-315"><a href="#cb9-315" aria-hidden="true" tabindex="-1"></a><span class="vs">    background-color: </span><span class="sc">${</span>scenario2ButtonColor<span class="sc">}</span><span class="vs">;</span></span>
567<span id="cb9-316"><a href="#cb9-316" aria-hidden="true" tabindex="-1"></a><span class="vs">  border-radius: 0 5px 5px 0;</span></span>
568<span id="cb9-317"><a href="#cb9-317" aria-hidden="true" tabindex="-1"></a><span class="vs">  border: 1px solid #000;</span></span>
569<span id="cb9-318"><a href="#cb9-318" aria-hidden="true" tabindex="-1"></a><span class="vs">  padding: 0 5px 0 5px;</span></span>
570<span id="cb9-319"><a href="#cb9-319" aria-hidden="true" tabindex="-1"></a><span class="vs">}</span></span>
571<span id="cb9-320"><a href="#cb9-320" aria-hidden="true" tabindex="-1"></a></span>
572<span id="cb9-321"><a href="#cb9-321" aria-hidden="true" tabindex="-1"></a><span class="vs">.first-filter-button {</span></span>
573<span id="cb9-322"><a href="#cb9-322" aria-hidden="true" tabindex="-1"></a><span class="vs">  background-color: </span><span class="sc">${</span>filter1ButtonColor<span class="sc">}</span><span class="vs">;</span></span>
574<span id="cb9-323"><a href="#cb9-323" aria-hidden="true" tabindex="-1"></a><span class="vs">  border-radius: 5px 0 0 5px;</span></span>
575<span id="cb9-324"><a href="#cb9-324" aria-hidden="true" tabindex="-1"></a><span class="vs">  border: 1px solid #000;</span></span>
576<span id="cb9-325"><a href="#cb9-325" aria-hidden="true" tabindex="-1"></a><span class="vs">  padding: 0 5px 0 5px;</span></span>
577<span id="cb9-326"><a href="#cb9-326" aria-hidden="true" tabindex="-1"></a><span class="vs">}</span></span>
578<span id="cb9-327"><a href="#cb9-327" aria-hidden="true" tabindex="-1"></a></span>
579<span id="cb9-328"><a href="#cb9-328" aria-hidden="true" tabindex="-1"></a><span class="vs">.second-filter-button {</span></span>
580<span id="cb9-329"><a href="#cb9-329" aria-hidden="true" tabindex="-1"></a><span class="vs">  background-color: </span><span class="sc">${</span>filter2ButtonColor<span class="sc">}</span><span class="vs">;</span></span>
581<span id="cb9-330"><a href="#cb9-330" aria-hidden="true" tabindex="-1"></a><span class="vs">  border-radius: 5px 0 0 5px;</span></span>
582<span id="cb9-331"><a href="#cb9-331" aria-hidden="true" tabindex="-1"></a><span class="vs">  border: 1px solid #000;</span></span>
583<span id="cb9-332"><a href="#cb9-332" aria-hidden="true" tabindex="-1"></a><span class="vs">  padding: 0 5px 0 5px;</span></span>
584<span id="cb9-333"><a href="#cb9-333" aria-hidden="true" tabindex="-1"></a><span class="vs">}</span></span>
585<span id="cb9-334"><a href="#cb9-334" aria-hidden="true" tabindex="-1"></a></span>
586<span id="cb9-335"><a href="#cb9-335" aria-hidden="true" tabindex="-1"></a><span class="vs">.third-filter-button {</span></span>
587<span id="cb9-336"><a href="#cb9-336" aria-hidden="true" tabindex="-1"></a><span class="vs">  background-color: </span><span class="sc">${</span>filter3ButtonColor<span class="sc">}</span><span class="vs">;</span></span>
588<span id="cb9-337"><a href="#cb9-337" aria-hidden="true" tabindex="-1"></a><span class="vs">  border-radius: 0;</span></span>
589<span id="cb9-338"><a href="#cb9-338" aria-hidden="true" tabindex="-1"></a><span class="vs">  border: 1px solid #000;</span></span>
590<span id="cb9-339"><a href="#cb9-339" aria-hidden="true" tabindex="-1"></a><span class="vs">  padding: 0 5px 0 5px;</span></span>
591<span id="cb9-340"><a href="#cb9-340" aria-hidden="true" tabindex="-1"></a><span class="vs">}</span></span>
592<span id="cb9-341"><a href="#cb9-341" aria-hidden="true" tabindex="-1"></a></span>
593<span id="cb9-342"><a href="#cb9-342" aria-hidden="true" tabindex="-1"></a><span class="vs">.fourth-filter-button {</span></span>
594<span id="cb9-343"><a href="#cb9-343" aria-hidden="true" tabindex="-1"></a><span class="vs">  background-color: </span><span class="sc">${</span>filter4ButtonColor<span class="sc">}</span><span class="vs">;</span></span>
595<span id="cb9-344">
595<a href="#cb9-344" aria-hidden="true" tabindex="-1"></a><span class="vs">  border-radius: 0;</span></span>
596<span id="cb9-345"><a href="#cb9-345" aria-hidden="true" tabindex="-1"></a><span class="vs">  border: 1px solid #000;</span></span>
597<span id="cb9-346"><a href="#cb9-346" aria-hidden="true" tabindex="-1"></a><span class="vs">  padding: 0 5px 0 5px;</span></span>
598<span id="cb9-347"><a href="#cb9-347" aria-hidden="true" tabindex="-1"></a><span class="vs">}</span></span>
599<span id="cb9-348"><a href="#cb9-348" aria-hidden="true" tabindex="-1"></a></span>
600<span id="cb9-349"><a href="#cb9-349" aria-hidden="true" tabindex="-1"></a><span class="vs">.fifth-filter-button {</span></span>
601<span id="cb9-350"><a href="#cb9-350" aria-hidden="true" tabindex="-1"></a><span class="vs">  background-color: </span><span class="sc">${</span>filter5ButtonColor<span class="sc">}</span><span class="vs">;</span></span>
602<span id="cb9-351"><a href="#cb9-351" aria-hidden="true" tabindex="-1"></a><span class="vs">  border-radius: 0;</span></span>
603<span id="cb9-352"><a href="#cb9-352" aria-hidden="true" tabindex="-1"></a><span class="vs">  border: 1px solid #000;</span></span>
604<span id="cb9-353"><a href="#cb9-353" aria-hidden="true" tabindex="-1"></a><span class="vs">  padding: 0 5px 0 5px;</span></span>
605<span id="cb9-354"><a href="#cb9-354" aria-hidden="true" tabindex="-1"></a><span class="vs">}</span></span>
606<span id="cb9-355"><a href="#cb9-355" aria-hidden="true" tabindex="-1"></a></span>
607<span id="cb9-356"><a href="#cb9-356" aria-hidden="true" tabindex="-1"></a><span class="vs">.sixth-filter-button {</span></span>
608<span id="cb9-357"><a href="#cb9-357" aria-hidden="true" tabindex="-1"></a><span class="vs">  background-color: </span><span class="sc">${</span>filter6ButtonColor<span class="sc">}</span><span class="vs">;</span></span>
609<span id="cb9-358"><a href="#cb9-358" aria-hidden="true" tabindex="-1"></a><span class="vs">  border-radius: 0 5px 5px 0;</span></span>
610<span id="cb9-359"><a href="#cb9-359" aria-hidden="true" tabindex="-1"></a><span class="vs">  border: 1px solid #000;</span></span>
611<span id="cb9-360"><a href="#cb9-360" aria-hidden="true" tabindex="-1"></a><span class="vs">  padding: 0 5px 0 5px;</span></span>
612<span id="cb9-361"><a href="#cb9-361" aria-hidden="true" tabindex="-1"></a><span class="vs">}</span></span>
613<span id="cb9-362"><a href="#cb9-362" aria-hidden="true" tabindex="-1"></a></span>
614<span id="cb9-363"><a href="#cb9-363" aria-hidden="true" tabindex="-1"></a></span>
615<span id="cb9-364"><a href="#cb9-364" aria-hidden="true" tabindex="-1"></a><span class="vs">`</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
616<div class="cell-output cell-output-display">
617<div id="ojs-cell-8" data-nodetype="expression">
618
619</div>
620</div>
621</div>
622<div class="cell">
623<div class="sourceCode cell-code hidden" id="cb10" data-startfrom="375" data-source-offset="-20"><pre class="sourceCode js code-with-copy"><code class="sourceCode javascript" style="counter-reset: source-line 374;"><span id="cb10-375"><a href="#cb10-375" aria-hidden="true" tabindex="-1"></a><span class="kw">function</span> <span class="fu">formValue</span>(form) {</span>
624<span id="cb10-376"><a href="#cb10-376" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> object <span class="op">=</span> {}<span class="op">;</span></span>
625<span id="cb10-377"><a href="#cb10-377" aria-hidden="true" tabindex="-1"></a>  <span class="cf">for</span> (<span class="kw">const</span> input <span class="kw">of</span> form<span class="op">.</span><span class="at">elements</span>) {</span>
626<span id="cb10-378"><a href="#cb10-378" aria-hidden="true" tabindex="-1"></a>    <span class="cf">if</span> (input<span class="op">.</span><span class="at">disabled</span> <span class="op">||</span> <span class="op">!</span>input<span class="op">.</span><span class="fu">hasAttribute</span>(<span class="st">"name"</span>)) <span class="cf">continue</span><span class="op">;</span></span>
627<span id="cb10-379"><a href="#cb10-379" aria-hidden="true" tabindex="-1"></a>    <span class="kw">let</span> value <span class="op">=</span> input<span class="op">.</span><span class="at">value</span><span class="op">;</span></span>
628<span id="cb10-380"><a href="#cb10-380" aria-hidden="true" tabindex="-1"></a>    <span class="cf">switch</span> (input<span class="op">.</span><span class="at">type</span>) {</span>
629<span id="cb10-381"><a href="#cb10-381" aria-hidden="true" tabindex="-1"></a>      <span class="cf">case</span> <span class="st">"range"</span><span class="op">:</span></span>
630<span id="cb10-382"><a href="#cb10-382" aria-hidden="true" tabindex="-1"></a>      <span class="cf">case</span> <span class="st">"number"</span><span class="op">:</span> {</span>
631<span id="cb10-383"><a href="#cb10-383" aria-hidden="true" tabindex="-1"></a>        value <span class="op">=</span> input<span class="op">.</span><span class="at">valueAsNumber</span><span class="op">;</span></span>
632<span id="cb10-384"><a href="#cb10-384" aria-hidden="true" tabindex="-1"></a>        <span class="cf">break</span><span class="op">;</span></span>
633<span id="cb10-385"><a href="#cb10-385" aria-hidden="true" tabindex="-1"></a>      }</span>
634<span id="cb10-386"><a href="#cb10-386" aria-hidden="true" tabindex="-1"></a>
634      <span class="cf">case</span> <span class="st">"date"</span><span class="op">:</span> {</span>
635<span id="cb10-387"><a href="#cb10-387" aria-hidden="true" tabindex="-1"></a>        value <span class="op">=</span> input<span class="op">.</span><span class="at">valueAsDate</span><span class="op">;</span></span>
636<span id="cb10-388"><a href="#cb10-388" aria-hidden="true" tabindex="-1"></a>        <span class="cf">break</span><span class="op">;</span></span>
637<span id="cb10-389"><a href="#cb10-389" aria-hidden="true" tabindex="-1"></a>      }</span>
638<span id="cb10-390"><a href="#cb10-390" aria-hidden="true" tabindex="-1"></a>      <span class="cf">case</span> <span class="st">"radio"</span><span class="op">:</span> {</span>
639<span id="cb10-391"><a href="#cb10-391" aria-hidden="true" tabindex="-1"></a>        <span class="cf">if</span> (<span class="op">!</span>input<span class="op">.</span><span class="at">checked</span>) <span class="cf">continue</span><span class="op">;</span></span>
640<span id="cb10-392"><a href="#cb10-392" aria-hidden="true" tabindex="-1"></a>        <span class="cf">break</span><span class="op">;</span></span>
641<span id="cb10-393"><a href="#cb10-393" aria-hidden="true" tabindex="-1"></a>      }</span>
642<span id="cb10-394"><a href="#cb10-394" aria-hidden="true" tabindex="-1"></a>
642      <span class="cf">case</span> <span class="st">"checkbox"</span><span class="op">:</span> {</span>
643<span id="cb10-395"><a href="#cb10-395" aria-hidden="true" tabindex="-1"></a>        <span class="cf">if</span> (input<span class="op">.</span><span class="at">checked</span>) value <span class="op">=</span> <span class="kw">true</span><span class="op">;</span></span>
644<span id="cb10-396"><a href="#cb10-396" aria-hidden="true" tabindex="-1"></a>        <span class="cf">else</span> <span class="cf">if</span> (input<span class="op">.</span><span class="at">name</span> <span class="kw">in</span> object) <span class="cf">continue</span><span class="op">;</span></span>
645<span id="cb10-397"><a href="#cb10-397" aria-hidden="true" tabindex="-1"></a>        <span class="cf">else</span> value <span class="op">=</span> <span class="kw">false</span><span class="op">;</span></span>
646<span id="cb10-398"><a href="#cb10-398" aria-hidden="true" tabindex="-1"></a>        <span class="cf">break</span><span class="op">;</span></span>
647<span id="cb10-399"><a href="#cb10-399" aria-hidden="true" tabindex="-1"></a>      }</span>
648<span id="cb10-400"><a href="#cb10-400" aria-hidden="true" tabindex="-1"></a>
648      <span class="cf">case</span> <span class="st">"file"</span><span class="op">:</span> {</span>
649<span id="cb10-401"><a href="#cb10-401" aria-hidden="true" tabindex="-1"></a>        value <span class="op">=</span> input<span class="op">.</span><span class="at">multiple</span> <span class="op">?</span> input<span class="op">.</span><span class="at">files</span> <span class="op">:</span> input<span class="op">.</span><span class="at">files</span>[<span class="dv">0</span>]<span class="op">;</span></span>
650<span id="cb10-402"><a href="#cb10-402" aria-hidden="true" tabindex="-1"></a>        <span class="cf">break</span><span class="op">;</span></span>
651<span id="cb10-403"><a href="#cb10-403" aria-hidden="true" tabindex="-1"></a>      }</span>
652<span id="cb10-404"><a href="#cb10-404" aria-hidden="true" tabindex="-1"></a>      <span class="cf">case</span> <span class="st">"select-multiple"</span><span class="op">:</span> {</span>
653<span id="cb10-405"><a href="#cb10-405" aria-hidden="true" tabindex="-1"></a>        value <span class="op">=</span> <span class="bu">Array</span><span class="op">.</span><span class="fu">from</span>(input<span class="op">.</span><span class="at">selectedOptions</span><span class="op">,</span> option <span class="kw">=&gt;</span> option<span class="op">.</span><span class="at">value</span>)<span class="op">;</span></span>
654<span id="cb10-406"><a href="#cb10-406" aria-hidden="true" tabindex="-1"></a>        <span class="cf">break</span><span class="op">;</span></span>
655<span id="cb10-407"><a href="#cb10-407" aria-hidden="true" tabindex="-1"></a>      }</span>
656<span id="cb10-408"><a href="#cb10-408" aria-hidden="true" tabindex="-1"></a>    }</span>
657<span id="cb10-409"><a href="#cb10-409" aria-hidden="true" tabindex="-1"></a>    object[input<span class="op">.</span><span class="at">name</span>] <span class="op">=</span> value<span class="op">;</span></span>
658<span id="cb10-410"><a href="#cb10-410" aria-hidden="true" tabindex="-1"></a>  }</span>
659<span id="cb10-411"><a href="#cb10-411" aria-hidden="true" tabindex="-1"></a>  <span class="cf">return</span> object<span class="op">;</span></span>
660<span id="cb10-412"><a href="#cb10-412" aria-hidden="true" tabindex="-1"></a>}</span>
661<span id="cb10-413"><a href="#cb10-413" aria-hidden="true" tabindex="-1"></a></span>
662<span id="cb10-414"><a href="#cb10-414" aria-hidden="true" tabindex="-1"></a><span class="kw">function</span> <span class="fu">form</span>(form) {</span>
663<span id="cb10-415"><a href="#cb10-415" aria-hidden="true" tabindex="-1"></a>  <span class="kw">const</span> container <span class="op">=</span> <span class="fu">html</span><span class="vs">`&lt;div&gt;</span><span class="sc">${</span>form<span class="sc">}</span><span class="vs">`</span><span class="op">;</span></span>
664<span id="cb10-416"><a href="#cb10-416" aria-hidden="true" tabindex="-1"></a>  form<span class="op">.</span><span class="fu">addEventListener</span>(<span class="st">"submit"</span><span class="op">,</span> <span class="bu">event</span> <span class="kw">=&gt;</span> <span class="bu">event</span><span class="op">.</span><span class="fu">preventDefault</span>())<span class="op">;</span></span>
665<span id="cb10-417"><a href="#cb10-417" aria-hidden="true" tabindex="-1"></a>  form<span class="op">.</span><span class="fu">addEventListener</span>(<span class="st">"change"</span><span class="op">,</span> () <span class="kw">=&gt;</span> container<span class="op">.</span><span class="fu">dispatchEvent</span>(<span class="kw">new</span> <span class="bu">CustomEvent</span>(<span class="st">"input"</span>)))<span class="op">;</span></span>
666<span id="cb10-418"><a href="#cb10-418" aria-hidden="true" tabindex="-1"></a>  form<span class="op">.</span><span class="fu">addEventListener</span>(<span class="st">"input"</span><span class="op">,</span> () <span class="kw">=&gt;</span> container<span class="op">.</span><span class="at">value</span> <span class="op">=</span> <span class="fu">formValue</span>(form))<span class="op">;</span></span>
667<span id="cb10-419"><a href="#cb10-419" aria-hidden="true" tabindex="-1"></a>  container<span class="op">.</span><span class="at">value</span> <span class="op">=</span> <span class="fu">formValue</span>(form)<span class="op">;</span></span>
668<span id="cb10-420"><a href="#cb10-420" aria-hidden="true" tabindex="-1"></a>  <span class="cf">return</span> container</span>
669<span id="cb10-421"><a href="#cb10-421" aria-hidden="true" tabindex="-1"></a>}</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
670<div class="cell-output cell-output-display">
671<div>
672<div id="ojs-cell-9-1" data-nodetype="declaration">
673
674</div>
675</div>
676</div>
677<div class="cell-output cell-output-display">
678<div>
679<div id="ojs-cell-9-2" data-nodetype="declaration">
680
681</div>
682</div>
683</div>
684</div>
685
686
687
688</main> <!-- /main -->
689<script type="ojs-module-contents">
690{"contents":[{"methodName":"interpret","cellName":"ojs-cell-1","inline":false,"source":"\nviewof scenarioInputs = form(\n  html`\n    <form style=\"text-align: center; font-size: 16px; margin-bottom: 5px;\">\n        <label class=\"first-radio-button\">\n          <input id=\"first-radio-button\" type=\"radio\" name=\"optradio\" value=\"0\" checked>Cities & Towns\n        </label>\n        <label class=\"second-radio-button\">\n          <input id=\"second-radio-button\" type=\"radio\" name=\"optradio\"  value=\"1\">Counties\n        </label>\n    </form>\n  `\n)\n\n\nviewof filterInputs = form(\n  html`\n    <form style=\"text-align: center; font-size: 16px; margin-bottom: 5px;\">\n        <label class=\"second-filter-button\">\n          <input id=\"second-filter-button\" type=\"radio\" name=\"optradio\"  value=\"0.05\" checked>5%\n        </label>\n        <label class=\"third-filter-button\">\n          <input id=\"third-filter-button\" type=\"radio\" name=\"optradio\"  value=\"0.1\">10%\n        </label>\n        <label class=\"fourth-filter-button\">\n          <input id=\"fourth-filter-button\" type=\"radio\" name=\"optradio\"  value=\"0.15\">15%\n        </label>\n        <label class=\"fifth-filter-button\">\n          <input id=\"fifth-filter-button\" type=\"radio\" name=\"optradio\"  value=\"0.25\">25%\n        </label>\n        <label class=\"sixth-filter-button\">\n          <input id=\"sixth-filter-button\" type=\"radio\" name=\"optradio\"  value=\"0.5\">50%\n        </label>\n    </form>\n  `\n)\n"},{"methodName":"interpret","cellName":"ojs-cell-2","inline":false,"source":"\nhtml`\n<div>\n  <div style=\"width: 300px; padding: 5px; font-weight: 700; position: fixed; display: inline-block; left: 0; right: auto;\">${viewof filterInputs}</div>\n  <div style=\"width: 250px; padding: 5px; font-weight: 700; position: fixed; display: inline-block; right: auto; right: 0;\">${viewof scenarioInputs}</div>\n</div>\n`\n\n"},{"methodName":"interpret","cellName":"ojs-cell-3","inline":false,"source":"\ncontainer = html `<div id= \"container\" style='height: 500px; margin: 40px 0 0 0; padding: 0;' />`\n\n"},{"methodName":"interpret","cellName":"ojs-cell-4","inline":false,"source":"// old_data = FileAttachment(\"fines_fees.json\").json();\nd3 = require(\"d3@5\");\n\nmuniData = FileAttachment(\"fines_fees_cities_ii.json\").json();\ncountyData = FileAttachment(\"fines_fees_counties_ii.json\").json();\n\nMapboxGeocoder = require(\"[email protected]/dist/mapbox-gl-geocoder.min.js\");\nmapboxToken = \"pk.eyJ1Ijoiam9yZGFuLXJlYXNvbiIsImEiOiJja21wYzBzeHgwMjV6MnZteDByMDFqM2I0In0.MLbmWpdibeG0GY-vHqxzDg\";\n\nmapboxgl = {\n  const mbgl = await require(\"https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js\");\n  if (!mbgl.accessToken) {\n    mbgl.accessToken = mapboxToken;\n    const href = await require.resolve(\n      \"https://api.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css\"\n    );\n    document.head.appendChild(html`<link href=${href} rel=stylesheet>`);\n  }\n  return mbgl;\n};\n\n\n"},{"methodName":"interpret","cellName":"ojs-cell-5","inline":false,"source":"\nhtml`<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />`;\nhtml`<link href='https://unpkg.com/[email protected]/dist/mapbox-gl.css' rel='stylesheet' />`;\n\n"},{"methodName":"interpret","cellName":"ojs-cell-6","inline":false,"source":"\ndata = {\n  if (scenarioInputs.optradio == '0') {\n    return muniData\n  } else {\n    return countyData\n  }\n};\n\n\nfineFeesMap = {\n  \n  let map = new mapboxgl.Map({\n    container,\n    // projection: 'globe',\n      center: [\n        -98,\n        38\n      ],\n      zoom: 3.3,\n      style: 'mapbox://styles/jordan-reason/cld4wfcml002301nw869edr1g',\n    });\n\n    // Configure geocoder\n  let geocoder = new MapboxGeocoder({\n    accessToken: mapboxgl.accessToken,\n    country: 'us',\n    // bbox: [-125.35400390624999, 31.970803930433096, -113.26904296874999, 42.53689200787315]\n  });\n  map.addControl(geocoder, \"top-left\");\n\n    // Configure nav\n  let nav = new mapboxgl.NavigationControl();\n  map.addControl(nav, \"top-right\");\n    \n//   yield new Promise(resolve => {\n      map.on('load', () => {\n\n          map.addSource(\"finesfees\", {\n            type: \"geojson\",\n            data: data,\n          })\n\n          map.addLayer({\n            id: 'test',\n            type: 'circle',\n            paint: {\n              'circle-radius': {\
690n                'base': 1.9,\n                'stops': [\n                  [6, 3],\n                  [14, 100]\n                ]\n              },\n                \"circle-opacity\": 0.9,\n                \"circle-stroke-width\": 0.25,\n                \"circle-stroke-color\": \"#333\",\n              'circle-color': {\n        property: 'PercentGenRev',\n        stops: [\n          [0, '#ed1107'],\n          [0.8, '#ed1107']\n        ]\n      },\n            },\n            filter: ['>', 'PercentGenRev', +filterInputs.optradio],\n             source: \"finesfees\",\n        })\n\n        // map.setFilter('test', ['>', 'PercentGenRev', y])\n\n        map.popup = new mapboxgl.Popup({\n            closeButton: false,\n            closeOnClick: false,\n        })\n        map.on('mouseenter', 'test', function(e) {\n          map.getCanvas().style.cursor = 'pointer'\n          var coordinates = e.features[0].geometry.coordinates.slice()\n          const { Name, State, Population, PercentGenRev, GeneralRevenue, FinesForfeits } = e.features[0].properties\n          while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {\n            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360\n          }\n          var htmlContent = `\n          <span style=\"font-family: 'Open Sans', sans-serif; font-weight: 500;\">\n            <span style=\"font-size: 18px; font-weight: 700;\"><span class=\"capitalize\">${Name}</span></span>\n            <hr style='margin:2px; padding:0; border-top: 3px solid #d3d3d3;'>\n            Fines & Forfeits: ${d3.format(\"$,.0f\")(FinesForfeits * 1e3)}<br>\n            <hr style='margin:1px; padding:0; border-top: 1px solid #d3d3d3;'>\n            % of Revenue: ${d3.format(\".1%\")(FinesForfeits / GeneralRevenue)}<br>\n            <hr style='margin:1px; padding:0; border-top: 1px solid #d3d3d3;'>\n            General Revenue: ${d3.format(\"$,.0f\")(GeneralRevenue * 1e3)}<br>\n            <hr style='margin:1px; padding:0; border-top: 1px solid #d3d3d3;'>\n            Per Capita: ${d3.format(\"$,.0f\")((FinesForfeits * 1e3)/Population)}\n        </span>\n          `\n          map.popup.setLngLat(coordinates)\n          .setHTML(htmlContent)\n          .addTo(map)\n        })\n      })\n       map.on('mouseleave','test', function() {\n         map.getCanvas().style.cursor = ''\n         map.popup.remove()\n       })\n//         return resolve(map)\nreturn map;\n//   })\n}\n\n"},{"methodName":"interpret","cellName":"ojs-cell-7","inline":false,"source":"\n\nscenario1ButtonColor = {\n  if (scenarioInputs.optradio == '0') {\n    return \"#d3d3d3\"\n  } else {\n    return \"#fff\"\n  }\n};\n\nscenario2ButtonColor = {\n  if (scenarioInputs.optradio == '1') {\n    return \"#d3d3d3\"\n  } else {\n    return \"#fff\"\n  }\n};\n\n\nfilter1ButtonColor = {\n  if (filterInputs.optradio == '0') {\n    return \"#d3d3d3\"\n  } else {\n    return \"#fff\"\n  }\n};\n\nfilter2ButtonColor = {\n  if (filterInputs.optradio == '0.05') {\n    return \"#d3d3d3\"\n  } else {\n    return \"#fff\"\n  }\n};\n\nfilter3ButtonColor = {\n  if (filterInputs.optradio == '0.1') {\n    return \"#d3d3d3\"\n  } else {\n    return \"#fff\"\n  }\n};\n\nfilter4ButtonColor = {\n  if (filterInputs.optradio == '0.15') {\n    return \"#d3d3d3\"\n  } else {\n    return \"#fff\"\n  }\n};\n\nfilter5ButtonColor = {\n  if (filterInputs.optradio == '0.25') {\n    return \"#d3d3d3\"\n  } else {\n    return \"#fff\"\n  }\n};\n\nfilter6ButtonColor = {\n  if (filterInputs.optradio == '0.5') {\n    return \"#d3d3d3\"\n  } else {\n    return \"#fff\"\n  }\n};\n\n"},{"methodName":"interpret","cellName":"ojs-cell-8","inline":false,"source":"\nhtml`\n<style>\n\n#first-radio-button,\n#second-radio-button,\n#first-filter-button,\n#second-filter-button,\n#third-filter-button,\n#fourth-filter-button,\n#fifth-filter-button,\n#sixth-filter-button {\n  display: none;\n}\n\n.first-radio-button {\n\tbackground-color: ${scenario1ButtonColor};\n  border-radius: 5px 0 0 5px;\n  border: 1px solid #000;\n  padding: 0 5px 0 5px;\n}\n\n.second-radio-button {\n\tbackground-color: ${scenario2ButtonColor};\n  border-radius: 0 5px 5px 0;\n  border: 1px solid #000;\n  padding: 0 5px 0 5px;\n}\n\n.first-filter-button {\n  background-color: ${filter1ButtonColor};\n  border-radius: 5px 0 0 5px;\n  border: 1px solid #000;\n  padding: 0 5px 0 5px;\n}\n\n.second-filter-button {\n  background-color: ${filter2ButtonColor};\n  border-radius: 5px 0 0 5px;\n  border: 1px solid #000;\n  padding: 0 5px 0 5px;\n}\n\n.third-filter-button {\n  background-color: ${filter3ButtonColor};\n  border-radius: 0;\n  border: 1px solid #000;\n  padding: 0 5px 0 5px;\n}\n\n.fourth-filter-button {\n  background-color: ${filter4ButtonColor};\n  border-radius: 0;\n  border: 1px solid #000;\n  padding: 0 5px 0 5px;\n}\n\n.fifth-filter-button {\n  background-color: ${filter5ButtonColor};\n  border-radius: 0;\n  border: 1px solid #000;\n  padding: 0 5px 0 5px;\n}\n\n.sixth-filter-button {\n  background-color: ${filter6ButtonColor};\n  border-radius: 0 5px 5px 0;\n  border: 1px solid #000;\n  padding: 0 5px 0 5px;\n}\n\n\n`\n"},{"methodName":"interpret","cellName":"ojs-cell-9","inline":false,"source":"\n// Form Functions\n\nfunction formValue(form) {\n  const object = {};\n  for (const input of form.elements) {\n    if (input.disabled || !input.hasAttribute(\"name\")) continue;\n    let value = input.value;\n    switch (input.type) {\n      case \"range\":\n      case \"number\": {\n        value = input.valueAsNumber;\n        break;\n      }\n      case \"date\": {\n        value = input.valueAsDate;\n        break;\n      }\n      case \"radio\": {\n        if (!input.checked) continue;\n        break;\n      }\n      case \"checkbox\": {\n        if (input.checked) value = true;\n        else if (input.name in object) continue;\n        else value = false;\n        break;\n      }\n      case \"file\": {\n        value = input.multiple ? input.files : input.files[0];\n        break;\n      }\n      case \"select-multiple\": {\n        value = Array.from(input.selectedOptions, option => option.value);\n        break;\n      }\n    }\n    object[input.name] = value;\n  }\n  return object;\n}\n\nfunction form(form) {\n  const container = html`<div>${form}`;\n  form.addEventListener(\"submit\", event => event.preventDefault());\n  form.addEventListener(\"change\", () =>
690 container.dispatchEvent(new CustomEvent(\"input\")));\n  form.addEventListener(\"input\", () => container.value = formValue(form));\n  container.value = formValue(form);\n  return container\n}\n\n\n\n"},{"methodName":"interpretQuiet","source":"shinyInput('scenarioInputs')"},{"methodName":"interpretQuiet","source":"shinyInput('filterInputs')"}]}
691</script>
vendor: 1 bytes, line 691
691
692<script type="module">
693window._ojs.paths.runtimeToDoc = "../..";
694window._ojs.paths.runtimeToRoot = "../..";
695window._ojs.paths.docToRoot = "";
696window._ojs.selfContained = false;
697window._ojs.runtime.interpretFromScriptTags();
698</script>
vendor: 1 bytes, line 698
698
699<script id="quarto-html-after-body" type="application/javascript">
700window.document.addEventListener("DOMContentLoaded", function (event) {
701  const toggleBodyColorMode = (bsSheetEl) => {
702    const mode = bsSheetEl.getAttribute("data-mode");
703    const bodyEl = window.document.querySelector("body");
704    if (mode === "dark") {
705      bodyEl.classList.add("quarto-dark");
706      bodyEl.classList.remove("quarto-light");
707    } else {
708      bodyEl.classList.add("quarto-light");
709      bodyEl.classList.remove("quarto-dark");
710    }
711  }
712  const toggleBodyColorPrimary = () => {
713    const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
714    if (bsSheetEl) {
715      toggleBodyColorMode(bsSheetEl);
716    }
717  }
718  toggleBodyColorPrimary();  
719  const icon = "";
720  const anchorJS = new window.AnchorJS();
721  anchorJS.options = {
722    placement: 'right',
723    icon: icon
724  };
725  anchorJS.add('.anchored');
726  const clipboard = new window.ClipboardJS('.code-copy-button', {
727    target: function(trigger) {
728      return trigger.previousElementSibling;
729    }
730  });
731  clipboard.on('success', function(e) {
732    // button target
733    const button = e.trigger;
734    // don't keep focus
735    button.blur();
736    // flash "checked"
737    button.classList.add('code-copy-button-checked');
738    var currentTitle = button.getAttribute("title");
739    button.setAttribute("title", "Copied!");
740    setTimeout(function() {
741      button.setAttribute("title", currentTitle);
742      button.classList.remove('code-copy-button-checked');
743    }, 1000);
744    // clear code selection
745    e.clearSelection();
746  });
747  function tippyHover(el, contentFn) {
748    const config = {
749      allowHTML: true,
750      content: contentFn,
751      maxWidth: 500,
752      delay: 100,
753      arrow: false,
754      appendTo: function(el) {
755          return el.parentElement;
756      },
757      interactive: true,
758      interactiveBorder: 10,
759      theme: 'quarto',
760      placement: 'bottom-start'
761    };
762    window.tippy(el, config); 
763  }
764  const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
765  for (var i=0; i<noterefs.length; i++) {
766    const ref = noterefs[i];
767    tippyHover(ref, function() {
768      // use id or data attribute instead here
769      let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
770      try { href = new URL(href).hash; } catch {}
771      const id = href.replace(/^#\/?/, "");
772      const note = window.document.getElementById(id);
773      return note.innerHTML;
774    });
775  }
776  var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
777  for (var i=0; i<bibliorefs.length; i++) {
778    const ref = bibliorefs[i];
779    const cites = ref.parentNode.getAttribute('data-cites').split(' ');
780    tippyHover(ref, function() {
781      var popup = window.document.createElement('div');
782      cites.forEach(function(cite) {
783        var citeDiv = window.document.createElement('div');
784        citeDiv.classList.add('hanging-indent');
785        citeDiv.classList.add('csl-entry');
786        var biblioDiv = window.document.getElementById('ref-' + cite);
787        if (biblioDiv) {
788          citeDiv.innerHTML = biblioDiv.innerHTML;
789        }
790        popup.appendChild(citeDiv);
791      });
792      return popup.innerHTML;
793    });
794  }
795});
796</script>
796
797</div> <!-- /content -->
798
799
800
801</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.