...
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/> |
...