Simple SVG Based Plotting Library – D3xter.js

Category: Chart & Graph , Javascript | March 16, 2016
Views Total:124 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