A gallery of Javascript-enhanced graphics

On this page, I show a tableau of active graphics produced on Moyhu. The images are inactive, but the Try it! button leads to an active version corresponding to the image, and the title link leads to the original post or page. They are basically the same, but the "Try it! version has the key graphic placed at the top.

They are listed mainly by the capability used, as given by the radio buttons on the left, which you can click to select that category. I have tried to include every usage, so there is repetition. I have gathered what I think is a representative set of interest at the top of each selection; they have red borders.

Below the tableau here I have a description of the capabilities. I will write a blog post with a more expansive history.

  • All types is a combined list of all active graphics
  • WebGL is the most advanced capability. Descriptions by Wiki and Moyhu. Much of Moyhu graphics is oriented toward mapping data on a sphere which can be interactively examined by users. WebGL allows a trackball style of doing that, as with Google Earth. A Moyhu application will usually have an array of buttons for selecting data, or possibly drop-down menus or other devices for accessing a larger online database. Clicking on the sphere will usually bring up information about the nearest node. There is usually an underlying mesh, either regular or irregular triangles with stations as nodes. A few applications are not spheres.
  • Active This is where Moyhu interactive graphics started, using Javascript to allow user choice and intervention. A basic application is flipping through an array of stored images, possibly fast enough to give an animation effect. The images may superimpose, as where selected curves in a spaghetti plot can be highlighted. It also includes the use of XMLHTTPrequest to bring in more data on request. The climate plotter is one advanced usage. Others are specially classified as viewer or trend.
  • HTML 5 canvas These are active plots that make use of the HTML5 canvas facility for drawing graphs and other graphics on screen under user control. User controls usually are selection buttons and dragging capabilities. But it also includes shaded plots (now generally done with WebGL) and even spheres that can be set to arbitrary positions by clicking on a control map (not trackball).
  • Animation I have reserved this mostly for animation with graphics compression, usually made with ffmpeg from jpeg or png images generated with an R program.
  • Active viewer This is a subset of Active in which a large array of series (usually proxy plots) are graphed in an indecipherable spaghetti plot. There is a button or selection device for each series, which shows up the corresponding curve in black. When selected there is a table of information shown, and also possibly the location on a map.
  • Active trend This is a particular class of active plots incorporating a triangle showing all possible trends of a time series, linked to a graph with a marker for beginning and end of the trend period. For any trend selected, there is a table of data (CI's etc). Usually there is a table of buttons for selecting a temperature dataset, with a general range and possibly showing information about statistical significance of trend etc.
  • Drag This is a subset of Active where the user typically drags curves around on a graph(with axes responding).
  • Google Maps These are active plots that use a Google Maps API. Typically there are markers for temperature stations which can be selected in various ways, with different colors representing selection classes. Clicking on markers will bring up a balloon with identifying information. The usual Google Maps facilities of dragging and zooming work.
  • JS Globe I have gathered here some early efforts at showing plots on a globe, using just active Javascript. Typically there are 6 or 8 images from regularly placed view angles (vertices or face centres of a cube), and a device for the user to select.