A new gallery of interactive graphics at Moyhu.

There was an old page, linked to right, on interactive graphics at Moyhu. I have replaced it with a new gallery, which is much more comprehensive. Maybe too comprehensive - I have tried to include every instance to end 2017. It is a tableau of images, and I have placed at the top what I think is a representative selection. These are marked with red borders. Each cell has a passive image, a date, a link which will take you to the original post or page containing the graphic, and a button imploring you to Try it!. This takes you to a rearranged version of the original post with the graphic at the head; it is an active version of what you see in the image.

The radio buttons on the left allow you to choose categories, generally based on the technology used. They are explained below the tableau, and I will expand on them here.

In this post, I want to review the overall progress of interactive graphics here. Interactive requires at least the use of JavaScript, so that pressing buttons, dragging with the mouse etc will modify what you see. This can be augmented with two main technologies - the drawing canvas, which was formally introduced with HTML 5 in 2014, but usable earlier, and WebGL, which is based on the old Silicon Graphics GL of about thirty years ago, which became OpenGL and is now built into browsers as WebGL.

It is important sometimes to remember that Javascript activity is embedded in the HTML scripts that a browser downloads, and is entirely implemented on the users machine. There is no Moyhu server support. This means all the data is downloaded too. There are some security restrictions on this privilege, which adds to the interest of Javascript programming. An underlying technology is the programming language R. I typically sort out the data for plotting or whatever at this level, and the output is a Javascript file often defining masses of data. Javasript itself does not have i/o; you have to express input as code.

Much of my experimenting with graphics has been motivated by a wish to present data plotted on a sphere, to avoid projection distortion. JS makes it possible to do this and allow the user to view the sphere from various directions.

I have recently revamped the Moyhu topic index, and some of the toipics give a more comprehensive list of links.

Javascript and interactivity

My first active graphic was part of a discussion on how to make spaghetti graphs more readable. My first idea was an animated GIF, which overlaid black outlines of each strand in sequence. But a reader TheFordPrefect recommended Javascript and sent me an example made by Dreamweaver.So I learnt some JS, and made a plot of proxy reconstructions here. There was a legend where you could roll the cursor over a name in the legend, and a black overlay of the strand would appear. This is the basic idea that I have set as a separate category - active viewers - described further below.

A common use of JS and buttons was simply to compress information. A lot of images could be accessed at one location in the page, with a choosing mechanism. Alternatively a huge number of links can be sorted into manageable pages with button clicks.

JS Globe

That set me up for the first presentation of a globe plot, as here. In R I made 2D projections from a number of viewpoints of a shaded plot of some variable, usually temperature. The viewpoints were usually from either the 8 corners of a cube containing the sphere, or the 6 face centres. There was a panel of squares you could click to switch views. A lot of my JS graphics involves locating a click point and responding in some way. Dragging is a variant of this.

Google Earth and KML/KMZ

This was rather a dead end, but I did quite a lot of things. KML is a control language for Google Earth. Here is a typical application. I haven't shown the graphics here because, well, they aren't really mine. GE is good for detailed location, which is relevant to individual stations, but not to temperature plots etc. I found that the control capabilities, based on folders were rather limited, so I switched to Google Maps, which offers JS control.

Google Maps

The general idea and working environment is described here. GM provides an app which allows you to embed a GM in your page, but gives ample facilities to control it with JS. Again the main use is for showing land stations, where the lat/lon are fairly precisely known. I typically select subsets of the stations colored according to some criterion. Clicking on them brings up information including the name and often links and history. The selection table is on the right, and can allow quite complex logic. Recent cases show the total in each color. There is, for example, a maintained page which is described here.

Active viewers

This is just a subset of JS-active graphics, in which a spaghetti plot is shown, with a large range of strands, usually proxies. More use of JS is made in that when a strand is marked, a table of information os shown, and also a marker shows where it is on a map. A typical example is here.

Trend viewers

This is another JS subset. A colorful triangle (prepared in R)is shown in which each dot represents the trend over some period of months. There is a coupled time series graph on the right, with two markers representing beginning and end of trend. You can choose a period either by clicking on the triangle or by moving the markers directly. For each chosen period, numerical data is displayed. Buttons allow you to choose the overall display period, the dataset (from one of many), and possibly a different kind of display which says something about the significance or confidence intervals. There is a maintained page here.

