A gadget for superimposing graphs

A hobby of mine is tinkering with Javascript programming to make various gadgets. And something I spend some time on is superimposing comparison curves on existing internet graphs. So I've made an interactive gadget to try to make this easier.

But this is a climate blog, so first I'll illustrate the task that prompted me to do this. In a recent WUWT post titled Collapse of the CAGW delusion, the final nail in the coffin seems to be this 2008 graph of Akasofu, which has bobbed up elsewhere at WUWT recently:



It's one of these plots based on 60-year cycle (with trend), so 2008 was supposed to be the peak, with downturn coming, though in Akasofu's version, still a longterm uptrend. The WUWT poster, though, had other ideas and added his green line forecasting a more sustained fall. I thought this is odd - he's forecasting from 2008 in 2016 - we can see what actually happened. So I added the thin red line of NOAA averages to date, which seems to be what they were using. And sure enough, it doesn't go way down, it goes way up, exceeding even the mocked IPCC forecast. Something collapsed there, but it wasn't AGW.

Anyway, that was done with the gadget I'll describe below the fold. It lets you align a plot with transparency on any underneath plot.

Here is a simple plot for demo. The ywllow-backed plot in black axes and curve is a 12-month smoothed NOAA monthly. The red plot is actually the same, but with different scaling. The task is to move the red to overlay the black.



The systematic process is to choose two points on the top plot to align with the corresponding points on the bottom. They should be well separated in both x and y values. Left click and hold on the first chosen point on top graph, and drag it to the matching point on the lower. The top graph will follow. When you release, a little square will mark that spot.

Then similarly drag the second point to its destination. This time the little square will remain fixed and the graph stretches. So the alignment should be complete. But you can refine to readjust near the first point. The square will follow. In fact, you can put the square anywhere you want just by click and release. Wherever you put it, its center will remain fixed for the next drag. But don't try to drag across the x or y value of the fixed point, or even close, else bad distortion.

When the graphs are aligned, I then use Print Scrn, and Paint (Windows) to crop. If you look lower left, you'll see a little box of controls. The "hide markers" checkbox will hide the little square when checked.

OK, that was the exercise. Now again, in that box of controls, there are text entry boxes where you can enter your own selected graphs as URL's. You'll probably make the top graphs yourself, since transparent background is needed. In doing so, you might like to add markers to facilitate alignment. Then you can dispense with axes, which add clutter. I use R, with a par(bg="#00000000") just before the plot command.

If you don't want to put your top graph on the web, you can download the html code (with JS file) zipped here. Then your URL can be just a local file name.

I've been finding a lot of use for this gadget in the last few days, mainly for following up on predictions. As well as Akasofu above, there is Hansen, Loehle and Scafetta, and Hansen again. I'll blog about this soon.

Update. I have an idea to improve utility. Via the trend viewer, you can access updated time series plots of a wide variety of temperature indices. They are png plots, and I'll make the background transparent. You could use any of these, just right-click to copy image address. It will take me a little time to redo the graphs with transparency. Later, I'll probably make a page with the gadget and uncluttered graphs to use.