(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 ...

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,

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]]};

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

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

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

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

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

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

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

Here, we've added a call to

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

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()

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