d3-gems

Collection of reusable widgets powered by d3.js

JavaScript Example

Sample code below shows how to render chart.

// first write/generate chart definition
var column_chart = {
	type: "column",
	axes: {
		x: {majorTicks: "outside"},
		y: {
			majorTicks: "outside",
			scalar: true,
			margin: true,
			grid: { major: true, minor: false }
		}
	},
	categories: ["A", "B", "A"],
	series: {
		Revenue: [90, 70, 95],
		Units: [30, 25, 27]
	},
	title: {
		text: "Test Chart",
		position: "center"
	},
	legend: {
		position: "topright"
	}
};

// then render chart
$(function(){
	$('.chart')
		.data('chart', column_chart)
		.chart();
});

See also examples at demo folder.