Interactive JS plotter Ver 2

Time for the next version of the interactive Javascript plotter. A few new capabilities, and some limitations removed.


The major new things are:

• A new layout. The data now sits in selection boxes, so I can include mich more of it. It does mean two clicks instead of one.
• A new multiple regression capability, which I think is quite powerful. You can use any of a number of calculated functions, or any data vectors as regressors. For example you could regress temperatures against various forcings.
• To complement this, a calculation capability - you can create and plot linear combinations (eg differences) of data vectors.
• An image can be used as background. This is useful for superimposing plots on published graphs (as in the Hansen predictions post).
• A user input capability. You can input your own images, or your own data.
• New windows for the markers for the plotted curves and their axes. This removes the limitation on how many you can have.
• More smoothing options

One thing that doesn't currently work is the ability to provide a web address that would regenerate the current state. This is because of the greater number of state variables. But I'm working on it. Update: it works. See new post.


The new data consists mainly of more complete collections of things like the regional data of GISS and UAH, and more NCEP data. And HADCRUT 4 is included. But there's room for more - suggestions welcome.


Here's the plotter - details below.

Your browser does not support the canvas tag Title Moyhu climate plotter

Calculation × +× Regression User input None    Curves Axes Prop Value      None Mov Avg Triangle Quadrat Binomial None Mean Linear Quadrat Cubic to to to to New Window:

Details and users guide.

Getting information.

As with V1, the main place to look for information is the active buttons. Ctrl-Click will bring up a guide to their function and associated information in the information window (bottom left).


There is a new checkbox above that window called "new window". If that is checked, whatever would have appeared in the small window will show up in a full window. You may have to give permission for this. In my browser, the new window arrives as a tab without focus or fanfare, so watch for the tab.

Ctrl-Click on the checkboxes next to the data selection boxes now brings up generic information about the data in the box. You can get more detailed info on the individual sets once they are graphed. They will have a line in the window bottom left with a check-box, and Ctrl-Click will produce a link to source and extra info, as well as state info about the plot curve.

Data sets and plotting

The process now is that to plot something you first find and select it. Then clicking on the adjacent button will cause a plot to appear, and an entry to appear in the frame bottom left, which I call the plot list. As in V1, there will also be a linked axis entry, created (and deleted) as required. Each entry has a checkbox, and if checked, the entry becomes sensitive to property changes directed from the property buttons, and also to output from the regression window (qv).

Axes

Each data set has a unit, and for each separate unit in the plots an axis is created. One of the axis properties is the ability to enforce an anomaly base; currently only temperature has this ability. You can set (and vary) the base years in the property list text box. If the base years can't be understood, or are outside a reasonable range (1800 to present), then no anomaly will be enforced. Although anomaly parameter is a property of the axis, you can also vary directly the anomaly base of a plot curve by setting the text box, sensitising the curve checkbox, and then clicking the base years button. But I recommend sticking with a standard anomaly base.

On the plot, axes can be adjusted with the pink and blue bars, as described for V1. Pink translates; blue changes the scale. The rescaling affects all curves associated with that unit - this is how you can align curves with different units as you wish.

Multiple regression

There is a regression table on the right (pink) and also the old regr type selection and property from V1 remain. These work together. The type selector is the simplest way to do linear and quadratic or cubic regression. As before you can select the type, sensitize the curve checkbox, and then press the regr type button to make the regression happen. You can also vary the regression years; this is a separate property, and you need to also sensitize and click the button for that to take effect.

The regression table is more powerful. You can Alt-Click on any data button and the selected data will be entered in the selection box below the regression heading. You can also send, with Alt-Click, from an entry in the plot list or a calculated result. You can manipulate the list with the buttons above. The ⇓ button marks the selected regressor for non-use; the button is a toggle. The × button removes the selected regressor from the list. The ⇐ or send button actually makes the regression happen to any checked curves in the plot list. The list of regressors in the selection box is combined with any regressors implied in the regr type property. The regression is done without a constant offset; if you want this, as you probably do, and the regr type is set to none, then you should go to the Calc list in the data sets and choose 1. Note too that if you do choose a regr type, then you should not have any polynomial functions in the regressor selection box, including 1. Or at least, none that would create a duplicate.

Yo get regression parameters and statistics, Ctrl-Click the checkbox of the curve in the plot list.

The Calc selection box at the end of the data grouping is mainly there to provide regressors. It includes trig functions and exponential. If you choose these, you will have to supply a time constant, in years, in the textbox above the Calc list. This will turn pink to remind you. For trig functions, the time constant to enter is the period. You can have trig functions of different period in the regressor table.

