feomike/fannie_50_75.csv

## fannie_50_75.csv

          
            date
            close

            
              1999
              1948

            
              2000
              1815

            
              2001
              3121

            
              2002
              5680

            
              2003
              9728

            
              2004
              5371

            
              2005
              3835

            
              2006
              2033

            
              2007
              3025

            
              2008
              1969

            
              2009
              3200

            
              2010
              1249

            
              2011
              1430

            
              2012
              3267

            
              2013
              3614

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
</style>
<body>
	<h4><center>Loans in the Las Vegas MSA</center></h4>
	<h4><center>Number of loans sold to Fannie Mae</center></h4>
	<h4><center>Borrowers with 50%-79% of the MSA Median Family Income</center></h4>
	<!-- load the d3.js library -->
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
		var myFile = "fannie_50_75.csv";
		// Set the dimensions of the canvas / graph
		var margin = {top: 30, right: 20, bottom: 30, left: 50},
			width = 600 - margin.left - margin.right,
			height = 270 - margin.top - margin.bottom;
		// Parse the date / time
		var parseDate = d3.time.format("%Y").parse;
		// Set the ranges
		var x = d3.time.scale().range([0, width]);
		var y = d3.scale.linear().range([height, 0]);
		// Define the axes
		var xAxis = d3.svg.axis().scale(x)
			.orient("bottom").ticks(5);
		var yAxis = d3.svg.axis().scale(y)
			.orient("left").ticks(5);
		// Define the line
		var valueline = d3.svg.line()
			.x(function(d) { return x(d.date); })
			.y(function(d) { return y(d.close); });
		// Adds the svg canvas
		var svg = d3.select("body")
			.append("svg")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)
			.append("g")
				.attr("transform",
				"translate(" + margin.left + "," + margin.top + ")");
		// Get the data
		d3.csv(myFile, function(error, data) {
			data.forEach(function(d) {
			d.date = parseDate(d.date);
			d.close = +d.close;
		});
		// Scale the range of the data
		x.domain(d3.extent(data, function(d) { return d.date; }));
		y.domain([0, d3.max(data, function(d) { return d.close; })]);
		// Add the valueline path.
		svg.append("path")
			.attr("class", "line")
			.attr("d", valueline(data));
		// Add the X Axis
		svg.append("g")
			.attr("class", "x axis")
			.attr("transform", "translate(0," + height + ")")
			.call(xAxis);
		// Add the Y Axis
		svg.append("g")
			.attr("class", "y axis")
			.call(yAxis);
		});
	</script>
</body>
	date	close
	1999	1948
	2000	1815
	2001	3121
	2002	5680
	2003	9728
	2004	5371
	2005	3835
	2006	2033
	2007	3025
	2008	1969
	2009	3200
	2010	1249
	2011	1430
	2012	3267
	2013	3614
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */
	body { font: 12px Arial;}
	path {
	stroke: steelblue;
	stroke-width: 2;
	fill: none;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: grey;
	stroke-width: 1;
	shape-rendering: crispEdges;
	}
	</style>
	<body>
	<h4><center>Loans in the Las Vegas MSA</center></h4>
	<h4><center>Number of loans sold to Fannie Mae</center></h4>
	<h4><center>Borrowers with 50%-79% of the MSA Median Family Income</center></h4>
	<!-- load the d3.js library -->
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>
	var myFile = "fannie_50_75.csv";
	// Set the dimensions of the canvas / graph
	var margin = {top: 30, right: 20, bottom: 30, left: 50},
	width = 600 - margin.left - margin.right,
	height = 270 - margin.top - margin.bottom;
	// Parse the date / time
	var parseDate = d3.time.format("%Y").parse;
	// Set the ranges
	var x = d3.time.scale().range([0, width]);
	var y = d3.scale.linear().range([height, 0]);
	// Define the axes
	var xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(5);
	var yAxis = d3.svg.axis().scale(y)
	.orient("left").ticks(5);
	// Define the line
	var valueline = d3.svg.line()
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.close); });
	// Adds the svg canvas
	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");
	// Get the data
	d3.csv(myFile, function(error, data) {
	data.forEach(function(d) {
	d.date = parseDate(d.date);
	d.close = +d.close;
	});
	// Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain([0, d3.max(data, function(d) { return d.close; })]);
	// Add the valueline path.
	svg.append("path")
	.attr("class", "line")
	.attr("d", valueline(data));
	// Add the X Axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);
	// Add the Y Axis
	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);
	});
	</script>
	</body>