blakedietz/BarChart.js

## BarChart.js
function BarChart()
{
	// Default selector is the body
	var selector = "body";
	var data;

	var xScale,
		yScale;

	var yAxis,
		xAxis;

	var svg;

	// Chart Dimensions
	var margin  = {top: 20, right: 20, bottom: 20, left: 30};
	var width   = 600 - margin.left - margin.right;
	var height  = 400 - margin.top  - margin.bottom;

	function barchart()
	{

	};

	barchart.createCanvas = function()
	{
		//Create SVG element
		svg = d3.select(selector)
		    .append("svg")
		    .attr("width",  width  + margin.right + margin.left)
		    .attr("height", height + margin.top   + margin.bottom);
	};

	barchart.createScales = function()
	{
		xScale = d3.scale.ordinal()
					.domain(data.map(function (d)
					{
						return d.key;
					}))
					.rangeRoundBands([margin.left, width], 0.4);

		yScale = d3.scale.linear()
		    .domain([0, d3.max(data, function(d)
		    	{
		    		return d.val;
		    	})])
		    .range([height,0]);
	};

	barchart.drawAxes = function()
	{
		xAxis = d3.svg.axis().scale(xScale).orient("bottom");
		yAxis = d3.svg.axis().scale(yScale).orient("left");

		// Add the x axis to the chart
		svg.append("g")
		    .attr("class", "x axis")
		    .attr("transform", "translate(0,"+ height +")")
		    .call(xAxis);

		// Add the yAxis to the chart
		svg.append("g")
		    .attr("class","y axis")
		.attr("transform", "translate(" + margin.left + ", 0 )")
		    .call(yAxis);
	};

	barchart.drawBars = function()
	{
		//Create bars
		svg.selectAll("rect")
		    .data(data)
	    		.enter().append("rect")
	    		    .attr("x", function(d, i)
	    		    {
	    		        return xScale(d.key);
	    		    })
	    		    .attr("y", function(d)
	    		    {
	    		        return yScale(d.val);
	    		    })
	    		    .attr("width", xScale.rangeBand())
	    		    .attr("height", function(d)
	    		    {
	    		        return height - yScale(d.val);
	    			});
	};

	barchart.data = function(datum)
	{
		if(!arguments.length)
		{
			return data;
		}
		else
		{
			data = datum;
		}
	};

	barchart.selector = function(sel)
	{
		if(!arguments.length)
		{
			return selector;
		}
		else
		{
			selector = sel;
		}
	};

	barchart.draw = function()
	{
		barchart.createCanvas();
		barchart.createScales();
		barchart.drawAxes();
		barchart.drawBars();
	};

	return barchart;
};

## index.html
<!DOCTYPE HTML>
<html>
<head>
	<title></title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
	<script src="BarChart.js"></script>
	<div id="1"></div>
	<script type="text/javascript">

		var dataset = [
					    {"val":5, "key":"a"},
					    {"val":10,"key":"b"},
					    {"val":13,"key":"c"},
					    {"val":19,"key":"d"},
					    {"val":21,"key":"e"},
					    {"val":25,"key":"f"},
					    {"val":22,"key":"g"},
					    {"val":18,"key":"h"},
					    {"val":15,"key":"i"},
					    {"val":13,"key":"j"},
					    {"val":11,"key":"k"},
					    {"val":12,"key":"l"},
					    {"val":15,"key":"m"},
					    {"val":20,"key":"n"},
					    {"val":18,"key":"o"},
					    {"val":17,"key":"p"},
					    {"val":16,"key":"q"},
					    {"val":18,"key":"r"},
					    {"val":23,"key":"s"},
					    {"val":25,"key":"t"}
					];
		var dataset2 = [
					    {"val":4, "key":"a"},
					    {"val":2,"key":"b"},
					    {"val":1,"key":"c"},
					    {"val":17,"key":"d"},
					    {"val":20,"key":"e"},
					    {"val":25,"key":"f"},
					    {"val":13,"key":"g"},
					    {"val":11,"key":"h"},
					    {"val":19,"key":"i"},
					    {"val":12,"key":"j"},
					    {"val":9,"key":"k"},
					    {"val":15,"key":"l"},
					    {"val":18,"key":"m"},
					    {"val":20,"key":"n"},
					    {"val":16,"key":"o"},
					    {"val":20,"key":"p"},
					    {"val":18,"key":"q"},
					    {"val":15,"key":"r"},
					    {"val":20,"key":"s"},
					    {"val":24,"key":"t"}
					];

		var chart1 = BarChart();
		chart1.data(dataset);
		chart1.selector("body");
		chart1.draw();

		var chart2 = BarChart();
		chart2.data(dataset2);
		chart2.selector("div");
		chart2.draw();
	</script>

