Page on monthly anomalies in WebGL

Moyhu has had for about four years a maintained page with a WebGL display of temperature anomalies over each month since 1900. The anomalies come from TempLS, and use a 1961-90 base period. It is a color-shaded plot, in which the color is correct at each measurement point, and interpolated for the rest of the triangular mesh. The data used is unadjusted GHCN V3 and ERSST V4. The plot is the best source of detailed information about the current month in its early days.

I have been upgrading these pages (trends described here) to use the new versions of the WebGL facility. That has involved also upgrading the facility, and I'll show the new anomaly plot below the jump. I'll leave the old page in place for a few days.

The main upgrade was to enable use of on demand loading of data via XMLHTTPRequest, since it would take far to long to download data for all months. That involved creating selection menus (green block on right). To incorporate this in the facility, I have introduced user functions in the user file, needed to link the menus to URLs for the data. I have taken that further to allow user functions for the color scale and formatting of responses to click queries (you can display data for nodes in the mesh). It's all optional - defaults work as before.

So the plot is below the jump. You can select a year at a time, and the months will show as radio button choices (fast response). I'll describe the new facilities after the plot below.

Usual setup - the globe is a trackball, right mouse vertically to zoom, click to query station data. Checkboxes let you hide mesh lines, map etc.

New facilities

To activate the selection menus, you need to define in the user file an object U.sel and a function U.get(). In this example, that is done thus:

 U.sel={s:[[],[]],u:[0,[]]}
 U.get=function(){
  var i,j,k,s,u,v=U.sel;
  s=v.s;u=v.u;
  u[0]="https://s3-us-west-1.amazonaws.com/www.moyhu.org/pages/GHCN/dat/%s.js"
  for(i=11;i>=0;i--){
   k=i≤11?10:8
   s[0][i]=(1900+10*i)+"-"+(1899+k+10*i)
   s[1][i]=[];u[1][i]=[];
   for(j=0;j≤k;j++){
    u[1][i][j]="ghcn"+(1900+10*i+j)
    s[1][i][j]=""+(1900+10*i+j)
   }
  }
 }

In U.sel, s are the labels and the second component of u is the array of URLs. The first component is a stem string for the URLs, with a %s where the strings in U[1] will be substituted. If s has 1 component, there will be just one menu list; if 2, there are 2, and the second is dependent on the choice of the first. So then s[1] and u[1] must be matrices, with a row for each choice in the first menu. You'll see that Javascript here is almost the same as C, except that variables are declared just as var..., rather than with types.

Each URL points to a .js file which has the same form as a user file

function MoyDat(p,U){
}

But this time, no new objects are declared - just new properties for existing objects. There is still the master user file which makes those declarations, and which can include all information that is common to all choices. When you select menu choices and press the Fetch button, the supplementary file will be downloaded and the variant choices there become operative.

There is also a function for the query information

 U.label=function(p,k){
  var u=p.vals[k],v;
  return p.tags[k]+"<br>Anomaly "+u+"<br>Temp "+(u+p.offsets[k]).toFixed(2)
 }

Arguments passed are p for the object queried (here "mesh") and k for the node number. In this case, p.vals is the anomaly information used for shading, but I show the absolute temperature as well. To do this, I made a new property on the main user file - p.offsets. This is a multi-valued array (vector for each month) of the anomaly base values for each node.

Since there are now multiple choices, I have made it show a string, bottom left, showing what is current. If you append this string to the current URL, when called it will start with thise choices made. You can also put that into the use file (no ?) to make it start in a particular configuration. The first element is radio button, second and third the selection menus.