sjbliss/bart_fed.csv

## bart_fed.csv

          
            year
            federalfunding

            
              1991
              21446222

            
              1992
              18045001

            
              1993
              30225384

            
              1994
              66810505

            
              1995
              59039016

            
              1996
              63106700

            
              1997
              53543517

            
              1998
              49081086

            
              1999
              176789205

            
              2000
              270278557

            
              2001
              242386243

            
              2002
              217498961

            
              2003
              99947983

            
              2004
              44224102

            
              2005
              36101294

            
              2006
              37329505

            
              2007
              62578354

            
              2008
              66154998

            
              2009
              80352951

            
              2010
              146587837

            
              2011
              130434986

            
              2012
              149912354

            
              2013
              152224257

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Federal Support for Bay Area Transit Systems</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">

body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-size: 24px;
				margin: 0;
			}

			p {
				font-size: 12px;
				margin: 10px 0 0 0;
			}

			svg {
				background-color: white;
			}

			circle:hover {
				fill: blue;
			}

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

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

		</style>
	</head>
	<body>

		<h1>Comparing Federal Outlays for the BART and Muni Systems</h1>

		<p>This line chart compares federal funding for the <strong style="color: red;">SF Muni</strong> and <strong style="color: blue;">BART</strong> systems for the years 1991 to 2013. Source: <a href="http://www.ntdprogram.gov/ntdprogram/data.htm">National Transit Data Base</a>.</p>

		<script type="text/javascript">

			var w = 900;
			var h = 700;
			var padding = [ 20, 10, 50, 75 ];


			var dateFormat = d3.time.format("%Y");

var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);

var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);

var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5)
.tickFormat(function(d) {
return dateFormat(d);
							});

var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");

var line = d3.svg.line()
    .x(function(d) {
        return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
    return yScale(d.federalfunding);
				});

var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);

d3.csv("muni_fed.csv", function(muniData) {

d3.csv("bart_fed.csv", function(bartData) {

var mergedData = muniData.concat(bartData);
					console.log(mergedData);

xScale.domain([
d3.min(mergedData, function(d) {
							return dateFormat.parse(d.year);
						}),
d3.max(mergedData, function(d) {
							return dateFormat.parse(d.year);
						})
					]);

yScale.domain([
d3.max(mergedData, function(d) {
							return +d.federalfunding;
						}),
						0
					]);


svg.data([ muniData ]).append("path")
.attr("class", "line muni")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", 2);

svg.data([ bartData ]).append("path")
.attr("class", "line bart")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "blue")
.attr("stroke-width", 2);

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);

svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3]) + ",0)")
.call(yAxis);

});


});


		</script>

	</body>
</html>

## muni_fed.csv

          
            year
            federalfunding

            
              1991
              43074000

            
              1992
              46373000

            
              1993
              25185000

            
              1994
              43731342

            
              1995
              72626441

            
              1996
              69370541

            
              1997
              79942224

            
              1998
              61621794

            
              1999
              65937861

            
              2000
              125341939

            
              2001
              205256730

            
              2002
              166434328

            
              2003
              98408522

            
              2004
              79147748

            
              2005
              65453808

            
              2006
              67572812

            
              2007
              78666955

            
              2008
              65016115

            
              2009
              49660733

            
              2010
              123139931

            
              2011
              137975718

            
              2012
              134884336

            
              2013
              105924060
	year	federalfunding
	1991	21446222
	1992	18045001
	1993	30225384
	1994	66810505
	1995	59039016
	1996	63106700
	1997	53543517
	1998	49081086
	1999	176789205
	2000	270278557
	2001	242386243
	2002	217498961
	2003	99947983
	2004	44224102
	2005	36101294
	2006	37329505
	2007	62578354
	2008	66154998
	2009	80352951
	2010	146587837
	2011	130434986
	2012	149912354
	2013	152224257
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Federal Support for Bay Area Transit Systems</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 24px;
	margin: 0;
	}

	p {
	font-size: 12px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	}

	circle:hover {
	fill: blue;
	}

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

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>
	</head>
	<body>

	<h1>Comparing Federal Outlays for the BART and Muni Systems</h1>

	<p>This line chart compares federal funding for the <strong style="color: red;">SF Muni</strong> and <strong style="color: blue;">BART</strong> systems for the years 1991 to 2013. Source: <a href="http://www.ntdprogram.gov/ntdprogram/data.htm">National Transit Data Base</a>.</p>

	<script type="text/javascript">

	var w = 900;
	var h = 700;
	var padding = [ 20, 10, 50, 75 ];


	var dateFormat = d3.time.format("%Y");

	var xScale = d3.time.scale()
	.range([ padding[3], w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	.range([ padding[0], h - padding[2] ]);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(5)
	.tickFormat(function(d) {
	return dateFormat(d);
	});

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");

	var line = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.y(function(d) {
	return yScale(d.federalfunding);
	});

	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	d3.csv("muni_fed.csv", function(muniData) {

	d3.csv("bart_fed.csv", function(bartData) {

	var mergedData = muniData.concat(bartData);
	console.log(mergedData);

	xScale.domain([
	d3.min(mergedData, function(d) {
	return dateFormat.parse(d.year);
	}),
	d3.max(mergedData, function(d) {
	return dateFormat.parse(d.year);
	})
	]);

	yScale.domain([
	d3.max(mergedData, function(d) {
	return +d.federalfunding;
	}),
	0
	]);


	svg.data([ muniData ]).append("path")
	.attr("class", "line muni")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "red")
	.attr("stroke-width", 2);

	svg.data([ bartData ]).append("path")
	.attr("class", "line bart")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "blue")
	.attr("stroke-width", 2);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (padding[3]) + ",0)")
	.call(yAxis);

	});


	});



	</script>

	</body>
	</html>