-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
557 lines (536 loc) · 29.7 KB
/
index.html
File metadata and controls
557 lines (536 loc) · 29.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="js/ss_config.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', config.trackingID, 'auto');
ga('send', 'pageview');
</script>
<title>Efficiency Explorer v1.2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/base-jquery-ui.css">
<link rel="stylesheet" href="css/jquery-bootstrap-datepicker.css">
<link rel="stylesheet" href="css/metricsgraphics.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header col-md-4">
<span class="navbar-brand" href="">
Efficiency Explorer v1.2
</span>
</div>
<ul class="nav navbar-nav col-md-6">
<!-- I use href="javascript:..." because href default cursor property is pointer -->
<li><a id='aboutLink' href="javascript: smoothScroll('#extraUtility');">About</a></li>
<li><a id='intraULink' href="javascript: smoothScroll('#intraUtility');">Tool</a></li>
</ul>
<div class="navbar-header col-md-2">
<a id='argoBrand' class="navbar-brand" href="http://argolabs.org">
Powered by ARGO
</a>
</div>
</div>
</nav>
<!-- Content -->
<div class="container-fluid">
<div id='extraUtility' class='section row'>
<div class='col-md-12'>
<div class='row' style='padding-top: 15px;'>
<div class='col-md-6'>
<div class="panel panel-default equation">
<div class="panel-heading">
<h3 class="panel-title centered">
Indoor Budget
</h3>
</div>
<div class="panel panel-horizontal">
<div class="panel-body">Sum of<br>days in period</div>
<div class="panel-body">x</div>
<div class="panel-body clickable"
aria-expanded="true"
data-container="body"
data-toggle="popover" data-trigger="focus" tabindex="0"
data-placement="bottom"
title="Pending Policy Decision"
data-html="true"
data-content='
<h5>Parameter Description</h5>
<p>Residential customers use water. Policy prescriptions regarding <em>reasonable</em> residential water use can be captured by setting a "gallons per capita per day" (GPCD) standard to scale the indoor budget accordingly.</p>
<p>For reference, below are historical GPCDs for different groups of water users.</p>
<table style="width:100%">
<tr>
<th>GPCD</th>
<th>Water Users</th>
</tr>
<tr>
<td>62</td>
<td>USA 1999</td>
</tr>
<tr>
<td>46</td>
<td>USA 2014</td>
</tr>
<tr>
<td>37</td>
<td>USA new efficent home</td>
</tr>
<tr>
<td>32</td>
<td>Germany 2013</td>
</tr>
</table><br>
<p><em>Source: National Academies of Sciences, Engineering, and Medicine; <a href="https://www.nap.edu/catalog/21866/using-graywater-and-stormwater-to-enhance-local-water-supplies-an">"Using Graywater and Stormwater to Enhance Local Water Supplies: An Assessment of Risks, Costs, and Benefits</a></em></p>'>
<br>GPCD<br> 
</div>
<div class="panel-body">x</div>
<div class="panel-body clickable"
aria-expanded="true"
data-container="body"
data-toggle="popover" data-trigger="focus" tabindex="0"
data-placement="bottom"
title="Unique Agency Condition"
aria-expanded="true"
data-html="true"
data-content="
<h5>Parameter Description</h5>
<p>Suppliers serving more residential customers will have greater indoor residential use demands. Their indoor residential use budgets are scaled accordingly.</p><br>
<h5>Data Source(s)</h5>
<p>The population data reported to the State Water Resources Control Board for the monthly <a href='https://data.ca.gov/dataset/drinking-water-%E2%80%93-urban-water-supplier-monitoring-%E2%80%93-drinc/resource/00fa49b9-9e0f-4c65-bfab#{}'>Urban Water Supplier Report</a> are used in this tool.</p><br>
<h5><b class='highlight'>Quality Consideration(s)</b></h5>
<p>Some areas with high tourism have seasonal population variations. Service area deviation from census boundaries can also lead to data quality uncertainty.</p>">
<br>Population<br> </div>
</div>
<div class="panel-footer centered">
<i class="glyphicon glyphicon-tint"></i>
<i class="glyphicon glyphicon-user"></i>
</div>
</div>
</div>
<div class='col-md-6 noleftpadding'>
<div class="panel panel-default equation">
<div class="panel-heading">
<h3 class="panel-title centered">
Outdoor Budget
</h3>
</div>
<div class="panel panel-horizontal">
<div class="panel-body clickable"
aria-expanded="true"
data-container="body"
data-toggle="popover" data-trigger="focus" tabindex="0"
data-placement="bottom"
title="Unique Agency Condition"
data-html="true"
data-content="
<h5>Parameter Description</h5>
<p>
Suppliers with greater environmental demands for evaporation and plant transpiration will feel a greater demand for outdoor water use in their districts. Reference evapotranspiration captures this demand and scales the outdoor budget accordingly.
</p><br>
<h5>Data Source(s)</h5>
<p>
Data from the Department of Water Resources' <a href='http://www.cimis.water.ca.gov/Default.aspx'>CIMIS stations</a> are used to calculate inverse distance-weighted averages of nearby stations for each supplier as a function of time.
</p><br>
<h5><b class='highlight'>Quality Consideration(s)</b></h5>
<p>
Not all suppliers are within close proximity to CIMIS stations. Suppliers with no CIMIS stations within 20 kilometers, or with obvious intervening obstructions such as mountain ranges, have been flagged for data quality concerns.
</p>">
Sum of daily reference evapotranspiration</div>
<div class="panel-body">x</div>
<div class="panel-body clickable"
aria-expanded="true"
data-container="body"
data-toggle="popover" data-trigger="focus" tabindex="0"
data-placement="bottom"
title="Pending Policy Decision"
data-html="true"
data-content='
<h5>Parameter Description</h5>
<p>
Landscapes naturally transfer water to the atmosphere through evapotranspiration. Policy prescriptions regarding <em>reasonable</em> landscape types can be stated in terms of the percent of this water transfer that must be replaced with water use for irrigation. The ET Adjustment Factor (ETAF) captures this prescription, and scales the outdoor budget accordingly. The ETAF takes into account both the natural water use characteristics of a landscape as well as the efficiency with which it is irrigated.
</p>
<p>
For reference, below are example ETAFs for various types of landscapes assuming a 100% irrigation efficiency.
</p>
<table style="width:100%">
<tr>
<th>ETAF</th>
<th>Plant Type</th>
</tr>
<tr>
<td>.8</td>
<td>Cool-season turf</td>
</tr>
<tr>
<td>.7</td>
<td>Humid climate trees/shrubs</td>
</tr>
<tr>
<td>.6</td>
<td>Warm-season turf</td>
</tr>
<tr>
<td>.5</td>
<td>Arid climate trees/shrubs</td>
</tr>
<tr>
<td>.3</td>
<td>Desert Plants</td>
</tr>
</table><br>
<p><em>Source: UNIVERSITY OF CALIFORNIA Division of Agriculture and Natural Resources, <a href="http://ucanr.edu/sites/UrbanHort/files/217692.pdf">"Making Sense of ET Adjustment Factors for Budgeting and Managing Landscape Irrigation"</a></em></p>'>
ET Adjustment Factor</div>
<div class="panel-body">x</div>
<div class="panel-body clickable"
id='landscapeArea'
data-container="body"
data-toggle="popover" data-trigger="focus" tabindex="0"
data-placement="bottom"
title="Unique Agency Condition"
data-html="true"
data-content="
<h5>Parameter Description</h5>
<p>
Suppliers with more landscaped area may have greater outdoor residential water use demands. Their outdoor residential water use budgets are scaled accordingly.
</p><br>
<h5>Data Source(s)</h5>
<p>
There are ongoing discussions to finalize a definition of landscaped area appropriate for setting an outdoor water use standard. Here, <em>landscaped area</em> is defined as the sum of photosynthetically active turf, and bushes and trees. These data were collected through remote-sensing in partnership with Claremont Graduate University.
</p><br>
<p>
Administrative boundary data were required to demarcate and allocate residential parcels between and to suppliers. For this iteration, residential parcel data were obtained from the Office of Planning and Research's <a href='http://services.gis.ca.gov/arcgis/rest/services/Boundaries/Parcels_Residential/MapServer'>residential parcel dataset</a>. Service area boundaries were obtained from Department of Water Resources' <a href='https://gis.water.ca.gov/app/boundaries/'>Water Management Planning Tool</a> as well as the California Environmental Health Tracking Program's <a href='http://cehtp.org/page/water/water_system_map_viewer'> Water System Map Viewer</a>.
</p><br>
<h5><b class='highlight'>Quality Consideration(s)</b></h5>
<p>
There are several important considerations for this parameter. While the landscapes of typical suburbs without brown lawns are captured well with the photosynthetically active remote sensing approach used, there generally exists greater data quality uncertainty for rural and wooded areas. Additionally, the administrative boundary data available must be deliberately validated.
</p>
<p>
For these reasons, suppliers with a significant percentage of large, green, and un-irrigated residential parcels; and/or an unreasonable average number of people per residential parcel have been flagged for data quality concerns.
</p>">
Residential landscaped area</div>
<div class="panel-body">x</div>
<div class="panel-body">Unit Conversion Factor</div>
</div>
<div class="panel-footer centered">
<i class="glyphicon glyphicon-tint"></i>
<i class="glyphicon glyphicon-leaf"></i>
<!-- <i class="glyphicon glyphicon-tree-deciduous"></i> -->
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body equation" style="background-color: #222">
<h3 style="color: white">
The Efficiency Explorer Tool was developed with publicly available data to offer water managers a first glance at water use compared to potential water efficiency goals. It is for educational and illustrative purposes only. The Efficiency Explorer Tool was not intended and is not able to calculate water agency budgets at a level of accuracy appropriate for establishing policy. Several areas for improvement were identified as this tool was developed and the <a href='https://californiadatacollaborative.org'>California Data Collaborative</a> is dedicated to working with members and stakeholders to improve the accuracy and precision of this tool.
</h3>
<div class='centered'>
<div aria-label="..." class="btn-group" role="group">
<button class="btn btn-default" id="toolButton" onclick="smoothScroll('#intraUtility');" type="button">
<b>Show me the Efficiency Explorer!</b>
</button>
</div>
</div>
</div>
<div class="panel-footer centered"></div>
</div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="contextHeading">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#contextCollapse" aria-expanded="false" aria-controls="contextCollapse">
Context
</a>
</h4>
</div>
<div id="contextCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="contextHeading">
<div class="panel-body">
<p>
The CaDC Efficiency Explorer is a <b class="highlight">planning and education tool</b> for local water managers and the wider California water community. This tool is the result of a rapid first assessment of Governor Brown's Executive Order B-37-16, which calls for the development of water use efficiency goals customized to the unique conditions of each urban water agency as part of a new, permanent efficiency framework.
</p>
<p>
For version one of the Efficiency Explorer, the CaDC <b class="highlight">focused on the <em>residential</em> component of an agency's efficiency efficiency goal.</b> This goal is calculated as the sum of indoor and outdoor residential water use budgets, and can vary according to unique agency conditions as well as pending policy decisions.
</p>
<p>
The parameters of these two budgets are displayed in the labeled panels above. <b class="highlight">Click each parameter for descriptions, data sources, and data quality considerations</b> for this iteration of the CaDC Efficiency Explorer.
</p>
<p>
Since data quality is an important dimension for this rapid first assessment, data quality flags are included for each agency. These flags are explained in the <em>Data Quality</em> section below. For additional technical details, please see the <b><a style="text-decoration: underline;" href="http://californiadatacollaborative.org/blog/2017/4/28/cadc-statewide-efficiency-explorer-methodology">CaDC Statewide Efficiency Explorer Methodology Documentation</a></b>.
</p>
<p>
For all other questions and feedback, users are encouraged to reach out to info@CaliforniaDataCollaborative.com!
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="qualityHeading">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#qualityCollapse" aria-expanded="false" aria-controls="qualityCollapse">
Data Quality
</a>
</h4>
</div>
<div id="qualityCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="qualityHeading">
<div class="panel-body">
<p>
There are two distinct senses in which efficiency goal calculations can deviate from ground truth: precision and accuracy.<br>
</p>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
<div class='centered'>
<svg version="1.1"
baseProfile="full"
width="300" height="300"
xmlns="http://www.w3.org/2000/svg">
<circle cx='150' cy='150' r="70" fill="#222" />
<circle cx='150' cy='150' r='55' fill="#66afe9" />
<circle cx='150' cy='150' r="40" fill="#222" />
<circle cx='150' cy='150' r="25" fill="#66afe9" />
<circle cx='150' cy='150' r="10" fill="#222" />
<circle cx='182' cy='129' r="5" fill="#ffffff" />
<circle cx='154' cy='101' r="5" fill="#ffffff" />
<circle cx='110' cy='158' r="5" fill="#ffffff" />
<circle cx='155' cy='180' r="5" fill="#ffffff" />
<text x='150' y='240' text-anchor='middle'>
Figure (a)
</text>
<text x='150' y='260' text-anchor='middle'>
Systematically Accurate, Not Precise
</text>
<text x='150' y='280' text-anchor='middle'>
325 of 404 Efficiency Goal Calculations | ~80%
</text>
</svg>
</div>
</div>
<div class="col-md-4">
<div class='centered'>
<svg version="1.1"
baseProfile="full"
width="300" height="300"
xmlns="http://www.w3.org/2000/svg">
<circle cx='150' cy='150' r="70" fill="#222" />
<circle cx='150' cy='150' r='55' fill="#66afe9" />
<circle cx='150' cy='150' r="40" fill="#222" />
<circle cx='150' cy='150' r="25" fill="#66afe9" />
<circle cx='150' cy='150' r="10" fill="#222" />
<circle cx='147' cy='102' r="5" fill="#ffffff" />
<circle cx='116' cy='104' r="5" fill="#ffffff" />
<circle cx='97' cy='168' r="5" fill="#ffffff" />
<circle cx='131' cy='138' r="5" fill="#ffffff" />
<text x='150' y='240' text-anchor='middle'>
Figure (b)
</text>
<text x='150' y='260' text-anchor='middle'>
Not Systematically Accurate, Not Precise
</text>
<text x='150' y='280' text-anchor='middle'>
79 of 404 Efficiency Goal Calculations | ~20%
</text>
</svg>
</div>
</div>
<div class="col-md-2"></div>
</div>
<p>
<br>Parameter data used to calculate efficiency goals can be <em>imprecise.</em> Imprecision reflects deviations around a true value. The Efficiency Explorer's graphs include gray confidence bands around each agency's calculated goal to indicate the imprecision resulting from the compounded statistical error for all parameter data sources. Analogous to the relationship between the darts and the bullseye in figure (a) above, one should expect the ground truth efficiency goal values to lie somewhere within the confidence bands (for agencies not flagged as showing evidence of systematic inaccuracy). For technical details on each component error source, please see our <a href="https://github.com/California-Data-Collaborative/statewide-efficiency-error-model/blob/master/Statewide%20Efficiency%20Framework%20Errors.ipynb">error model.</a> One key result from this error analysis is the break down of the aggregate goal error by budget: indoor budgets are expected to lie within approximately 3% of their estimates, while outdoor budgets are within 40%. <b class="highlight">Takeaway: while imprecise efficiency goal calculations can be further refined, they are useful first approximations of ground truth.</b>
</p>
<p>
As alluded to above, in certain situations parameter data used to calculate efficiency goals can be not only imprecise, but also <em>inaccurate.</em> Inaccuracy reflects a more systematic bias away from ground truth. Figure (b) above graphically illustrates this type of error. Non-random inaccuracies can arise from situations such as the prevalence of large rural residential parcels in certain districts, which would result in systematic overestimation of goal calculations in those districts. The prevalence of brown lawns in other districts would result in systematic underestimation of goal calculations in those districts. Roughly 20% of agency efficiency goal calculations show evidence of this more problematic source of error. The component data inaccuracies are broken down in a CaDC <a href="http://californiadatacollaborative.org/blog/2017/6/8/residential-water-efficiency-and-the-california-data-quality-landscape">data quality blog post.</a> <b class="highlight">Takeaway: efficiency goals flagged as systematically inaccurate should not be interpreted as useful approximations and have been grayed out on the map.</b>
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="instructionsHeading">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#instructionsCollapse" aria-expanded="false" aria-controls="instructionsCollapse">
Detailed Instructions
</a>
</h4>
</div>
<div id="instructionsCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="instructionsHeading">
<div class="panel-body">
<p>
By setting values for <em>GPCD</em> and <em>ET Adjustment Factor</em>, users can investigate how different standards for residential water use affect their agencies over different periods of time.
<ul>
<li>
Use the <b>Scenario Builder</b> panel to:
<ul>
<li>Set scenario parameters
<ul>
<li><b>Date Range</b> - by clicking and dragging the slider knobs</li>
<li><b>GPCD</b> and <b>ET Adjustment Factor</b> - by typing values in the associated forms and pressing enter</li>
</ul>
</li>
<li>View results for current scenario for selected <b>Supplier</b>
<ul>
<li><b>Residential Efficiency Goal</b> - the residential water use efficiency goal calculated using the selected indoor and outdoor water efficiency standards</li>
<li><b>Residential Use</b> - the total water use reported by the supplier multiplied by the percentage that went to residential customers</li>
<li><b>Efficiency</b> - the number of acre-feet (and percentage) over or within efficiency goal. Negative percentages represent percentage within goal</li>
<li><b>Data Quality</b> - a 3-tiered flag indicating supplier-level data quality concerns</li>
<li>Time Series Graph - the historical relationship between efficiency goal and actual use. Grey bands are included around efficiency goal line to indicate confidence region</li>
</ul>
</li>
</ul>
</li>
<li>
Use the map panel to:
<ul>
<li>Select suppliers</li>
<li>View geographic context</li>
<li>View the <b>Big Picture</b>
<ul>
<!-- <li><b>SBx7-7 2020 Residential Efficiency Goal</b> - the amount of water in acre-feet for the previous twelve months for suppliers with SBx7-7 efficiency goals. The Residential Efficiency Goal is calculated as the percent residential reported in the supplier report multiplied by the total SBx7-7 goal for that supplier</li> -->
<li><b>Total Residential Efficiency Goal</b> - the sum of all residential goals not flagged as systematically inaccurate for the previous twelve months</li>
<li><b>Total Residential Use</b> - the sum of all residential use of those suppliers for the previous twelve months</li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
</div>
</div>
</div>
</div>
<p>
<b>For best experience, please use Chrome and set your browser window to fullscreen.</b><br><br>
</p>
</div>
</div>
<div id='intraUtility' class='section row'>
<div id='splash'>
<div class='col-md-3'></div>
<div class='col-md-6 vcenter'>
<div>
<h1 class="highlight">
Important Consideration:
</h1>
<h4>
While the landscapes of typical suburbs without brown lawns are captured well with the photosynthetically active remote sensing approach used, there generally exists greater data quality uncertainty for rural and wooded areas.
</h4>
<h4>
For additional technical details, please see the <b><a href="http://californiadatacollaborative.org/blog/2017/4/28/cadc-statewide-efficiency-explorer-methodology">CaDC Statewide Efficiency Explorer Methodology Documentation.</a></b>
</h4>
<h4>
For all other questions and feedback, users are encouraged to reach out to info@CaliforniaDataCollaborative.com!
</h4>
</div>
<div class='centered'>
<div aria-label="..." class="btn-group" role="group">
<button class="btn btn-default" id="toolButton" onclick="$('#splash').fadeOut()" type="button">
<b>Got it.</b>
</button>
</div>
</div>
</div>
<div class='col-md-3'></div>
</div>
<div id='scenarioBuilder'class="col-md-4">
<div id="tsSection">
<div id="tsTitles">
<h2>Scenario Builder</h2>
<div class="form-group">
<label for="hrName">Supplier</label>
<div class="input-group">
<span class="input-group-addon" id="search-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" id="hrName" aria-describedby="search-addon">
</div>
</div>
<p style="display: inline" id='summarySentence'>
<!-- <b>Place: </b><div style="display: inline" id="hrName"></div><br> -->
<b>Residential Efficiency Goal: </b><div style="display: inline" id="targetValue"></div><br>
<b>Residential Use: </b> <div style="display: inline" id="usage"></div><br>
<b>Efficiency: </b><div style="display: inline" id="efficiency"></div><br>
<b>Data Quality: </b><div class="highlight" style="display: inline" id="uncertainty"></div>
</p>
</div>
<div id='tsContainer'>
<div id="ts"></div>
<div id="tsLegend"></div>
</div>
</div>
<div id="filters">
<div id="dateSelection">
<div class="form-group">
<label for="cal">Date Range</label>
<div class="input-group">
<span class="input-group-addon" id="cal-addon">
<i class="glyphicon glyphicon-calendar"></i>
<i class="glyphicon glyphicon-resize-horizontal"></i>
</span>
<input type="text" class="form-control" id="cal" aria-describedby="cal-addon" disabled>
</div>
</div>
<div class="form-group">
<div id='range_slider'></div>
</div>
</div>
<div id="coefficientSelection" class="row">
<div class="form-group col-md-6">
<label for="gpcd">GPCD</label>
<div class="input-group">
<span class="input-group-addon" id="gpcd-addon">
<i class="glyphicon glyphicon-tint"></i>
<i class="glyphicon glyphicon-user"></i>
</span>
<input type="text" class="form-control" id="gpcd" aria-describedby="gpcd-addon">
</div>
</div>
<div class="form-group col-md-6 noleftpadding">
<label for="pf">ET Adjustment Factor</label>
<div class="input-group">
<span class="input-group-addon" id="pf-addon">
<i class="glyphicon glyphicon-tint"></i>
<i class="glyphicon glyphicon-leaf"></i>
<!-- <i class="glyphicon glyphicon-tree-deciduous"></i> -->
</span>
<input type="text" class="form-control" id="pf" aria-describedby="pf-addon">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 nopadding">
<div id="summary"> <!--style='display:none'> -->
<h3>Big Picture</h3>
<!-- Not all districts -->
<!-- <b>SBx7-7 2020 Residential Efficiency Goal:</b> <div style="display: inline" id="sb77Target"></div><br> -->
<i><b class='highlight'>Useful first approximation</b> agencies over past 12 months</i><br>
<b>Total Residential Efficiency Goal:</b> <div style="display: inline" id="summaryTarget"></div><br>
<b>Total Residential Use:</b> <div style="display: inline" id="summaryUsage"></div>
</div>
<div id="map"></div>
</div>
</div>
</div>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src='js/libs/metricsgraphics.js'></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript" src="js/objects.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script>
window.onload = function() {
dataSetup(main);
};
</script>
</body>
</html>