gsl_realtime/index.html at main · vlahm/gsl_realtime · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Great Salt Lake South Arm Water Level</title>
	<script src="https://cdn.plot.ly/plotly-2.30.0.min.js"></script>
</head>

<body>
	<div id="plot" style="width:100%;height:400px;"></div>
	<script>
		fetch('data/10010000.json')
			.then(res => res.json())
			.then(data => {
				const dates = data.map(d => d.date);
				const values = data.map(d => parseFloat(d.value));

				const minY = Math.min(...values);
				const maxY = Math.max(...values);
				const yBuffer = (maxY - minY) * 0.05;

				const makeRectTrace = (y0, y1, color, opacity, name) => ({
					x: [dates[0], dates[dates.length - 1], dates[dates.length - 1], dates[0]],
					y: [y0, y0, y1, y1],
					fill: 'toself',
					fillcolor: color,
					opacity: opacity,
					line: { width: 0 },
					hoverinfo: 'skip',
					name: name,
					showlegend: true,
					type: 'scatter',
					mode: 'lines'
				});

				const legendTitle = {
					x: [dates[1000]],
					y: [minY - yBuffer - 9999],
					mode: 'markers',
					marker: {
						color: 'rgba(0,0,0,0)',
						size: 0,
						line: { width: 0 }
					},
					name: '<b>Elevation ranges*</b>',
					showlegend: true,
					hoverinfo: 'skip',
					legendrank: 0
				};

				const polygons = [
					legendTitle,
					makeRectTrace(4198, maxY + yBuffer, 'rgba(173, 216, 230, 1)', 0.5, 'Healthy'),
					makeRectTrace(4195, 4198, 'rgba(200, 200, 200, 1)', 0.1, 'Transitionary'),
					makeRectTrace(4192, 4195, 'rgba(255, 160, 160, 1)', 0.3, 'Adverse effects'),
					makeRectTrace(minY - yBuffer, 4192, 'rgba(255, 160, 160, 1)', 0.6, 'Serious adverse effects')
				];

				const trace = {
					x: dates,
					y: values,
					type: 'scatter',
					mode: 'lines',
					line: { color: 'black' },
					showlegend: false // hide line from legend
				};

				const layout = {
					margin: { l: 60, r: 20, t: 20, b: 20 },
					xaxis: { tickfont: { size: 14 } },
					yaxis: {
						title: 'Elevation (ft)',
						tickfont: { size: 14 },
						range: [minY - yBuffer, maxY + yBuffer]
					},
					legend: {
						itemclick: false,
						itemdoubleclick: false,
						bgcolor: 'rgba(255,255,255,0.8)',
						borderwidth: 0,
						font: { size: 12 }
					}
				};

				Plotly.newPlot('plot', [...polygons, trace], layout);
			})
			.catch(err => {
				document.getElementById('plot').innerText = "Failed to load data.";
				console.error(err);
			});
	</script>
	<!-- <p>
		*See the <a href=https://gardner.utah.edu/great-salt-lake-strike-team />Strike Team report</a>
	</p> -->
</body>

</html>