Simple SVG Based Plotting Library – D3xter.js

Preview:

Description:

D3xter.js is a super lightweight JS plotting library to create simple charts & graphs using D3.js and canvas & SVG elements.

How to use it:

Include d3.js from a CDN.

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>

Include D3xter.js and style.css in your document.

<link href="css/style.css" rel="stylesheet">
<script src="js/lib.js"></script>

Prepare the dataset as follow.

var x = [];
var y = [];
var z = [];

Config the graph.

var config = {
//x-axis label (defaults to '')
xLab: 'random x-values', 
//y-axis label (defaults to '')
yLab: 'random y-values', 
//Selector for DOM element to append the plot to (defaults to < body >)
selector: '#elementID-2', 
//pixel width (defaults to 500)
width: 500, 
//pixel height (defaults to 500)
height: 500, 
//size and sizeLab are used in bubble charts like the top-right example.
//array of numeric values which map to sizes of the circles plotted at the corresponding x-y point (defaults to undefined for a standard scatter)
size: z, 
//label for size values (defaults to '')
sizeLab: 'random size values' 
}

Render a graph inside the target container.

var histogram = histo(data, config);
var scatter = scatter(x,y,config);
var lineGraph = xyPlot(x,y,config);