-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·118 lines (97 loc) · 5.75 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
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Supplementary Material: Tellman et al. 2018</title>
<meta name="viewport" content="width=1380" />
<script src="lib/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="lib/underscore-min.js"></script>
<script type="text/javascript" src="//use.typekit.net/vto0frl.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<link rel="stylesheet" type="text/css" href="css/roi7.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
</head>
<body>
<div id="header">
<h1><img src="img/graph_icon20.png"/> Supplementary Material: Tellman et al. 2018 <span id="proj1" class="projectName"></span>
<span id="proj2" class="projectDropdown2"></span></h1>
</div> <!-- End header -->
<div id="dashboard">
<div class="roiMetrics widget">
<div id="population" class="dotGroup"> <h2>Population</h2> </div>
<div id="sourceWater" class="dotGroup"> <h2>Urban Water Sources</h2> </div>
<div id="qualityRisk" class="dotGroup"> <h2>Water Quality Risk</h2> </div>
<div id="qualityOpportunity" class="dotGroup"> <h2>Source Watershed Conservation Solutions</h2>
<div id="roi" class="dotGroup"></div>
<p>The following metrics explore the potential to improve water quality through specific conservation activities. The values represent the number of hectares needed to achieve a 10% improvement in water quality. Lower values (displayed on the right) represent greater opportunity because a smaller area is needed to achieve the targeted change.</p> </div>
<h2>Flood Mitigation</h2>
<h4>Riverine Flood Mitigation</h4>
<div id="riverine-flood" class="dotGroup"></div>
<h5>Watershed Response Sensitivity <div id="wrs" class="tooltip" style="opacity: 0;">Yeah</div></h5>
<p>Five physical watershed characteristics that represent a watershed’s natural propensity to respond to investments in natural infrastructure.</p>
<div id="response" class="dotGroup"> </div>
<h5>Scope of Intervention</h5>
<p>Six indicators that represent availability of restoration and preservation activities that mitigate flooding</p>
<div id="intervention-scope" class="dotGroup"></div>
<h4>Stormwater Flood Mitigation</h4>
<div id="stormwater-flood" class="dotGroup"> </div>
<h5>Stormwater Flood Mitigation Opportunity Index</h5>
<p>This represents an index comprised of five indicators (comprising both stormwater risk and mitigation opportunity) to assess where natural infrastructure could be most readily sited and effective in mitigating stormwater flooding for each city.</p>
<h6>Stormwater Flood Risk</h6>
<div id="stormwater-flood-risk" class="dotGroup"> </div>
<h6>Effectiveness of Green Infrastructure Interventions</h6>
<div id="green-infrastructure" class="dotGroup"> </div>
<div id="references">
<p><strong>References:</strong> Please refer to the Works Cited section in the main text</p>
</div>
</div> <!-- End roiMetrics widget -->
<div class="projectInfo widget">
<div id="map" class="">
<h2>Regional Comparison</h2>
<p><select id="mapdotsize" class="map dropdown"> </select> </p>
</div>
<div id="chart" class="">
<h2>Explore Metrics</h2>
<p class="description">Select variables using dropdowns below
to plot cities. Dotted lines represent median values for
each variable. </p>
<div id="scatterplot"> </div>
<div id="controls">
<p>X-Axis: <select id="xaxis" class="scatterplot dropdown"> </select> </p>
<p>Y-Axis: <select id="yaxis" class="scatterplot dropdown"> </select> </p>
<!-- <p>Dot Size: Costs <select id="dotsize" class="scatterplot dropdown"> </select> </p> -->
</div>
</div> <!-- End scatterplot widget -->
</div> <!-- End projectInfo column -->
<div id="dashboard_meta">
<h2>Dashboard Options</h2>
<p>To highlight a single city, click a dot on one of the graphs or map, or select from the dropdown below. To compare two cities, select with the dropdowns. A third city can be displayed by clicking on its dot in the map.</p>
<div class="dropdown">
<!-- <span class="legend proj1"></span> -->
<p><img src="img/dot_orange.png"/><select id="projectDropdown" class="projDropdown"></select></p>
<!-- <span class="legend proj2"></span> -->
<p><img src="img/dot_blue.png"/><select id="projectDropdown2" class="projDropdown2"></select></p>
</div>
<h2>Publication</h2>
<p>Tellman B, McDonald RI, Goldstein JH, Vogl AL, Flörke M, Shemie D, et al. (2018) Opportunities for natural infrastructure to improve urban water security in Latin America. PLoS ONE 13(12): e0209470. <a href="https://doi.org/10.1371/journal.pone.0209470">https://doi.org/10.1371/journal.pone.0209470</a></p>
<!--
<form action="">
<input type="checkbox" name="dataControl" value="highlight" id="highlight_checkbox">Highlight LACC Priority Cities<br>
</form>
-->
<p><a href="#" id="resetSelection">Reset Selection</a></p>
</div> <!-- End dashboard_meta -->
</div> <!-- End dashboard -->
<script type="text/javascript" src="roi.map.variabledots.ws.js"></script>
<script type="text/javascript" src="app/roi.chart.dotplot.simple.refactor.js"></script>
<!-- <script type="text/javascript" src="../app/roi.chart.dotplot.multi.js"></script> -->
<script type="text/javascript" src="app/roi.chart.scatterplot.js"></script>
<script type="text/javascript" src="app/roi.ui.js"></script>
<script type="text/javascript" src="app/roi.helpers.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="init.js"></script>
<div style="clear: both;"></div>
<div id="footer">
</body>
</html>