Simple SVG Based Plotting Library – D3xter.js

Category: Chart & Graph , Javascript | March 16, 2016
Views Total:106 views
Official Page:Go to website
Last Update:March 16, 2016


Simple SVG Based Plotting Library – D3xter.js


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="//"></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);

You Might Be Interested In:

Leave a Reply