Sunday, September 16, 2012

Javascript rendering of spaghetti plots

My first Javascript exercise used Javascript to enhance visibility of plots with many curves (spaghetti). You could roll the mouse over names in a legend, and in turn the named curves would stand out in black.

I had intended to make more use of that, but somehow that hasn't happened. A minor reason is that the JS code was unnecessarily complicated (being my first).

More spaghetti plots have been appearing at Lucia's, this time re GCM model results, and there was discussion of how to make them more readable. So I thought it was time to scrub up my old code, and this time make the generation of JS an automatic process that others could use.

So I'll give below first the GCM results plots, and then instructions on how to generate it from your own data file.

GCM results

Firstly I should say that I haven't exactly reproduced Lucia's data. I took the files that I used and explained in this post. The various temperature indices are up to 2010 only.

I've followed her lead in doing 13-month filtering. I normalised baselines by setting the mean of each curve over the plot period to zero. This is not part of the program, but was done in creating the csv file.

So here's the plot. Move the mouse over the legend and the named curves will show in black, with the regression line also showed.

How to

The steps are:
  • Download the R code spag.r. Among the first commands are the definition of a name and a url picUrl (end with "/"). Choose your own name and location where the pictures will be held.
  • Create a data CSV file (all in the same directory) called name.csv. You can do this with Excel or other apps, or just by editing. The first column is the x axis values, subsequent cols are the curves. Each col must have a heading (it's name). In CSV, everything is comma-separated, but spacing doesn't matter. Headings (but not numbers) should be in quotes. Use NA for missing.
  • Run spag.r in R. It will produce name.htm and a set of .png files, one for each curve. They are called name1.png etc ("name" of course is the name ypu edited into the file).
  • Move the .png files to the location specified by picUrl.
  • Paste name.htm into your own html file where you want the plot to appear.
For this example, I've posted the CSV file zX.csv.


  1. Nick
    That looks like model means, right? My graphs are runs. I can do both. But most recently I showed runs with only the models with more than one run.

    Why did you stop temperatures in 2010?

  2. Lucia,
    "Why did you stop temperatures in 2010?"
    Laziness - I had a file with all the data as shown from a 2010 post. I'm mainly trying to show the graphics method.

    They aren't model means. I had downloaded (from KNMI) several individual runs from each source, and I plotted just the first one of each.

    I'd be happy to re-do with your data if you can point me to the source.