Friday, November 11, 2011

A JS gadget for viewing temperature trends.

In my previous post I showed a map of all possible trends calculated over sub-time intervals of a period, with a mechanism for selecting different datasets and periods. Since there seem to be ongoing interest in viewing trends, I thought a useful Javascript gadget could be developed from that.

Now when you select a dataset/time combination, a corresponding time series plot is displayed, with two colored balls representing the start and end of each trend period. The numerical data are displayed on the right. There are several ways of controlling the horizontal position of the balls:
  • You can click on the colored triangle. Each position represents a start/end combination, so the balls will move to the endpoints of the fitted regression line, and the slope and locations will appear on the right. It's a realisation of the color on the plot, and should correspond.
  • You can move the balls by clicking on the red or blue bars on the graph.
  • You can nudge, for fine control, using the <<<<>>>> device of the appropriate color. The outside symbols move the ball of that color by 8 months, the next by 4 and the innermost by 1.
Update: It seems to be working now.
Well, it almost works. Unfortunately, on this blog system you can't test JS in the editor - I have to go straight from the home computer (where it worrks) to live. In fact everything is working except the movement of the balls. In particular, you can click on the color plot and the numerical values will appear on the right. The issue with the balls is that I have to move them by absolute position, and so I have to find out what Blogger containers they are in. We'll get there.
Update. I've posted this at another site here. It seems to work correctly there. It's possible Blogger just isn't going to let me set the balls in motion.


Also on the right you'll see a URL. You can copy this and use it to link to produce directly the configuration you have created. My JS kungfu is not yet up to putting it in the address bar.

You'll notice there is a second set of controls for selecting datasets/times. You can use either that or the one on the top graph. I made the second one so that it was close to the bottom graph.

The blue ball is always the rightmost one. If you try to cross them, they will just switch - you'll still get the plot you were asking for.

The calculation is the same as previously - OLS regression with no allowance for autocorrelation. The black curve in the plots of monthly data is a centred 12-month moving average.


  1. Doesn't work for me I'm afraid on Firefox 3.6.17, FC14.
    Clicking the triangle updates the text values on the right of the lower pane, but no balls or trend appear. Clicking the buttons on the right works, but sill no trends.
    Kevin C

  2. Kevin,
    Yes, it's not a browser issue, but the Blogger overlay. I'm trying to get it working on another site, where the balls do move, but unfortunately at the moment come out as ghosts. Should be visible soon.

  3. Kevin,
    I got in working here. I'll see if I can fix the Blogger problem in the morning.

  4. The moving balls problem turned out to be just one of units - Blogger seems to have modified the default unit to inches for this particular property. The startup conditions are still not perfect - it is meant to begin with everything in place for a prescribed problem, but sometimes it isn't perfect. Should be OK once you make a selection.