</body>
</html>
	function BarChart()
	{
	// Default selector is the body
	var selector = "body";
	var data;

	var xScale,
	yScale;

	var yAxis,
	xAxis;

	var svg;

	// Chart Dimensions
	var margin = {top: 20, right: 20, bottom: 20, left: 30};
	var width = 600 - margin.left - margin.right;
	var height = 400 - margin.top - margin.bottom;

	function barchart()
	{

	};

	barchart.createCanvas = function()
	{
	//Create SVG element
	svg = d3.select(selector)
	.append("svg")
	.attr("width", width + margin.right + margin.left)
	.attr("height", height + margin.top + margin.bottom);
	};

	barchart.createScales = function()
	{
	xScale = d3.scale.ordinal()
	.domain(data.map(function (d)
	{
	return d.key;
	}))
	.rangeRoundBands([margin.left, width], 0.4);

	yScale = d3.scale.linear()
	.domain([0, d3.max(data, function(d)
	{
	return d.val;
	})])
	.range([height,0]);
	};

	barchart.drawAxes = function()
	{
	xAxis = d3.svg.axis().scale(xScale).orient("bottom");
	yAxis = d3.svg.axis().scale(yScale).orient("left");

	// Add the x axis to the chart
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0,"+ height +")")
	.call(xAxis);

	// Add the yAxis to the chart
	svg.append("g")
	.attr("class","y axis")
	.attr("transform", "translate(" + margin.left + ", 0 )")
	.call(yAxis);
	};

	barchart.drawBars = function()
	{
	//Create bars
	svg.selectAll("rect")
	.data(data)
	.enter().append("rect")
	.attr("x", function(d, i)
	{
	return xScale(d.key);
	})
	.attr("y", function(d)
	{
	return yScale(d.val);
	})
	.attr("width", xScale.rangeBand())
	.attr("height", function(d)
	{
	return height - yScale(d.val);
	});
	};

	barchart.data = function(datum)
	{
	if(!arguments.length)
	{
	return data;
	}
	else
	{
	data = datum;
	}
	};

	barchart.selector = function(sel)
	{
	if(!arguments.length)
	{
	return selector;
	}
	else
	{
	selector = sel;
	}
	};

	barchart.draw = function()
	{
	barchart.createCanvas();
	barchart.createScales();
	barchart.drawAxes();
	barchart.drawBars();
	};

	return barchart;
	};
	<!DOCTYPE HTML>
	<html>
	<head>
	<title></title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<body>
	<script src="BarChart.js"></script>
	<div id="1"></div>
	<script type="text/javascript">

	var dataset = [
	{"val":5, "key":"a"},
	{"val":10,"key":"b"},
	{"val":13,"key":"c"},
	{"val":19,"key":"d"},
	{"val":21,"key":"e"},
	{"val":25,"key":"f"},
	{"val":22,"key":"g"},
	{"val":18,"key":"h"},
	{"val":15,"key":"i"},
	{"val":13,"key":"j"},
	{"val":11,"key":"k"},
	{"val":12,"key":"l"},
	{"val":15,"key":"m"},
	{"val":20,"key":"n"},
	{"val":18,"key":"o"},
	{"val":17,"key":"p"},
	{"val":16,"key":"q"},
	{"val":18,"key":"r"},
	{"val":23,"key":"s"},
	{"val":25,"key":"t"}
	];
	var dataset2 = [
	{"val":4, "key":"a"},
	{"val":2,"key":"b"},
	{"val":1,"key":"c"},
	{"val":17,"key":"d"},
	{"val":20,"key":"e"},
	{"val":25,"key":"f"},
	{"val":13,"key":"g"},
	{"val":11,"key":"h"},
	{"val":19,"key":"i"},
	{"val":12,"key":"j"},
	{"val":9,"key":"k"},
	{"val":15,"key":"l"},
	{"val":18,"key":"m"},
	{"val":20,"key":"n"},
	{"val":16,"key":"o"},
	{"val":20,"key":"p"},
	{"val":18,"key":"q"},
	{"val":15,"key":"r"},
	{"val":20,"key":"s"},
	{"val":24,"key":"t"}
	];

	var chart1 = BarChart();
	chart1.data(dataset);
	chart1.selector("body");
	chart1.draw();

	var chart2 = BarChart();
	chart2.data(dataset2);
	chart2.selector("div");
	chart2.draw();
	</script>

	</body>
	</html>