A gallery of Javascript-enhanced graphics



Classes

WebGL Earth
Animations
HTML 5 shading
Active graphs
Javascript
Google Map apps
Google Earth KML

Examples

Frame size:


Original post



Graphics gallery

On this page, I have gathered graphics produced over the last three years on Moyhu. They are listed mainly by programming technique. Clicking on the "Classes" button brings up a new list of examples below. Clicking on an example shows in the frame on the right the main graphic, and below the text that was associated with it. At the bottom on the right is a link to the original post/page where it appeared.
Also at the bottom left are two buttons + and -, which allow you to expand and contract the frames. For large plots, you may want to expand the frame and unzoom the screen with Ctrl-. Ctrl+ restores.

History of methods

An important point here is that no server is used. What you see is the effect of HTML/Javascript code that you download and implement via your browser.
I use R for most arithmetic and data handling, and for static plots and images (usually png). My first advance was using Javascript for showing multiple pictures in one place, under user control. This is related to my first serious purpose here - getting more information in one place. That then bumps up against download time, so another advance was using the then new XMLHTTPRequest, which allows extra data to be downloaded on demand.
At about the same time, HTML with its 2d canvas became available. This gives JS-controlled drawing and shading. Another serious purpose was to allow proper spherical projection, with a sphere you can rotate to examine. In early times I did this with about eight perspectives with fixed images, with JS switching. But the canvas, later augmented with WebGL, gave continuous control with zooming. That's the top feature here.

The climate plotter combines the use of the canvas and JS information handling capability. Along the way, I've also experimented with the Google Maps API, mainly for met stations, and Google Earth KML files, using folders to allow large information sets.

Classes

  • WebGL
    This is a browser implementation of OpenGL. It allows a Google Earth capability; you can rotate the sphere like a trackball, and zoom. Often you can click (or Shift-click) to bring up information about the closest station. The color is Gouraud shading on a triangular mesh.
  • Animations
    These are mostly SST animations taken as screenshots from the WebGL, with possible additions.
  • HTML 5 shadingThe applications here are spherical projections and data plotting. But it is very versatile.
  • Active graphs
    Everything in the gallery is active. Included here are conventional graphs which can be superimposed under user control, the trend viewer, which shows a color plot of possible trends, but allows the time series to show the chosen trend lines, and the climate plotter.
  • Javascript
    Everything here uses JS. I've put in this class the smaller scale visuals, with the element of user control and information density.
  • Google Map apps
    I found this more useful than KML, as it gave better user control. It embeds groups of met stations in a Maps environment; you can click on the markers to pop up balloons of information. The most mabitious app is the station history, which attaches a stripped down climate plotter to allow you to plot and process station temp data.
  • KML Google Earth
    If you have a GE plugin installed, this should come to life (slowly). The plug-in version has some drawbacks, the main one being that it doesn't show a folder menu, which these KML files get much of their utility from. However, it does show the stations and you can still click for info. If it doesn't work, you can click at the top. This will download the KML or KMZ file, and start up GE, if you have it installed. Then you can use the folders.

    There's a who;e world of GE API programming - this may get better.