vjpgo/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}  	/* set the default text for anything occuring in the of the html */

	path.line {
	  fill: none;
	  stroke: purple;
	  stroke-width: 1.5;
	}

	path.area {
	  fill: #E2B2B2;
	}

	.axis {
	   shape-rendering: crispEdges;
	}

	.x.axis line {
	   stroke: green;
	   stroke-width: 1.0;
	}

	.x.axis .minor {
	   stroke-opacity: .5;
	   stroke: red;
	   stroke-width: 0.5;
	}

	.x.axis path {
	  display: none;
	}

	.y.axis line, .y.axis path {
	   fill: none;
	   stroke: #17BED5;
	   stroke-width: 1.0;
	}

	.y.axis .minor{
	   stroke: #52D12A;
	   stroke-width: 0.5;
	   stroke-opacity: 0.5;
	}
</style>

<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>
	d3.csv("testData1.csv", function(data) {
		//var data = []
		data.forEach(function(d) {
		  d.date = new Date(d.date);
		  d.close = +d.close; // 1st line data
		  d.open = +d.open; // 2nd line data
		});

		// Find the extent
		var dateExtent = d3.extent(data.map(function(d, i){return d.date;}));
		var trendExtent = d3.extent(data.map(function(d, i){return d.open;}));

		var w = 960;
		var h = 400;
		var pad = 73;

		var x = d3.time.scale() .domain(dateExtent).range([0,w]);
		var y = d3.scale.linear().domain(trendExtent).range([h,0]);

	var	svg = d3.select("body")
	    .append("svg")
		.attr("width", w + pad)
		.attr("height", h + pad);
	    //.append("g").attr("transform", "translate(" + pad + "," + pad + ")");

		//var svg =  d3.select("svg").attr("height", h + pad).attr("width", w + pad);
		var vis = svg.append("g").attr("transform", "translate(40,20)");

		var lineGenerator = d3.svg.line()
		    .x(function(d) { console.log(1, d);return x(d.date); })
		    .y(function(d) { return y(d.open); })
		    .interpolate("basis");

		var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(4).tickSubdivide(8).tickSize(-h, -h, -50).tickFormat(d3.time.format("%m/%d/%Y"));

		var yAxis = d3.svg.axis().scale(y).orient("left").ticks(6).tickSubdivide(5).tickSize(-w, -w, -w);


		var axisX = vis.append("g").classed("labels x_labels", true)
		    .attr("class", "x axis")
		    .attr("transform", "translate(0,"+h+")")
		    .call(xAxis);

		vis.append("g").classed("labels y_labels", true)
		    .attr("class", "y axis")
		    .call(yAxis);


		vis.append("path")
			.data([data])
			.attr("d", lineGenerator)
		    .attr("class", "line");

    });
	</script>
</body>

## testData1.csv

          
            date
            close
            open

            
              2013-01-13
              5.98
              6

            
              2013-06-13
              3
              4

            
              2013-08-13
              10.98
              8

            
              2013-10-13
              12
              10

            
              2013-11-13
              15
              11

            
              2013-12-3
              18
              13

            
              2013-12-13
              8
              12

            
              2013-12-23
              6
              10
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	body { font: 12px Arial;} /* set the default text for anything occuring in the of the html */

	path.line {
	fill: none;
	stroke: purple;
	stroke-width: 1.5;
	}

	path.area {
	fill: #E2B2B2;
	}

	.axis {
	shape-rendering: crispEdges;
	}

	.x.axis line {
	stroke: green;
	stroke-width: 1.0;
	}

	.x.axis .minor {
	stroke-opacity: .5;
	stroke: red;
	stroke-width: 0.5;
	}

	.x.axis path {
	display: none;
	}

	.y.axis line, .y.axis path {
	fill: none;
	stroke: #17BED5;
	stroke-width: 1.0;
	}

	.y.axis .minor{
	stroke: #52D12A;
	stroke-width: 0.5;
	stroke-opacity: 0.5;
	}
	</style>

	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>
	d3.csv("testData1.csv", function(data) {
	//var data = []
	data.forEach(function(d) {
	d.date = new Date(d.date);
	d.close = +d.close; // 1st line data
	d.open = +d.open; // 2nd line data
	});

	// Find the extent
	var dateExtent = d3.extent(data.map(function(d, i){return d.date;}));
	var trendExtent = d3.extent(data.map(function(d, i){return d.open;}));

	var w = 960;
	var h = 400;
	var pad = 73;

	var x = d3.time.scale() .domain(dateExtent).range([0,w]);
	var y = d3.scale.linear().domain(trendExtent).range([h,0]);

	var svg = d3.select("body")
	.append("svg")
	.attr("width", w + pad)
	.attr("height", h + pad);
	//.append("g").attr("transform", "translate(" + pad + "," + pad + ")");

	//var svg = d3.select("svg").attr("height", h + pad).attr("width", w + pad);
	var vis = svg.append("g").attr("transform", "translate(40,20)");

	var lineGenerator = d3.svg.line()
	.x(function(d) { console.log(1, d);return x(d.date); })
	.y(function(d) { return y(d.open); })
	.interpolate("basis");

	var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(4).tickSubdivide(8).tickSize(-h, -h, -50).tickFormat(d3.time.format("%m/%d/%Y"));

	var yAxis = d3.svg.axis().scale(y).orient("left").ticks(6).tickSubdivide(5).tickSize(-w, -w, -w);


	var axisX = vis.append("g").classed("labels x_labels", true)
	.attr("class", "x axis")
	.attr("transform", "translate(0,"+h+")")
	.call(xAxis);

	vis.append("g").classed("labels y_labels", true)
	.attr("class", "y axis")
	.call(yAxis);


	vis.append("path")
	.data([data])
	.attr("d", lineGenerator)
	.attr("class", "line");

	});
	</script>
	</body>
date	close	open
2013-01-13	5.98	6
2013-06-13	3	4
2013-08-13	10.98	8
2013-10-13	12	10
2013-11-13	15	11
2013-12-3	18	13
2013-12-13	8	12
2013-12-23	6	10