...
| HTML |
|---|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
option:disabled { opacity: 0.4; }
</style>
<script>
$(document).ready(function(){
var plotsBaseURL='https://sites.ecmwf.int/cxep/c3s-seasonal-verification/'
var origins = [{key:'ecmwf.s51',label:'ECMWF SEAS5 (C3Sv5.1)'},{key:'meteo_france.s8',label:'MeteoFrance System8'},{key:'ukmo.s601',label:'UK MetOffice GloSea6 (system=601)'}, {key:'ukmo.s602',label:'UK MetOffice GloSea6 (system=602)'}, {key:'ukmo.s603',label:'UK MetOffice GloSea6 (system=603)'}, {key:'cmcc.s35',label:'CMCC SPSv3.5'}, {key:'dwd.s21',label:'DWD GCFS2.1'}, {key:'ncep.s2',label:'NCEP CFSv2'}, {key:'jma.s3',label:'JMA CPS3'}, {key:'eccc.s2',label:'ECCC CanCM4'}, {key:'eccc.s3',label:'ECCC GEM5-NEMO'}, {key:'C3Smm.s2022',label:'C3S multi-system (2022)'}, {key:'C3Smm.s2023',label:'C3S multi-system (2023)'}, {key:'C3Smm.s2024',label:'C3S multi-system (2024)'}];
// var startDates = [{key:'10',label:'October'}, {key:'11',label:'November'},{key:'12',label:'December'},];
var variableNames = [{key:'msl',label:'Mean sea-level pressure'}, {key:'tp',label:'Total precipitation'}, {key:'t2m',label:'2-metre temperature'}, {key:'sst',label:'Sea-surface temperature'}, {key:'sstind',label:'SST indices'}];
var scores =[{key:'corr',label:'Correlation'}, {key:'rps',label:'RPS'}, {key:'roc',label:'ROC'}];
var leadtimes =[{key:'1m.fcmonth1',label:'1m; lead0'},{key:'1m.fcmonth2',label:'1m; lead1'}, {key:'1m.fcmonth3',label:'1m; lead2'},{key:'1m.fcmonth4',label:'1m; lead3'},{key:'1m.fcmonth5',label:'1m; lead4'},{key:'1m.fcmonth6',label:'1m; lead5'},{key:'3m.fcmonth3',label:'3m; lead0'},{key:'3m.fcmonth4',label:'3m; lead1'},{key:'3m.fcmonth5',label:'3m; lead2'},{key:'3m.fcmonth6',label:'3m; lead3'} ];
var categories = [{key:'0', label:'Below lower tercile'}, {key:'1', label:'Normal'}, {key:'2', label:'Above upper tercile'}]
var sstindices = [{key:'NINO12', label:'NINO 1+2'}, {key:'NINO3', label:'NINO 3'}, {key:'NINO34', label:'NINO 3.4'}, {key:'NINO4', label:'NINO 4'}, {key:'IOD', label:'IOD'}, {key:'IND1', label:'IndOcW'}, {key:'IND2', label:'IndOcE'}]
var scores_by_cat = ['roc'];
// populate selects
var populate = function(vals,id,available){
$.each(vals, function(){
$('<option/>', {'value': this.key,'text': this.label}).appendTo('#'+id);
});
}
populate(origins,'sel_origin');
// populate(startDates,'sel_stdate');
populate(variableNames,'sel_varn');
populate(scores,'sel_score');
populate(leadtimes,'sel_leadt');
populate(categories,'sel_cat');
populate(sstindices,'sel_ind');
// populate start dates
function getMonthName(monthNumber) {
const date = new Date(2001, monthNumber - 1, 1);
//date.setMonth(monthNumber - 1);
return date.toLocaleString('en-GB', { month: 'long' });
}
for (var i = 1; i < 13; i++) {
//available = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
//if (available.includes(i)) {
// $('<option />', {'value': i,'text': getMonthName(i) }).appendTo('#sel_stdate');
//
//} else {
// $('<option />', {'value': i,'text': getMonthName(i), 'disabled':'disabled'}).appendTo('#sel_stdate');
//}
$('<option />', {'value': i,'text': getMonthName(i) }).appendTo('#sel_stdate');
}
//update functions
var updateImage = function(){
var origin = $('#sel_origin').val();
var stdate = $('#sel_stdate').val();
var str_stdate = String(stdate).padStart(2, '0');
var varn = $('#sel_varn').val();
var score = $('#sel_score').val();
var leadt = $('#sel_leadt').val();
var cat = $('#sel_cat').val();
var sstind = $('#sel_ind').val();
var imgbasename = origin.replace('.','_')+'_stmonth'+str_stdate+'_hindcast1993-2016_monthly.'+leadt+'.'+varn ;
if (scores_by_cat.includes(score)) {
$('#menu_cat').show();
$('#plot1').attr('src',plotsBaseURL+'/plots/stmonth'+str_stdate+'/'+imgbasename+'.category'+cat+'.'+score+'.png');
} else {
$('#menu_cat').hide();
$('#plot1').attr('src',plotsBaseURL+'/plots/stmonth'+str_stdate+'/'+imgbasename+'.'+score+'.png');
}
if(varn=='sstind') {
$('#menu_ind').show();
$('#plot2').show();
$('#sel_stdate').prop('disabled', 'disabled');
$('#sel_leadt').prop('disabled', 'disabled');
$('#plot1').attr('src',plotsBaseURL+'plots/sstindices/'+origin.replace('.','_')+'_'+sstind+'_'+score+'_startmonth.png');
$('#plot1').attr('width','50%');
$('#plot2').attr('src',plotsBaseURL+'plots/sstindices/'+origin.replace('.','_')+'_'+sstind+'_'+score+'_validmonth.png');
$('#plot2').attr('width','50%');
$("#sel_score option").each(function() {
if (this.value!='corr') {
this.disabled=true;
}
});
} else {
$('#menu_ind').hide();
$('#sel_stdate').prop('disabled', false);
$('#sel_leadt').prop('disabled', false);
$('#plot1').attr('width','100%');
$('#plot2').hide();
$("#sel_score option").each(function() {
this.disabled=false;
})
}
}
updateImage();
$('#selectors select').on('change',function(e){
updateImage();
})
})
</script>
<div id="selectors">
<label for="sel_origin">Forecast system: </label><select id="sel_origin"></select>
<br>
<label for="sel_stdate">Nominal start date: </label><select id="sel_stdate" ></select>
<label for="sel_leadt">Aggregation and leadtime: </label><select id="sel_leadt"></select>
<br>
<label for="sel_varn">Variable: </label><select id="sel_varn"></select>
<label for="sel_score">Score: </label><select id="sel_score"></select>
<div id="menu_cat" style="display: inline"><label for="sel_cat">Category: </label><select id="sel_cat"></select></div>
<div id="menu_ind" style="display: inline"><label for="sel_ind">SST index: </label><select id="sel_ind"></select></div> <br/>
</div>
<img id="plot1" width="100%"/><br/>
<img id="plot2" width="100%"/><br/> |
...