Thursday, March 22, 2012

Interactive JS climate plotter (update)

Next in the series of JavaScript/HTML 5 apps is an interactive plotter for climate annual indices. There's a whole lot of annual data from which you can click to put on a plot. There's an elaborate arrangement for handling different units, anomaly bases etc. You can slide curves around in the plot, and fit various types of curve by OLS regression.

In these respects it's a bit like WoodForTrees. The main difference is that it is client side - the code and data sit on your machine. This adds speed and on screen flexibility, but makes some facilities like Fourier analysis more difficult, and limits the amount of data that can be used (which is why it is annual only).

I'll give detailed instructions below the plot. To try it, just click on a data set. For the moment, there is a restriction to 7 curves with up to 3 sets of units. You can click on the pink and blue axis bars to move plots around. For more details, you can click with Ctrl pressed on any functional button to get info about it in the window bottom right.

I've added some new utilities. You can add a legend; just click on the plot area where you would like the legend to be. Clicking elsewhere will move it; clicking within the canvas but outside the plot area will make it vanish.
Below the graph, there is a long URL in small writing. If you copy that, it will reproduce the current graphs in a different browser (for linking)
There is also a window bottom left in which you can write your own title.

Your browser does not support the canvas tag

Land Ocean


Land Only



TOS Model

Sea Surface



NH ExtraT
SH ExtraT


Refl Are


Mauna Loa CO2
TSI Recon
Ocean Heat


Prec Water
Unit/Name Select

Brief Tutorial

Firstly, more things you can try. Click on UAH (fourth dataset in list). You'll see that the plot appears on the default x-axis, from 1900. So click on the bottom blue bar near the left to expand.

Then add some properties. Go to the line in the "Unit/Name" table showing, and click the checkbox. Then go to the right column under regression type, and from the menu choose linear. Then click the "Regr Type" button. The fitted line should appear. If you want details, Ctrl-Click the checkbox on the line where UAH was entered in the list, and look at the table bottom right.


Each curve and each axis type (units) holds properties which you can modify (and see with Ctrl-Click). Each curve is linked to an axis type. Numbers in the property table are default values which will be used for new curves or axes, or can be attached to existing curves or axes by selection.

You can Ctrl-Click on any active element to get information. The Output button will put the current numerical data in the info window.

Property selection

Three things to attend to. You can click on any checkbox to select the curve(s) or axis to which your choice will apply. Then set the value. Finally, click on the Prop button to make it happen. The modification will be stored. Remember, the value change you made will apply (unless you chage it) to the next curve you choose.

To select colors, click on the color bar to the right of the plots. That will appear as the Color value in the table. Click on the Color button to color selected curves. You can also use the Linewidth button by entering the width in pixels.


Each curve has an axis type, and if that axis isn't in the table, it will create and display the axis. You can vary the axis properties by the bars on the graph or by selection. Axes can appear left or right; by default the first is left and the second right, and then not shown. But you can vary with the "Show Axis" button.

Temperature anomalies are always shown relative to a base, which is primarily an axis property (so the same base is used for all curves). I also show TSI as an anomaly, so it can be compared with forcings. You can override this base uniformity by setting the "Base Years" blank, though at the moment, you can only do this effectively at the time the data is first clicked.

The pink axis bars just translate the curves. You'll see a cross-bar (green) in the middle. On the vertical, if you click an inch above that, the curve moves up an inch. An inch below, it moves down. Same for horizontal.

The blue bars change scale. They move the top or left end in the same way as the pink. But they keep one point fixed. For the vertical it is the centre, so if the top moves down, the bottom moves up. For the x-axis, the right end is fixed.

The bars move only the scales (units) or axes next to which they appear. That's how you can compare curves with different units.

Regression and smoothing.

Smoothing is by centred moving average; the value is the duration in years. 0 means no smoothing.

Choose regression type from the menu; choices are mean (it just draws the mean), linear, quadratic, cubic and sin+lin. The last is a sinusoid of fitted phase with a fitted linear trend. You have to supply the period (in years), and for this the offset button (two down) changes to a period button. Press "Regr type" to make it happen to selected curves. If you Ctrl-Click the curve, you will see some regression stats. They are currently based on OLS, but I'm planning to allow for autocorrelation.

By default, regression is over the visible x-axis, but you can choose with the Regr Yrs button. Missing data is ignored - something bad will happen if there is not enough data at all.


There are three kinds of offset:

  • Graph scale (axis). These are usually set with the pink and blue bars, echoed with the y-axis value. You can also change by typing a new y-axis range value and selecting the axis. This changes the appearance of the axis only.
  • Anomaly shifts. The base is down among the axis properties, although the numbers sit with the curves, so you can set different anomalies. Not recommended though - you should set an anomaly period before anything else, and stick with it. If the base years are unviable (no data, or pre-1800 or post-2012), then that curve will use original data from the beginning.
  • Curve offsets. This is set with the Offset button. It's additional to the others. Use sparingly.
