jugglinmike/app.js

## app.js
(function() {
'use strict';

var data = [
	{ date: '5-Jul-11', close: 349.43 },
	{ date: '1-Jul-11', close: 343.26 },
	{ date: '30-Jun-11', close: 335.67 },
	{ date: '29-Jun-11', close: 334.04 },
	{ date: '28-Jun-11', close: 335.26 },
	{ date: '27-Jun-11', close: 332.04 },
	{ date: '24-Jun-11', close: 326.35 },
	{ date: '23-Jun-11', close: 331.23 },
	{ date: '22-Jun-11', close: 322.61 },
	{ date: '21-Jun-11', close: 325.30 },
	{ date: '20-Jun-11', close: 315.32 },
	{ date: '17-Jun-11', close: 320.26 },
	{ date: '16-Jun-11', close: 325.16 },
	{ date: '15-Jun-11', close: 326.75 },
	{ date: '14-Jun-11', close: 332.44 },
	{ date: '13-Jun-11', close: 326.60 },
	{ date: '10-Jun-11', close: 325.90 },
	{ date: '9-Jun-11', close: 331.49 },
	{ date: '8-Jun-11', close: 332.24 },
	{ date: '7-Jun-11', close: 332.04 },
	{ date: '6-Jun-11', close: 338.04 },
	{ date: '3-Jun-11', close: 343.44 },
	{ date: '2-Jun-11', close: 346.10 },
	{ date: '1-Jun-11', close: 345.51 },
	{ date: '31-May-11', close: 347.83 },
	{ date: '27-May-11', close: 337.41 },
	{ date: '26-May-11', close: 335.00 },
	{ date: '25-May-11', close: 336.78 }
];

var myLine = d3.select("body")
	.append("svg")
	.classed('line-chart', true)
	.chart("Line", { height: 300, width: 400 });

myLine.draw(data);
}());

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
body {
	font: 10px sans-serif;
}

.axis path,
.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}

.x.axis path {
	display: none;
}

.line-chart {
	border: solid 1px #333;
	padding: 1em;
}

.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
}
	</style>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="http://misoproject.com/js/d3.chart.js"></script>
</head>
<body>
	<h1>Simple Line Chart with d3.chart (version 0.2)</h1>
	<p>Note: d3.chart's support for using SVG &lt;path&gt; elements as Layers could use improvement!</p>
	<script src="line.js"></script>
	<script src="app.js"></script>
</body>
</html>

## line.js
(function() {
'use strict';

var parseDate = d3.time.format("%d-%b-%y").parse;

var LineChart = d3.chart("Line", {
	initialize: function(opts) {
		var path = this.base.append("path")
			.classed("line", true);
		var x = this.x = d3.time.scale()
			.range([0, opts.width]);
		var y = this.y = d3.scale.linear()
			.range([opts.height, 0]);
		var line = d3.svg.line()
			.x(function(d) { return x(d.date); })
			.y(function(d) { return y(d.close); });

		this.base.attr('height', opts.height);
		this.base.attr('width', opts.width);

		this.layer("line", path, {
			insert: function() { return this; },
			dataBind: function(data) {
				return this.data([data])
					.attr("d", line);
			}
		});
	},
	transform: function(data) {
		data.forEach(function(d) {
			d.date = parseDate(d.date);
		});
		this.x.domain(d3.extent(data, function(d) { return d.date; }));
		this.y.domain(d3.extent(data, function(d) { return d.close; }));
		return data;
	}
});
}());
	(function() {
	'use strict';

	var data = [
	{ date: '5-Jul-11', close: 349.43 },
	{ date: '1-Jul-11', close: 343.26 },
	{ date: '30-Jun-11', close: 335.67 },
	{ date: '29-Jun-11', close: 334.04 },
	{ date: '28-Jun-11', close: 335.26 },
	{ date: '27-Jun-11', close: 332.04 },
	{ date: '24-Jun-11', close: 326.35 },
	{ date: '23-Jun-11', close: 331.23 },
	{ date: '22-Jun-11', close: 322.61 },
	{ date: '21-Jun-11', close: 325.30 },
	{ date: '20-Jun-11', close: 315.32 },
	{ date: '17-Jun-11', close: 320.26 },
	{ date: '16-Jun-11', close: 325.16 },
	{ date: '15-Jun-11', close: 326.75 },
	{ date: '14-Jun-11', close: 332.44 },
	{ date: '13-Jun-11', close: 326.60 },
	{ date: '10-Jun-11', close: 325.90 },
	{ date: '9-Jun-11', close: 331.49 },
	{ date: '8-Jun-11', close: 332.24 },
	{ date: '7-Jun-11', close: 332.04 },
	{ date: '6-Jun-11', close: 338.04 },
	{ date: '3-Jun-11', close: 343.44 },
	{ date: '2-Jun-11', close: 346.10 },
	{ date: '1-Jun-11', close: 345.51 },
	{ date: '31-May-11', close: 347.83 },
	{ date: '27-May-11', close: 337.41 },
	{ date: '26-May-11', close: 335.00 },
	{ date: '25-May-11', close: 336.78 }
	];

	var myLine = d3.select("body")
	.append("svg")
	.classed('line-chart', true)
	.chart("Line", { height: 300, width: 400 });

	myLine.draw(data);
	}());
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	.line-chart {
	border: solid 1px #333;
	padding: 1em;
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}
	</style>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="http://misoproject.com/js/d3.chart.js"></script>
	</head>
	<body>
	<h1>Simple Line Chart with d3.chart (version 0.2)</h1>
	<p>Note: d3.chart's support for using SVG <path> elements as Layers could use improvement!</p>
	<script src="line.js"></script>
	<script src="app.js"></script>
	</body>
	</html>
	(function() {
	'use strict';

	var parseDate = d3.time.format("%d-%b-%y").parse;

	var LineChart = d3.chart("Line", {
	initialize: function(opts) {
	var path = this.base.append("path")
	.classed("line", true);
	var x = this.x = d3.time.scale()
	.range([0, opts.width]);
	var y = this.y = d3.scale.linear()
	.range([opts.height, 0]);
	var line = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.close); });

	this.base.attr('height', opts.height);
	this.base.attr('width', opts.width);

	this.layer("line", path, {
	insert: function() { return this; },
	dataBind: function(data) {
	return this.data([data])
	.attr("d", line);
	}
	});
	},
	transform: function(data) {
	data.forEach(function(d) {
	d.date = parseDate(d.date);
	});
	this.x.domain(d3.extent(data, function(d) { return d.date; }));
	this.y.domain(d3.extent(data, function(d) { return d.close; }));
	return data;
	}
	});
	}());