XMLHTTPrequest

Normally with JS you have to load the data in advance, which is a nuisance if you want to accommodate a range of user wishes. XMLHTTPrequest is a workaround that lets you download JS files when asked by user. There are security restrictions. But it vastly increases the amount of data that can be supplied. It isn't itself graphics technology, but it enables some of my larger apps

HTML 5

HTML 5, when it came out, included a lot of new elements, but the one particularly useful to me was the canvas element. All the graphics described so far had to be pre-drawn using R and supplied as images. With the canvas, we can draw from numerical data, in response to user input. Further, there is a clunky but not bad capability for shading triangles in response to vertex values.

One liberation is that graphs don't any longer have to have a fixed range of x or y. The user can zoom or extend, if the numerical information is there. My first big use of this was in the climate plotter. This is still kept as a page, although the information update has been spotty. You can choose from a large number of annual sets of climate data. Combinations can be displayed and regressions (including polynomial) performed. Various kinds of arithmetic can be done, But most importantly, the axes are under user control. You can translate curves independently, stretch in the x or y directions (with axes adapting).

A similar application is to superimposing on an image. I rather frequently review the progress of Hansen's 1988 predictions, eg here in 2016. This makes a canvas image from his paper, and the user can choose various datasets to superimpose, and even vary offsets if desired.

Another liberation was in viewing Earth plots. No longer need there be fixed views pre-calculated. The canvas can show shading in response to arbitrary control (there is maths involved). An early version is here. The use of shading improved over time.

Drag plots

This is an extension, using HTML 5, of plotting with variable axes. You can translate just by dragging, or by dragging just behinds each axis, you can shrink or expand it. And there can be the usual selection facilities etc. I maintain such a graph for surface indices in the latest data page.

WebGL

Most recent graphics has been done with WebGL, the origins of which are described above. WebGL is the staple of gaming, and so ample resources are provided. For fast-moving graphics on screen, it provides access to the GPU, for highly parallel operation. It is fully 3D, so keeps track of what is obscuring what. The shading is excellent. It has elaborate capabilities for lighting and perspective, but I don't use those much. And of course it is under full JS and mouse control. In my applications there is a fixed centre point about which everything can be revolved, and a fixed viewpoint at infinity.

A great thing about WebGL is that it deals in objects. In HTML5, you can't unravel a 2D canvas, and it is hard to selectively erase. But in WebGL you can just ask for an object to disappear, or move it, and you see what is underneath.

My first effort is here. But it got better. One that is still one of my favourites is the maintained high resolution SST page. At max resolution of 1/4°, that is a lot of triangles (2073600). But WebGL handles it fairly well, and it really can tell you more if you zoom. The app draws together a lot of technology, as interactive downloads are essential, and since that are about 25 years of data, a lot of it daily, just organising this is a stretch. Like all maintained pages, it downloads data and processes (in R) every night.

But the recent outpouring of WebGL graphics which dominates the gallery is due to the Moyhu WebGL facility. This hides all the parallel programming etc and just allows as input as numeric data. Usually a vector of nodes, linkages (for triangles etc) and values which will become shading. Mass production. A non-spherical example is the Lorenz butterfly..

Animation

This isn't a single technology; in fact I started out with animated GIFs. I tend to use it now where video compression is used, as with MPEG. I typically use FFmpeg with R to string together sequences of PNG or JPEG images. The classic example is a maintained page which is an offshoot of the HiRes SST page. It shows daily or 4-day sequences for regions like the ENSO Pacific plumes or the poles (where it is good for tracking sea ice). Another interesting experiment was the 2012 hurricane season, where I show the hurricanes moving against a SST background. In many cases it clearly shows the tracks of cooling.

An aspiration is to provide a 3D movie, so you can rotate a world as it goes through a temperature or whatever sequence. The problem is that you lose video compression, so it is hard to maintain speed. Here I went back to the JS globe idea above, using stored projections of 6-hour relative humidity plots. It's interesting, but hard work.

Another kind of animation is just zipping through WebGL plots. It's fast enough. Here is a movie display of the various spherical harmonics which I use a lot for Fourier-like representation on the sphere, with various controls. Fun version here.