Vector combinations

You can plot various combinations of the data vectors, including the Calc vectors. The basic process is that you select two vectors from the selection boxes with a Shift-Click on the adjacent button. You'll see each name appear in one of the text boxes in the Calc area top right. In the other textboxes you enter numbers. On pressing the Calc button above, the appropriate linear combination will be formed. It will have a default name, but you can first (before Calc) write your preferred name in the pink box (where you will overwrite one of the data names).

Once the vector is calculated, you can click the ⇐ button above to plot it. This button has the same effect as the buttons beside the data boxes, and in the same way Alt-Click will instead send it to the list of regressors.

Before sending, you can add more vectors in combination. Just select another data vector, which will go to the other textbox from the one holding the result. Then modify the factors, and press Calc again.

User data and images

Below the regression box, you'll see some buttons around a small green text area. This area is for entering either data or the URL of an image that you want to appear in the background. When entered, you indicate which it is with the button above.


User data is described using Javascript, but it isn't complicated, especially if you know C. The main thing you have to supply is an annual time series, starting whenever, but ending in 2011 (for the moment). Use NaN for missing data. The numbers are written in reverse time order. So if your data was the years themselves, you would write, say,

p.data=[2011,2010,NaN,2008,2007]

p is a pointer to the currently selected entry in the data list called Custom. The entry will be called New. But you can change that by another line:
p.text="MyName"

It's also good practice to provide a unit. There are currently 10 provided of which the first two (starting from 0) are Temp C and W/m2. Uit 10 is non-dimensional (and is the default), and 11-19 are unassigned. You declare which number you want with

p.unit=1

and if you want to make your own unit, there's another pointer:

u[18].unit="mousepower"

There's nothing much more to a unit than the name, but it acts to group curves. One last thing you can do is declare some info

p.info="some html"

which will appear in response to a Ctrl-Click.

As with C, you can put multiple statements on separate lines, or on the same line separated with semi-colon. All this goes into the currently selected entry in the "Custom" selection box. To enter another vector, just select another slot. Once entered, they have the same status as any other data.


Images. You'll see a selection box below the user entry text area. It currently offers None and the Hansen plot. But you can add your own. Just enter the URL (quotes not needed) in the green text area and click Image. It will be called, boringly, custom; I haven't yet made a place to change the name.

From the image list you can select and then press the ⇐ button adjacent. That will cause the image to appear in the background of the plot region. It's about 50% transparent, so shouldn't overshadow the plot.

Once there, you can adjust it with the same pink and blue bars used for moving the axes, but with an Alt-Click. As before, the pink bars will translate, by an amount an direction determined by the distance of your click from the centre line (green). Click an inch above, and your image will move up an inch.

The blue bars cause linear movement, but holding the top left point fixed. The bottom right point moves by the amount indicated (inch for inch). So the scale is changed.

The purpose of this is to allow you to align your plot scaling with the image scale. Of course, you can move the axes too.

Smoothing

V1 offerred just moving average. Now there is a selection box which offers Moving Average, Triangular, Quadratic and Binomial. Triangular is just moving average applied twice, and Quadratic, three times. There's an adjacent text box for parameter, and this is in principle the smoothing interval. But for triangular and quadratic it's the period of the underlying moving average; the actual duration is respectively twice and three times the period stated.

I've used extrapolation to bring the smooth to the endpoint. This is an ancient statistical practice, popularised in climate science by Michael Mann. I've used his method of reflecting the data inverting in both time and value. This has the important merit of leaving a straight line unchanged. Any part of the smoothed curve that depends on extrapolated values is shown in a fainter color (50% transparent).

To get back the original, just select None and click the button. Alternatively, you can plot as new data, so the rough and smooth curves will show together.

If you ask for a regression on a smoothed plot, it will calculate using the unsmoothed data.

Summary of some V1 features

You can click anywhere on the plot area to place a legend. It will move to the site of the latest click. You can change the plot title using the text area below.

The V1 facility of showing a URL that will bring up the program in its current state is in abeyance. There are now a lot more state variables. But I'll work something out.

The plot list works similarly, despite being now in frames. As before the general pattern is that you check an entry to make it responsive, set a property and click a property button to make it happen. Ctrl-Click will bring up info about the curve, eg regression parameters.

The Output button shows a table of data used in the curves currently displayed. It is the original data without anomaly etc offsets. Check the New Window button (V2) to see it in a full window.