-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (137 loc) · 6.42 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Water in the West - Streamflow in California Rivers</title>
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/combo?2.8.2r1/build/fonts/fonts-min.css&2.8.2r1/build/reset/reset-min.css&2.8.2r1/build/grids/grids-min.css&2.8.2r1/build/base/base-min.css&2.8.2r1/build/slider/assets/skins/sam/slider.css&2.8.2r1/build/logger/assets/skins/sam/logger.css"
/>
<style type="text/css">
/* <![CDATA[ */
#slider-bg {
background:url(http://yui.yahooapis.com/2.8.2r1/build/slider/assets/bg-fader.gif) 5px 0 no-repeat;
width: 220px;
height: 30px;
left: 20;
}
#slider-thumb {
left:20;
}
#tooltip {
border:1px #ffffff solid;
height: 5em;
width:300px;
text-align: left;
margin: 1em;
padding: 1em;
background-color:#ffffff;
border-style:inset;
}
#compares {
text-align: right;
font-style: italic;
}
#fleft {
text-align: left;
}
#fright {
text-align: right;
}
/* ]]> */
</style>
</head>
<body>
<!-- Layout CSS is from YUI - useful tool at http://developer.yahoo.com/yui/grids/builder/ -->
<div id="doc3" class="yui-t7">
<div id="hd" role="banner"><h1>Streamflow in Major California Rivers: A comparison over time.</h1>
This map shows the relative streamflows observed by sensors placed
at various rivers in California over a large time period. The size
of the stream shown on the map is proportional to the cube-root of
the daily, mean streamflow observed and is not related directly to
the width or physical size of the river at that point.<br /><br />
</div>
<div id="bd" role="main">
<div class="yui-g">
<div class="yui-u first">
<div id="slider-bg" class="yui-h-slider" tabindex="-1" title="Slider">
<div id="slider-thumb" class="yui-slider-thumb"><img src="http://yui.yahooapis.com/2.8.2r1/build/slider/assets/thumb-n.gif" alt="Change Dates"/></div>
</div>
<br />
<!-- <p>Pixel offset from start: <span id="d_offset"></span></p>
<p>Calculated Value: <span id="d_val"></span></p> -->
Date: <span id="d_date"></span>
</div>
<div id="compares" class="yui-u">
Amazon River, Average Streamflow - 12,950,000 cu ft/s <br />
Indus River flood of 2010 in Pakistan, Peak Streamflow - 1,000,000 cu ft/s <br />
San Joaquin River, Peak Streamflow - 483,000 cu ft/s <br />
</div>
</div>
<div class="yui-g">
<div id="rivers" style="width: inherit; height: 740px; background:url(brown-board.jpg)">
</div>
</div>
<div class="yui-g">
<div id="fleft" class="yui-u first">
Source: USGS Water data
<br />
<br />
<i>
<b>Discharge</b> is the volume of water that passes a given location (natural channel) within a given period of time. Usually expressed in cubic feet per second (cu ft/s). <b>Streamflow</b> is discharge associated with natural water channels.
</i>
</div>
<div id="fright" class="yui-u">
<br />
By <a href="http://www.stanford.edu/~nandu">Nandu Jayakumar</a>, Yinfeng Qin & Geoff Mcghee <br />
<a href="http://west.stanford.edu">Bill Lane Center for the West, Stanford University</a> <br />
(<a href="http://www.stanford.edu/~nandu/rivers/index.html">
Live Version,</a>
<a href="http://github.com/junkumar/lane">Source Code </a>)
<div id="footerLicense" style="align:right;">
<p class="box">
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
<img
src="http://i.creativecommons.org/l/by/3.0/88x31.png"
alt="Creative Commons License"
style="border:none;" height="31" width="88" />
</a>
</p>
</div>
</div>
</div>
</div><!-- bd -->
<div id="ft" role="contentinfo"></div>
</div><!-- doc3 -->
<noscript>
<b>JavaScript must be enabled in order for you to use this web application or Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.2r1/build/yahoo/yahoo-debug.js&2.8.2r1/build/dom/dom-debug.js&2.8.2r1/build/event/event-debug.js&2.8.2r1/build/dragdrop/dragdrop-debug.js&2.8.2r1/build/slider/slider-debug.js&2.8.2r1/build/logger/logger-debug.js"></script>
<!-- www.stanford.edu/~nandu/water.html -->
<script src="http://maps.google.com/maps?file=api&v=2.285&sensor=false&key=ABQIAAAA2jOsdies-rRwCk5Dn07uHRS8pralDnmg3--Kj6KrNGPTTv5uXBSjVa3h4i5XG4L0PB4giotr4BHlbQ" type="text/javascript"></script>
<!-- local water.html
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA2jOsdies-rRwCk5Dn07uHRQWQJbVXpvlj0qRyL9wDQ7bgIUSahRa_1zotstdj8qAo03KlaDCdIPoMw" type="text/javascript"></script>
-->
<!-- for special background tiles -->
<script src="http://js.mapbox.com/g/2/mapbox.js"
type="text/javascript"></script>
<script type="text/javascript" src="data.js"></script>
<!-- Need to load google maps api js before interact.js !-->
<script type="text/javascript" src="interact.js"></script>
<!-- main javascript - separated out to make editing easy -->
<script type="text/javascript" src="water.js"></script>
</body>
</html>
<!--
TODO for submission
- Add a legend for river colors
- Add switch between flow versus dots for indicating data scale
- valueType Chooser
How do you encode the direction of the river ? Alpha ?
- distortion due to occlusion - overlaps - hence a scale slider
- sort largest to smallest to show detail
- also can use transparency !!
!-->