Clevorne: an in-progress JavaScript graphing library

I've spent a little time over each of the last few weekends working on a JavaScript library for plotting graphs on the web. It's far from complete but I'm putting up this page as the home page for the project as well as a tutorial of sorts.
(This is all heavily inspired by ggplot2 and the grammar of graphics.)

The code is here (github).
I'll try to keep this file updated about the direction of the project.

Anyhow about the library itself ...

The Data

Currently, the libary expects the dataset to be in the form of an object that has a member named data. data is an array of arrays representing the data set.
Below, is an example data set for use in demonstrating the functionality of the library thus far.
(In the example data set below there is also an array, columns storing the column names but it doesn't get used by any of the code written thus far. Eventually, I anticipate the object to have a few other members - both data and functions. This particular data set gives the Player Efficiency Ratings for 3 former NBA players for each season of their careers.) 
 dataset = {columns: ["Player", "Year", "PER"], data: [["Aguirre", 82, 17.3],["Aguirre", 83, 20.5],["Aguirre", 84, 23.5],["Aguirre", 85, 21.3],["Aguirre", 86, 19.2],
    ["Aguirre", 87, 22.1],["Aguirre", 88, 21.9],["Aguirre", 89, 16.4],["Aguirre", 90, 15.8],["Aguirre", 91, 16.7],["Aguirre", 92, 13.7],
    ["Aguirre", 93, 13.7],["Aguirre", 94, 13.1],["Worthy", 83, 17.4],["Worthy", 84, 16.5],["Worthy", 85, 17.0],["Worthy", 86, 20.4],
    ["Worthy", 87, 18.4],["Worthy", 88, 18.2],["Worthy", 89, 19.0],["Worthy", 90, 19.8],["Worthy", 91, 18.1],["Worthy", 92, 16.7],
    ["Worthy", 93, 15.6],["Worthy", 94, 12.8],["Wilkins", 83, 16.6],["Wilkins", 84, 19.2],["Wilkins", 85, 20.9],["Wilkins", 86, 23.3],
    ["Wilkins", 87, 23.5],["Wilkins", 88, 23.7],["Wilkins", 89, 21.8],["Wilkins", 90, 24.6],["Wilkins", 91, 23.5],["Wilkins", 92, 22.2],
    ["Wilkins", 93, 24.3],["Wilkins", 94, 21.4],["Wilkins", 95, 16.3],["Wilkins", 97, 19.6],["Wilkins", 99, 15.4]]};

Plotting

Scatter Plots

This code:


    var panel1 = document.getElementById('panel1');
    panel1.setAttribute("width",0.8*window.innerWidth);
    panel1.setAttribute("height",0.3*window.innerHeight);
    
    plot1 = new clevorne(panel1, dataset, 1, 2); //use the 2nd and 3rd columns as x and y respectively for the first plot
    plot1.placeGrid([82,86,90,94,98],[15,18,21,24])
    plot1.colourBy(0); //choose colour by the first column of data
    plot1.drawScatter(); //draw the scatterplot

Produces:

Slightly different:


    var panel2 = document.getElementById('panel2');
    panel2.setAttribute("width",0.8*window.innerWidth);
    panel2.setAttribute("height",0.3*window.innerHeight);
    
    plot2 = new clevorne(panel2, dataset, 1, 2); //use the 2nd and 3rd columns as x and y respectively for the first plot
    plot2.placeGrid([82,86,90,94,98],[15,18,21,24])
    plot2.colourBy(1); //choose colour by the 2nd column of data
    plot2.drawScatter(); //draw the scatterplot

And we get:


In this 2nd plot the colours were chosen by the 2nd column of the data rather than the 1st column. Not necessarily very enlightening in this instance but it gives an idea of how the colourBy method works.

Line Graphs

The code:

    var panel3 = document.getElementById('panel3');
    panel3.setAttribute("width",0.8*window.innerWidth);
    panel3.setAttribute("height",0.3*window.innerHeight);
    
    plot3 = new clevorne(panel3, dataset, 1, 2); //use the 2nd and 3rd columns as x and y respectively for the second plot.
    plot3.placeGrid([15,18,21,24],[82,86,90,94,98]); //place a grid for the 2nd plot
    plot3.colourBy(0); //colour by the first column of the data
    plot3.groupBy(0); //group by the first column of the data
    plot3.drawLines(); //draw line graphs

The graph

Slightly different code:

    var panel4 = document.getElementById('panel4');
    panel4.setAttribute("width",0.3*window.innerWidth);
    panel4.setAttribute("height",0.3*window.innerHeight);
    
    plot4 = new clevorne(panel4, dataset, 2, 1); //use the 3rd and 2nd columns as x and y respectively for the second plot.
    plot4.placeGrid([15,18,21,24], [82,86,90,94,98]); //place a grid for the 2nd plot
    plot4.colourBy(0); //colour by the first column of the data
    plot4.groupBy(0); //group by the first column of the data
    plot4.drawLines(); //draw line graphs

And we get a different graph


Here the x and y variables were switched. (And the size of the svg was set as a square).

Code for Scatter Plots and Line Graphs at the same time:

    var panel5 = document.getElementById('panel5');
    panel5.setAttribute("width",0.8*window.innerWidth);
    panel5.setAttribute("height",0.3*window.innerHeight);
    
    plot5 = new clevorne(panel5, dataset, 1, 2); //use the 2nd and 3rd columns as x and y respectively for the third plot
    plot5.groupBy(0); //group by the first column of the data
    plot5.colourBy(0); //colour data points by the first column of the data
    plot5.placeGrid([82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99],[15,18,21,24]); //place this grid on the plot
    plot5.addAnnotation(function(row){ return "'"+(row[1]-1)+"-'"+(row[1])+" "+(row[0])+" "+(row[2])+" PER";})    
    plot5.drawLines(); //draw a line graph
    plot5.drawScatter(); //draw a scatter plot

Gives this graph:


Here, we've added a call to addAnnotation and you can see the results by hovering over the points in the plot.

Bar Charts

The code:

    var panel6 = document.getElementById('panel6');
    panel6.setAttribute("width",0.8*window.innerWidth);
    panel6.setAttribute("height",0.3*window.innerHeight);
    
    plot6 = new clevorne(panel6, dataset, 1, 2); //use the 2nd and 3rd columns as x and y respectively for the third plot
    plot6.colourBy(0); //group by the first column of the data
    plot6.positionBy(0); //colour data points by the first column of the data
    plot6.addAnnotation(function(row){ return "'"+(row[1]-1)+"-'"+(row[1])+" "+(row[0])+" "+(row[2])+" PER";})  
    plot6.drawBars(); //draw the bar chart

The chart:

Similar code, different data set:

    dataset2 = {data: [["Mario", 1, 5],["Mario", 2, 6],["Mario", 3, 7],["Mario", 4, -3],["Mario", 5, 0.5],["Mario", 6, 1],["Mario", 7, -4],
                  ["Luigi", 1, 4],["Luigi", 2, -3],["Luigi", 3, 6],["Luigi", 4, 6],["Luigi", 5, -0.5],["Luigi", 6, -2],["Luigi", 7, 3],
                 ["Zelda", 1, 6.5],["Zelda", 2, 4.5],["Zelda", 3, 3],["Zelda", 4, 8],["Zelda", 5, 2], ["Zelda", 6, 3],["Zelda", 7, 4], 
                 ["Samus", 1, 6.5],["Samus", 2, 4.5],["Samus", 3, 3],["Samus", 4, 8],["Samus", 5, 2], ["Samus", 6, 3],["Samus", 7, 4]]};
                 
    var panel7 = document.getElementById('panel7');
    panel7.setAttribute("width",0.8*window.innerWidth);
    panel7.setAttribute("height",0.3*window.innerHeight);
    panel7.setAttribute("x",20);
    
    plot7 = new clevorne(panel7, dataset2, 1, 2); //use the 2nd and 3rd columns as x and y respectively for the third plot
    plot7.colourBy(0); //group by the first column of the data
    plot7.positionBy(0); //colour data points by the first column of the data
    plot7.addAnnotation(function(row){ return row[0]+": "+row[2]+" (Week "+row[1]+")";})  
    plot7.drawBars()

Gives this plot:


Just did this one to show how negative y values are handled.