Lightweight JavaScript & SVG Data Plotting Library – Clevorne

Preview:

Description:

Clevorne is a lightweight JavaScript graphing library which allows you to plot data as SVG based scatter plots, line graphs, bar charts, box plots, histograms, pie charts.

Basic usage:

Load the clevorne JavaScript library in the html page.

<script src="Clevorne.js"></script>

Prepare your data set. 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.

 dataset = {
   columns: ["Player", "Year", "PER"], 
   data: 
    [
    [
      "Aguirre",
      82,
      17.3
    ],
    [
      "Aguirre",
      83,
      20.5
    ],
    [
      "Aguirre",
      84,
      23.5
    ],
    ...
]};

Plotting your data as scatter plots.

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

Checkout the demo page for more examples.