Ctrl-Click on the Select button to see what offset data is being used.

Show axes, hide curves and delete

The Show Axis Value button cycles through three values, "L", "R", "-" (no-show). You can attach these to an axis by selection. If you have chosen two "L" axes, the one that appears is unpredictable.

You can hide selected curves with the Hide toggle button. Their data is unchanged.

You can delete selected curves from the list with the delete button. A gap is left in the list, but this will be filled by the next curve chosen. Unfortunately, you can't delete the axis entry, since that may be being used by other curves.

Information and Output

Clicking this prints in the info window the data for the current curves. You can use the scroll bars, or just cut and paste the window contents.

Otherwise the window is for information from Ctrl-Click on buttons. There are three kinds:

  • Dataset buttons. These will show links to the data source and an information site
  • Curve/Axis selection buttons. These will show numerical and other info attached to that entity, of which the most extensive is regression data (if used).
  • Action buttons - documentation of function.


  1. Ha! Very nice. Better than mine (or it will be once you've done autocorrelation), as you will see shortly.
    Kevin C

  2. Thanks Kevin,
    Do you have a link to where yours will be? I'll look out for it.

    1. Should appear on Skeptical Science in the next few days (or if you look carefully, Dana leaked it in his latest post). I haven't really done any of the general purpose comparison features - I just focussed on calculating uncertainties with autocorrelation correction using the method from Foster and Rahmstorf 2011. Feel free to loot the code (it's CC share alike with attribution).

      I've added a plug for your tool. I've got some other stuff coming up which may also be of interest :)

      Kevin C

    2. Thanks, kevin - that looks interesting. I've been having thoughts on autocorrelation. Mainly a direct implementation of AR1 (without the Quenouille approx) but I note Tamino's suggestion that AR1 mightn't be enough. But I'd use AR2 rather than his conservative approx. I don't think there is any point in going beyond AR1 and still using the OLS trend.

  3. One other thing which might be useful: Have you tried google's excanvas for backward compatibility to IE <9?
    All you do is add an IE-conditional element at the top of the page which pulls in excanvas.js, and the rest just works.
    The only gotcha is that you have to use the version from the version control - the version on the download page doesn't include text.
    Kevin C

  4. Thanks, Kevin,
    wretched IE :(. Still, I guess I should link it in. I don't think I'd want to include the text - it's longer than my program.

    But you're right - it doesn't even work with IE9. I had checked with firefox and chrome, but not ie. I'll try to find out if excanvas is the answer.

  5. Nick

    Can you check the C13/C12 plot. It has an unlikely uptick after 2000, whereas the Mauna Loa data show (as expected) a continued trend to lighter carbon.

    Excellent resource, by the way

    Best wishes


  6. Paul,
    There is something wrong with the curve - it has been anomalized to the 1979-2000 range, but shouldn't have been. I try to do that only for temperature. I'll look into that. You can prevent it doing this by setting the anomaly years to 0 or blank before clicking the C/13 button, but this shouldn't be necessary.

    However, the uptick is in the data. The way to check is first to click the output button. That shows the numerical data, and there is a minimum around 2000. Then you can ctrl-click the button next to the C13/C12 entry. That brings up links to source and description, and the numbers do match the source.

  7. Nick

    Thanks. I'm not sure where to ctrl-click to get the source though (I'm using a Mac - will that make a difference?)

    That data still seems anomalous - both because it looks like an unprecedented switch in a well-explained 150-year trend and because it doesn't match the Mauna Loa atmospheric record



  8. Paul,
    I'm not sure about Ctrl-click on a Mac - I'd like to know if anyone finds differences there.

    Generally if you Ctrl-click on any of the buttons that you use to select the data set to plot, it should show in the bottom right info window. The message for C13/12 should be:
    Global Stable Carbon Isotopic Signature
    More Information

    1. Nick

      Thanks for that information. I need to look into it in a bit more detail, but I've got a feeling reading the description that that they are tabulating something they call "the
      global stable carbon isotopic signature for fossil fuel consumption." They derive that from "time series of Global, Regional, and National Fossil-Fuel CO2 Emissions" multiplied by "by stable carbon isotopic signature (del 13C) as described in Andres et al. (2000)"

      I'm not sure that is the same thing as the atmospheric 13C/12C ratio, which is what I'd expect your plot to show.

      If I can find out any more, I'll get back to you

      Best wishes


    2. Thanks, Paul, I think you're probably right. I didn't see how the ratio could be negative.

      If you can locate the right numbers I'd be very grateful

  9. what is NCEP Prep Water ?


  10. sidd,
    It is Precipitable Water. Ctrl-click on the button next to the label brings up some info. Or it should - I'd like to hear if there are problems. In this case, the message is:

    'Precipitable Water
    More Information

    The More Info link is just to the NOAA page with the NCEP data - I couldn't find a good summary page there on PW. NCEP just means that it is a data post-processed with some modelling. PW is basically a measure of whole-atmosphere humidity.