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"> <form style="text-align: center; font-size: 16px; margin-bottom: 5px;"></span></span> 149<span id="cb1-21"><a href="#cb1-21" aria-hidden="true" tabindex="-1"></a><span class="vs"> <label class="first-radio-button"></span></span> 150<span id="cb1-22"><a href="#cb1-22" aria-hidden="true" tabindex="-1"></a><span class="vs"> <input id="first-radio-button" type="radio" name="optradio" value="0" checked>Cities & Towns</span></span> 151<span id="cb1-23"><a href="#cb1-23" aria-hidden="true" tabindex="-1"></a><span class="vs"> </label></span></span> 152<span id="cb1-24"><a href="#cb1-24" aria-hidden="true" tabindex="-1"></a><span class="vs"> <label class="second-radio-button"></span></span> 153<span id="cb1-25"><a href="#cb1-25" aria-hidden="true" tabindex="-1"></a><span class="vs"> <input id="second-radio-button" type="radio" name="optradio" value="1">Counties</span></span> 154<span id="cb1-26"><a href="#cb1-26" aria-hidden="true" tabindex="-1"></a><span class="vs"> </label></span></span> 155<span id="cb1-27"><a href="#cb1-27" aria-hidden="true" tabindex="-1"></a><span class="vs"> </form></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"> <form style="text-align: center; font-size: 16px; margin-bottom: 5px;"></span></span> 163<span id="cb1-35"><a href="#cb1-35" aria-hidden="true" tabindex="-1"></a><span class="vs"> <label class="second-filter-button"></span></span> 164<span id="cb1-36"><a href="#cb1-36" aria-hidden="true" tabindex="-1"></a><span class="vs"> <input id="second-filter-button" type="radio" name="optradio" value="0.05" checked>5%</span></span> 165<span id="cb1-37"><a href="#cb1-37" aria-hidden="true" tabindex="-1"></a><span class="vs"> </label></span></span> 166<span id="cb1-38"><a href="#cb1-38" aria-hidden="true" tabindex="-1"></a><span class="vs"> <label class="third-filter-button"></span></span> 167<span id="cb1-39"><a href="#cb1-39" aria-hidden="true" tabindex="-1"></a><span class="vs"> <input id="third-filter-button" type="radio" name="optradio" value="0.1">10%</span></span> 168<span id="cb1-40"><a href="#cb1-40" aria-hidden="true" tabindex="-1"></a><span class="vs"> </label></span></span> 169<span id="cb1-41"><a href="#cb1-41" aria-hidden="true" tabindex="-1"></a><span class="vs"> <label class="fourth-filter-button"></span></span> 170<span id="cb1-42"><a href="#cb1-42" aria-hidden="true" tabindex="-1"></a><span class="vs"> <input id="fourth-filter-button" type="radio" name="optradio" value="
1700.15">15%</span></span> 171<span id="cb1-43"><a href="#cb1-43" aria-hidden="true" tabindex="-1"></a><span class="vs"> </label></span></span> 172<span id="cb1-44"><a href="#cb1-44" aria-hidden="true" tabindex="-1"></a><span class="vs"> <label class="fifth-filter-button"></span></span> 173<span id="cb1-45"><a href="#cb1-45" aria-hidden="true" tabindex="-1"></a><span class="vs"> <input id="fifth-filter-button" type="radio" name="optradio" value="0.25">25%</span></span> 174<span id="cb1-46"><a href="#cb1-46" aria-hidden="true" tabindex="-1"></a><span class="vs"> </label></span></span> 175<span id="cb1-47"><a href="#cb1-47" aria-hidden="true" tabindex="-1"></a><span class="vs"> <label class="sixth-filter-button"></span></span> 176<span id="cb1-48"><a href="#cb1-48" aria-hidden="true" tabindex="-1"></a><span class="vs"> <input id="sixth-filter-button" type="radio" name="optradio" value="0.5">50%</span></span> 177<span id="cb1-49"><a href="#cb1-49" aria-hidden="true" tabindex="-1"></a><span class="vs"> </label></span></span> 178<span id="cb1-50"><a href="#cb1-50" aria-hidden="true" tabindex="-1"></a><span class="vs"> </form></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"><div></span></span> 199<span id="cb2-57"><a href="#cb2-57" aria-hidden="true" tabindex="-1"></a><span class="vs"> <div style="width: 300px; padding: 5px; font-weight: 700; position: fixed; display: inline-block; left: 0; right: auto;"></span><span class="sc">${</span>viewof filterInputs<span class="sc">}</span><span class="vs"></div></span></span> 200<span id="cb2-58"><a href="#cb2-58" aria-hidden="true" tabindex="-1"></a><span class="vs"> <div style="width: 250px; padding: 5px; font-weight: 700; position: fixed; display: inline-block; right: auto; right: 0;"></span><span class="sc">${</span>viewof scenarioInputs<span class="sc">}</span><span class="vs"></div></span></span> 201<span id="cb2-59"><a href="#cb2-59" aria-hidden="true" tabindex="-1"></a><span class="vs"></div></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">`<div id= "container" style='height: 500px; margin: 40px 0 0 0; padding: 0;' />`</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">`<link href=</span><span class="sc">${</span>href<span class="sc">}</span><span class="vs"> rel=stylesheet>`</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">`<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' />`</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">`<link href='https://unpkg.com/[email protected]/dist/mapbox-gl.css' rel='stylesheet' />`</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 => {</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">=></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">'>'</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', ['>', '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">></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">></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"> <span style="font-family: 'Open Sans', sans-serif; font-weight: 500;"></span></span> 382<span id="cb7-193"><a href="#cb7-193" aria-hidden="true" tabindex="-1"></a><span class="vs"> <span style="font-size: 18px; font-weight: 700;"><span class="capitalize"></span><span class="sc">${</span>Name<span class="sc">}</span><span class="vs"></span></span></span></span> 383<span id="cb7-194"><a href="#cb7-194" aria-hidden="true" tabindex="-1"></a><span class="vs"> <hr style='margin:2px; padding:0; border-top: 3px solid #d3d3d3;'></span></span> 384<span id="cb7-195"><a href="#cb7-195" aria-hidden="true" tabindex="-1"></a><span class="vs"> Fines & 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"><br></span></span> 385<span id="cb7-196"><a href="#cb7-196" aria-hidden="true" tabindex="-1"></a><span class="vs"> <hr style='margin:1px; padding:0; border-top: 1px solid #d3d3d3;'></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"><br></span></span> 387<span id="cb7-198"><a href="#cb7-198" aria-hidden="true" tabindex="-1"></a><span class="vs"> <hr style='margin:1px; padding:0; border-top: 1px solid #d3d3d3;'></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"><br></span></span> 389<span id="cb7-200"><a href="#cb7-200" aria-hidden="true" tabindex="-1"></a><span class="vs"> <hr style='margin:1px; padding:0; border-top: 1px solid #d3d3d3;'></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"> </span></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"><style></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">=></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">`<div></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">=></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">=></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">=></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.