-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
147 lines (135 loc) · 6.7 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Supply Explorer</title>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src='js/metricsgraphics.js'></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/config.js"></script>
<script src="js/script.js"></script>
<script src="js/system_wide_picture.js"></script>
<script src="js/bar.js"></script>
<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.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/base-jquery-ui.css">
<link rel="stylesheet" href="css/metricsgraphics.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-header col-md-4">
<a class="navbar navbar-brand" >CaDC Supply Explorer v0.2</a>
</span>
<span class="nav navbar-nav col-md-6">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a class="dropdown-toggle" id="downloadDrop" href="#" role="button" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-cloud-download white"></i> Download Data <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://california-data-collaborative.carto.com/api/v2/sql?q=SELECT%20*%20FROM%20reservoir_reading_extract&format=CSV" target="_blank" data-toggle="collapse" data-target=".navbar-collapse.in"><i class="fa fa-download"></i> Reservoir Levels</a></li>
</ul>
</li>
</ul>
</span>
<span class="navbar-header col-md-2">
<a id='argoBrand' class="navbar-brand" href="http://argolabs.org">
Powered by ARGO
</a>
</span>
</nav>
<div id='content' class="container-fluid">
<div class="row">
<div id='detailPanel' class="col-md-4">
<h3>Individual Supply Source</h3>
<div class="form-group">
<label for="supplyName">Source Name</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="supplyName" aria-describedby="search-addon">
</div>
</div>
<!-- <label for="barContainer">Selected Storage</label> -->
<div id='barContainer' class="form-group"></div>
<div class="form-group">
<div class="ts">
<div id="ts_chart"class="chart"></div>
<div id="ts_legend" class="chart"></div>
</div>
</div>
<div class="form-group">
<div id='time_slider'></div>
</div>
<h3>State Reservoir System</h3>
<!-- <div class="form-group">
<label for="supplyName">System Name</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="supplyName" aria-describedby="search-addon">
</div>
</div> -->
<div class="form-group">
<div class="ts">
<div id="ground_summary_ts" class='chart'></div>
<div id="ground_summary_ts_legend" class="chart"></div>
</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">
About This Project
</a>
</h4>
</div>
<div id="contextCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="contextHeading">
<div class="panel-body">
<p>The CaDC Supply Explorer visualizes storage levels for all reservoirs in California over the last 5 years using data from the <a href="https://cdec.water.ca.gov/reservoir.html">California Data Exchange Center</a>, operated by the Department of Water Resources.</p>
<p><b>Instructions</b></p>
<ul>
<li>
Click on the time slider at the bottom of the map to play an animation of reservoir levels over the last 5 years. Yellow bubbles indicate total reservoir capacities and blue bubbles indicate reservoir storages. <br><br>
</li>
<li>
Click reservoirs to explore water storage over time, including daily historical averages for each reservoir. <br><br>
</li>
<li>
Click the calendar icon above to select a date and see total statewide storage on that date. <br> <br>
</li>
<li>
To download source data, use the <i>Download Data</i> menu at the top of the tool. <br><br>
</li>
</ul>
<p>This tool and underlying data data infrastructure has been designed, developed and deployed by <a href="argolabs.org">ARGO</a> in collaboration with Mike Amodeo, Vishwajeet Shelar, and Dongjie Fan as part of an agile feasibility study of the Dodd "Open and Transparent Water Data Act."</p>
</div>
</div>
</div>
</div>
</div>
<div id='mapPanel' class="col-md-8">
<!-- <div id="summary" class="col-md-4">
<h2>Systemwide Details</h2>
<div class="form-group">
<div id="snowpack_summary_ts" class='ts'></div>
</div>
<div class="form-group">
<div id="ground_summary_ts" class='ts'></div>
</div>
</div> -->
<div id="map"></div>
</div>
</div>
</div>
<script>
window.onload = main;
</script>
</body>
</html>