-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (91 loc) · 2.76 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
<!DOCTYPE html>
<html>
<head>
<title>Aurora Forecast</title>
<!-- Load Plotly.js from CDN -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="plot"></div>
<script>
// Load data from NOAA API
fetch("https://services.swpc.noaa.gov/json/ovation_aurora_latest.json")
.then(response => response.json())
.then(json_data => {
const forecastTime = json_data["Forecast Time"].replace('T', ' ').replace('Z', '');
const filteredData = json_data["coordinates"].filter(coord => coord[2] > 3);
const keys = json_data["Data Format"].slice(1, -1).split(", ");
const result = {};
keys.forEach((key, index) => {
result[key] = filteredData.map(arr => arr[index]);
});
const longitude = result["Longitude"];
const latitude = result["Latitude"];
const auroras = result["Aurora"];
var colorscale = [
[0, 'rgba(0,255,0,1)'],
[0.1, 'rgba(0,255,0,0.9)'],
[0.2, 'rgba(0,255,0,0.8)'],
[0.3, 'rgba(0,255,0,0.7)'],
[0.4, 'rgba(0,255,0,0.6)'],
[0.5, 'rgba(0,255,0,0.2)'],
[0.6, 'rgba(0,255,0,0.2)'],
[0.7, 'rgba(0,255,0,0.1)'],
[0.8, 'rgba(0,255,0,0.1)'],
[0.9, 'rgba(0,255,0,0)'],
[1, 'rgba(0,255,0,0)']
];
// Define the data to be plotted
let trace = {
type: 'scattergeo',
locationmode: 'ISO-3',
lon: longitude,
lat: latitude,
text: auroras,
mode: 'markers',
marker: {
size: 8,
opacity: 0.8,
reversescale: true,
autocolorscale: false,
colorscale: colorscale,
cmin: 0,
color: auroras,
cmax: Math.max(...auroras),
colorbar: {
title: 'Aurora'
}
}
};
// Define the layout for the plot
let layout = {
title: 'NOAA Space Weather Prediction Center<br> <b>Aurora Forecast</b><br> For '+ forecastTime + ' (UTC)',
geo: {
scope: 'world',
projection: {
type: 'orthographic',
rotation: {
lat: 84.84443138696777,
lng: 20.68328752472934
}
},
showland: true,
showocean: true,
showcoastlines: true,
showcountries: true,
landcolor: 'rgb(69, 69, 69)',
oceancolor: 'rgb(1, 53, 135)',
subunitcolor: 'rgb(217, 217, 217)',
countrycolor: 'rgb(217, 217, 217)',
countrywidth: 0.5,
subunitwidth: 0.5
}
};
// Create the plot
let data = [trace];
window.Plotly.newPlot('plot', data, layout);
});
</script>
</body>
</html>