-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
453 lines (440 loc) · 19.4 KB
/
Copy pathindex.html
File metadata and controls
453 lines (440 loc) · 19.4 KB
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
<!DOCTYPE html>
<!-- html start: __________________________________________________________ -->
<html>
<!-- head start:_________________________________________________________ -->
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1">
<link rel="icon"
href="./img/icon/icon.png"
sizes="192x192">
<!-- title: ___________________________________________________________ -->
<title id="title">fastclimate</title>
<!-- styles: __________________________________________________________ -->
<link rel="stylesheet"
type="text/css"
href="./css/site.css"
media="all">
<!-- scripts: _________________________________________________________ -->
<script src="js/pyodide/pyodide.js"
charset="utf-8">
</script>
<script src="js/plotly.js"
charset="utf-8">
</script>
<script src="js/zip.js"
charset="utf-8">
</script>
<script src="js/model.js"
charset="utf-8"
defer>
</script>
<!-- meta tags: _______________________________________________________ -->
<meta id="meta_title"
name="title"
content="fastclimate">
<meta id="meta_desc"
name="description"
content="simplified climate model">
<meta id="twit_card"
name="twitter:card"
content="summary">
<meta id="twit_title"
name="twitter:title"
content="fastclimate">
<meta id="twit_desc"
name="twitter:description"
content="simplified climate model">
<meta id="twit_img"
name="twitter:image"
content="https://cemac.github.io/fastclimate/img/icon/icon.png">
<meta id="og_type"
name="og:type"
content="website">
<meta id="og_title"
name="og:title"
content="fastclimate">
<meta id="og_desc"
name="og:description"
content="simplified climate model">
<meta id="og_img"
name="og:image"
content="https://cemac.github.io/fastclimate/img/icon/icon.png">
<!-- head end:___________________________________________________________ -->
</head>
<!-- body start: ________________________________________________________ -->
<body>
<!-- container start: _________________________________________________ -->
<div id="container"
class="container column">
<!-- header: ________________________________________________________ -->
<div id="header"
class="header row flex_justify flex_no_grow">
<img id="header_img"
class="header_image"
src='img/logo/logo.png'>
<div id="header_text"
class="header_text">
<span id="title_a">fastclimate</span>
</div>
<!-- navigation links: ____________________________________________ -->
<div id="header_navigation"
class="header_navigation">
<span id="link_home">Home</span> |
<a href="./about/"><span id="link_about">About</span></a>
</div>
</div>
<!-- content container: _____________________________________________ -->
<div id="content"
class="content row">
<!-- content: _____________________________________________________ -->
<div id="content_content"
class="content_content column">
<!-- model options: _____________________________________________ -->
<h3 class="content_options_header">Model Parameters</h3>
<div id="content_options"
class="content_options content_text column">
<div id="content_load"
class="content_load row">
<input id="content_load_input"
class="content_load_input"
type="file"
accept=".json,application/json">
<label id="content_load_button"
class="content_load_button"
for="content_load_input"
title="Load parameters from JSON file">
load parameters
</label>
</div>
<div id="content_load_text"
class="content_load_text row">
<span id="content_load_info"
class="content_load_info"></span>
<span id="content_load_error"
class="content_load_error"></span>
</div>
</div>
<!-- run model button: __________________________________________ -->
<div id="content_run"
class="content_run row">
<button id="content_run_button"
class="content_run_button">
run model
</button>
<img id="content_model_spinner"
class="content_model_spinner"
src="img/home/spinner.gif">
</div>
<!-- plots: ______________________________________________________ -->
<div id="content_plots"
class="content_plots">
<div class="row_wrap flex_center">
<div class="content_plot_container column">
<div id="swtop_plot"
class="content_plot flex_grow"></div>
<div id="swtop_plot_text"
class="content_plot_text flex_grow">
<b>Figure 1.</b> Mean Solar Radiation at the top of the
atmosphere as a function of time of year (months shown on
X-axis) and latitude (Y-axis). Note color scale to the right
of the plot.
</div>
</div>
</div>
<div class="row_wrap flex_start">
<div class="content_plot_container column">
<div id="TTsavg_plot"
class="content_plot flex_grow">
</div>
<div id="TTsavg_plot_text"
class="content_plot_text flex_grow">
<b>Figure 2.</b> Mean Surface Temperature as a function of
time of year and latitude
(<span class="label_this">this run</span>).
</div>
</div>
<div class="content_plot_container column">
<div id="TTsavg_diff_plot"
class="content_plot flex_grow">
</div>
<div id="TTsavg_diff_plot_text"
class="content_plot_text flex_grow">
<b>Figure 3.</b> Mean Surface Temperature Difference as a
function of time of year and latitude. For this and the
following plots, "difference" is the value of the current
model run (<span class="label_this">this run</span>) minus
the value of the
<span class="label_standard">standard run</span>.
</div>
</div>
</div>
<div class="row_wrap flex_start">
<div class="content_plot_container column">
<div id="Hi_plot"
class="content_plot flex_grow">
</div>
<div id="Hi_plot_text"
class="content_plot_text flex_grow">
<b>Figure 4.</b> Mean Sea Ice Thickness as a function of time
of year and latitude
(<span class="label_this">this run</span>).
</div>
</div>
<div class="content_plot_container column">
<div id="Hi_diff_plot"
class="content_plot flex_grow">
</div>
<div id="Hi_diff_plot_text"
class="content_plot_text flex_grow">
<b>Figure 5.</b> Mean Sea Ice Thickness Difference as a
function of time of year and latitude.
</div>
</div>
</div>
<div class="row_wrap flex_start">
<div class="content_plot_container column">
<div id="TTsavgsp_plot"
class="content_plot flex_grow">
</div>
<div id="TTsavgsp_plot_text"
class="content_plot_text flex_grow">
<b>Figure 6.</b> Mean Surface Temperature time series (top)
and difference time series (bottom) for the 80°S to 90°S
latitude band. For this and the following figures, the
<span class="label_this">red</span> line on the top panel
shows this run; the <span class="label_standard">blue</span>
line shows the standard case results. The difference plot is
this run's results minus the standard run's results. The
X-axis ("Year Day") is the number of days from the start of
the first plot year. The <tt>plotstart</tt> +
<tt>plotyears</tt> years of the model run are shown.
(<tt>plotstarts</tt> and <tt>plotyears</tt> are model input
parameters)
</div>
</div>
<div class="content_plot_container column">
<div id="TTsavgnp_plot"
class="content_plot flex_grow">
</div>
<div id="TTsavgnp_plot_text"
class="content_plot_text flex_grow">
<b>Figure 7.</b> Average Surface Temperature time series
(top) and difference time series (bottom) for the 80°N to
90°N latitude band.
</div>
</div>
</div>
<div class="row_wrap flex_start">
<div class="content_plot_container column">
<div id="TTsavg65s_plot"
class="content_plot flex_grow">
</div>
<div id="TTsavg65s_plot_text"
class="content_plot_text flex_grow">
<b>Figure 8.</b> Mean Surface Temperature time series (top)
and difference time series plot (bottom) for the 60°S to 70°S
latitude band. For this and following figures, the
temperatures shown are areal-weighted averages of the surface
temperatures over land and the surface temperatures over
ocean.
</div>
</div>
<div class="content_plot_container column">
<div id="TTsavg65n_plot"
class="content_plot flex_grow">
</div>
<div id="TTsavg65n_plot_text"
class="content_plot_text flex_grow">
<b>Figure 9.</b> Average Surface Temperature time series
(top) and difference plot (bottom) for the 60°N to 70°N
latitude band
</div>
</div>
</div>
<div class="row_wrap flex_center">
<div class="content_plot_container column">
<div id="TTsavg5n_plot"
class="content_plot flex_grow">
</div>
<div id="TTsavg5n_plot_text"
class="content_plot_text flex_grow">
<b>Figure 10.</b> Mean Surface Temperature time series (top)
and difference time series plot (bottom) for the equator to
10°N latitude band.
</div>
</div>
</div>
<div class="row_wrap flex_start">
<div class="content_plot_container column">
<div id="His_plot"
class="content_plot flex_grow">
</div>
<div id="His_plot_text"
class="content_plot_text flex_grow">
<b>Figure 11.</b> Mean Sea Ice Thickness time series (top)
and difference time series plot (bottom) for various southern
hemisphere latitude bands.
<span class="label_Hi1">Blue</span>,
<span class="label_Hi2">cyan</span>,
<span class="label_Hi3">green</span>, and
<span class="label_Hi4">magenta</span> lines represent the
10° latitude bands centered on
<span class="label_Hi1">75°S</span>,
<span class="label_Hi2">65°S</span>,
<span class="label_Hi3">55°S</span>, and
<span class="label_Hi4">45°S</span>, respectively. Latitude
bands with no sea ice are not plotted. Solid lines are for
this run, dashed lines represent the standard case results.
The difference plot is this run's results minus the standard
case run's results.
</div>
</div>
<div class="content_plot_container column">
<div id="Hin_plot"
class="content_plot flex_grow">
</div>
<div id="Hin_plot_text"
class="content_plot_text flex_grow">
<b>Figure 12.</b> Mean Sea Ice Thickness time series (top)
and difference time series plot (bottom) for various northern
hemisphere latitude bands.
<span class="label_Hi1">Blue</span>,
<span class="label_Hi2">cyan</span>,
<span class="label_Hi3">green</span>, and
<span class="label_Hi4">magenta</span> lines represent the
10° latitude bands centered on
<span class="label_Hi1">85°N</span>,
<span class="label_Hi2">75°N</span>,
<span class="label_Hi3">65°N</span>, and
<span class="label_Hi4">55°N</span>, respectively; solid
lines are this run, dashed lines the standard case. Latitude
bands with no sea ice are not plotted.
</div>
</div>
</div>
<div class="row_wrap flex_start">
<div class="content_plot_container column">
<div id="TTsavgmean_plot"
class="content_plot flex_grow">
</div>
<div id="TTsavg_mean_plot_text"
class="content_plot_text flex_grow">
<b>Figure 13.</b> Mean Surface Temperature averaged over the
last year of the model run (Y-axis) for various latitude
bands (X-axis).
</div>
</div>
<div class="content_plot_container column">
<div id="TTsavglat_plot"
class="content_plot flex_grow">
</div>
<div id="TTsavglat_plot_text"
class="content_plot_text flex_grow">
<b>Figure 14.</b> Mean zonal surface temperatures for
<span class="label_this">this run</span> and the
<span class="label_standard">standard run</span> for the
<tt>plotstart</tt> + <tt>plotyears</tt> years of the run.
</div>
</div>
</div>
<div class="row_wrap flex_start">
<div class="content_plot_container column">
<div id="TTsavgb_plot"
class="content_plot flex_grow">
</div>
<div id="TTsavgb_plot_text"
class="content_plot_text flex_grow">
<b>Figure 15.</b> Surface temperatures for
<span class="label_this">this run</span>.
</div>
</div>
<div class="content_plot_container column">
<div id="TTsavgb_diff_plot"
class="content_plot flex_grow">
</div>
<div id="TTsavgb_diff_plot_text"
class="content_plot_text flex_grow">
<b>Figure 16.</b> Changes in surface temperature with
latitude (<span class="label_this">this run</span> -
<span class="label_standard">standard run</span>) for the
<tt>plotstart</tt> + <tt>plotyears</tt> years of the run.
</div>
</div>
</div>
<div class="row_wrap flex_start">
<div class="content_plot_container column">
<div id="Hib_plot"
class="content_plot flex_grow">
</div>
<div id="Hib_plot_text"
class="content_plot_text flex_grow">
<b>Figure 17.</b> Ice thickness for
<span class="label_this">this run</span>.
</div>
</div>
<div class="content_plot_container column">
<div id="Hib_diff_plot"
class="content_plot flex_grow">
</div>
<div id="Hib_diff_plot_text"
class="content_plot_text flex_grow">
<b>Figure 18.</b> Changes in ice thickness with
latitude (<span class="label_this">this run</span> -
<span class="label_standard">standard run</span>) for the
<tt>plotstart</tt> + <tt>plotyears</tt> years of the run.
</div>
</div>
</div>
<div id="save_plots_row"
class="row_wrap flex_start">
<div class="content_plot_container column">
<div id="content_save_plots"
class="content_save row">
<button id="content_save_plots_button"
class="content_save_button"
title="Save plots in png format to zip file">
save plots
</button>
<img id="content_save_plots_spinner"
class="content_model_spinner"
src="img/home/spinner.gif">
</div>
</div>
</div>
<div id="model_params_row"
class="row_wrap flex_start">
<div class="content_plot_container column">
<div id="model_params_text"
class="content_plot_text flex_grow">
The model parameters for this run are:
</div>
<div id="model_params_params"
class="content_plot_text flex_grow">
</div>
<div id="content_save_options"
class="content_save row">
<button id="content_save_options_button"
class="content_save_button"
title="Save parameters to JSON file">
save parameters
</button>
</div>
</div>
</div>
</div>
<!-- content end: _________________________________________________ -->
</div>
</div>
<!-- footer: ________________________________________________________ -->
<div id="footer"
class="footer row_wrap flex_end flex_no_grow">
</div>
<!-- container end: ___________________________________________________ -->
</div>
<!-- body end: __________________________________________________________ -->
</body>
<!-- html end: ____________________________________________________________ -->
</html>