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 Title Moyhu climate plotter

Land Ocean HADCRUT GISS NOAA UAH MSU-RSS TempLS Land Only BEST GISS Ts CRUTEM3 Processed TOS Model Fos/Rahm Sea Surface HADSST3 HADSST2 HADiSST Regional HAD NH HAD SH ConUS Arctic NH ExtraT Tropical SH ExtraT Antarctic Forcings All W-M GHG Ozone StratH2O Solar LandUse SnowAlb StratAmer BC Refl Are AIE Various Mauna Loa CO2 C13/C12 TSI Recon AMO PDO Ocean Heat NCEP Prec Water Humidity OLR    Unit/Name Select Prop Value      None Mean Linear Quadrat Cubic Sin+lin to to to to Information:

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.

Concepts

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.

Axes

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.

Offsets

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.