JavaScript ligero & biblioteca de trazado de datos SVG-Clevorne

Vista prévia

Descripción

Clevorne es una biblioteca gráfica de JavaScript ligera que le permite trazar datos como gráficos de dispersión basados en SVG, gráficos de líneas, gráficos de barras, diagramas de caja, histogramas, gráficos circulares.

¿Cómo funciona?

Cargue la biblioteca de JavaScript clevorne en la página HTML.

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

Prepare el conjunto de datos. Actualmente, la biblioteca espera que el conjunto de datos tenga la forma de un objeto que tiene un miembro denominado Data. datos es una matriz de matrices que representan el conjunto de datos. A continuación, se muestra un conjunto de datos de ejemplo para su uso en la demostración de la funcionalidad de la biblioteca hasta el momento.

 dataset = {

 columns: ["Player", "Year", "PER"],


data:


 [


[



"Aguirre",



82,



17.3


],


[



"Aguirre",



83,



20.5


],


[



"Aguirre",



84,



23.5


],


...
]};

Trazar los datos como parcelas de dispersión.

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

Compruebe la página de demostración para obtener más ejemplos.