-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
132 lines (119 loc) · 6.54 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Snow depth, forecast, temperature, and wind at the fabled stake on top of Mount Mansfield.">
<meta name="author" content="@mattparrilla">
<!-- Social Media Tags -->
<meta property="og:title" content="Mount Mansfield Snow Depth">
<meta property="og:description" content="Snow depth, forecast, temperature, and wind at the fabled stake on top of Mount Mansfield.">
<meta property="og:url" content="https://www.matthewparrilla.com/mansfield-stake/">
<meta property="og:image" content="https://www.matthewparrilla.com/mansfield-stake/static/mansfield_snow_plot.png">
<meta name="twitter:image" content="https://www.matthewparrilla.com/mansfield-stake/static/mansfield_snow_plot.png">
<meta name="twitter:title" content="Mount Mansfield Snow Depth">
<meta name="twitter:description" content="Snow depth, forecast, temperature, and wind at the fabled stake on top of Mount Mansfield.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="mattparrilla">
<link rel="shortcut icon" href="favicon.ico">
<link href="static/bootstrap.min.css" rel="stylesheet">
<link href="static/base.css" rel="stylesheet">
<title>Mount Mansfield Snow Station</title>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-31358980-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-31358980-1');
</script>
</head>
<body>
<div class="top-border"></div>
<div class="container">
<div class="row">
<div class="col-xs-12 title">
<h1>Mount Mansfield Snow Stake Depth</h1>
<p id="last_updated_par">Last reported by NWS on: <span id="last_updated"></span></p>
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<section>
<div id="legend_container">
<div id="legend">
<div id="currentSeason">
<h4>Latest snow depth</h4>
<div id="currentDepth" class="depth_value"></div>
</div>
<div id="comparisonSeason">
<h4 id="comparisonLabel"></h4>
<div id="comparisonDepth" class="depth_value"></div>
</div>
</div>
<svg id="snow_depth_chart" class="yearly-trend"></svg>
<div id="select-season-group" class="form-group">
<label for="select-season">Compare to a historical winter:</label>
<select id="select-season" class="form-control">
<option disabled selected value>Select a season</option>
</select>
</div>
</div>
</section>
<section>
<h2>NWS Expected Snowfall Map</h2>
<img class="img-responsive nws_predicted_snowfall"
src="https://www.weather.gov/images/btv/winter/StormTotalSnowWeb.jpg">
</section>
<section>
<h2>Latest NWS Forecast</h2>
<p class="forecast_location">Forecast for Mount Mansfield at 3,747 feet.</p>
<div id="nws_worded_forecast">Fetching forecast...</div>
</section>
</div>
</div>
<section class="maps_too">
<div class="map_img">
<a href="https://ramblemaps.com/green-mountain-ski-maps">
<img class="img-responsive"
src="https://static.ramblemaps.com/wood-mansfield-straight-1296.jpg"
srcset="
https://static.ramblemaps.com/wood-mansfield-straight-1296.jpg 1296w,
https://static.ramblemaps.com/wood-mansfield-straight-1118.jpg 1118w,
https://static.ramblemaps.com/wood-mansfield-straight-972.jpg 972w,
https://static.ramblemaps.com/wood-mansfield-straight-850.jpg 850w,
https://static.ramblemaps.com/wood-mansfield-straight-746.jpg 746w,
https://static.ramblemaps.com/wood-mansfield-straight-675.jpg 675w,
https://static.ramblemaps.com/wood-mansfield-straight-648.jpg 648w,
https://static.ramblemaps.com/wood-mansfield-straight-576.jpg 576w,
" sizes="(min-width: 620px) 50vw, 100vw" alt="wood_mounted Map">
</a>
</div>
<div class="map_maker">
<h2>My Business: Ramble Maps</h2>
<p>Ski-inspired wall maps of the Green Mountains (and beyond). Designed for folks who care about snow as much as you do.</p>
<p>Made by me.</p>
<button><a href="https://ramblemaps.com/green-mountain-ski-maps">See The Maps</a></button>
</div>
</section>
<div class="row">
<div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<section>
<div id="info_pane">
<h2>About the data</h2>
<p>The snow depth has been measured at a stake at 3,900 feet on Mount Mansfield nearly continuously since 1954. The reading is a single data point that can be used to give an idea of how the season is progressing in the high country.</p>
<p>The latest data is published by the NWS Burlington office in the <a href="https://forecast.weather.gov/product.php?site=BTV&issuedby=BTV&product=HYD&format=CI&version=1">Daily Hydrometeorological Report</a>. My website is updated within the hour of new data being published in the report.</p>
<p>In recent years there have been some gaps in NWS reporting that have been filled with skier reports.</p>
<p>Thanks to the many folks who have kept this record going over the years.</p>
<h2>Download Data</h2>
<p>If you'd like a copy of this data, you can find it <a href="https://s3.amazonaws.com/matthewparrilla.com/snowDepth.csv">here.</a></p>
<p>This is my copy of the data and includes values reported to me over COVID and cleaning of erroneous values. It is updated within the hour of a new depth report by the NWS.</p>
</div>
</section>
</div>
</div>
</div>
<script type="text/javascript" src="static/d3.min.js"></script>
<script type="text/javascript" src="static/script.js"></script>
</body>
</html>