johndhancock · April 12, 2015 18:26
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Loading CSV Data with D3</title>
 		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
 	</head>
 	<body>

 		<style type="text/css">

 			body {
 				background-color: white;
 				font-family: "Helvetica Neue", Arial, sans-serif;
 			}
 			h1 {
 				font-size: 36px;
 				margin: 0;
 			}
 			p {
 				font-size: 14px;
 				margin: 18px 0 0 0;
 			}
 			svg {
 				background-color: white;
 			}
 			.axis path, .axis line {
 				fill: none;
 				stroke: #545454;
 				shape-rendering: crispEdges;
 			}
 			.axis text {
 				font-family: "Helvetica Neue", Arial, sans-serif;
 				font-size: 10px;
 			}

 			.y.axis text {
 				font-size: 8px;
 			}
 			.y.axis path, .y.axis line {
 				opacity: 0;
 			}
 		</style>
 	
 		<h1>Runningbacks with 420 or more touches in a season</h1>
 		<p>Sixteen running backs have had 420 or more touches in a single season since the NFL/AFL merger in 1970. For some, the 420-plus season was the beginning of the end for a career.</p>

 		<script type="text/javascript">		


 			var dimensions = {
 				w: 600,
 				h: 2000,
 				padding: {
 					t: 25,
 					r: 25,
 					b: 25,
 					l: 125
 				}
 			}


 			var xScale = d3.scale.linear()
 							.range([0, dimensions.w - dimensions.padding.r - dimensions.padding.l]);

 			var yScale = d3.scale.ordinal()
 							.rangeRoundBands([dimensions.padding.t, dimensions.h - dimensions.padding.b], .5);


 			var xAxis = d3.svg.axis()	
 							.scale(xScale)
 							.orient('bottom');

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


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


 				//Load in contents of CSV file
 				d3.csv("TouchesData.csv", function(data) {

 					xScale.domain([0, d3.max(data, function(d) {
 						return +d.YScm;
 					}) ]);

 					yScale.domain(data.map(function(d) { return d.Player; } ));

 					var rects = svg.selectAll("rect")
 						.data(data)
 						.enter()
 						.append("rect");

 					rects.attr("x", dimensions.padding.l)
 						.attr("y", function(d) {
 							return yScale(d.Player);
 						})
 						.attr("width", function(d) {
 							return xScale(d.YScm);
 						})
 						.attr("height", yScale.rangeBand())
 						.style("fill",function(d) {
 							return d.Touches >= 420 ? "red" : "#545454	";
 						});

 					svg.append("g")
 						.attr("class", "x axis")
 						.attr("transform", "translate(" + dimensions.padding.l + "," + (dimensions.h - dimensions.padding.b) +")")
 						.call(xAxis);

 					svg.append("g")
 						.attr("class", "y axis")
 						.attr("transform", "translate(" + dimensions.padding.l + ",0)")
 						.call(yAxis);
 				});


 		</script>

 	</body>
 </html>
diff --git a/TouchesData.csv b/TouchesData.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Loading CSV Data with D3</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	</head>
	<body>

	<style type="text/css">

	body {
	background-color: white;
	font-family: "Helvetica Neue", Arial, sans-serif;
	}
	h1 {
	font-size: 36px;
	margin: 0;
	}
	p {
	font-size: 14px;
	margin: 18px 0 0 0;
	}
	svg {
	background-color: white;
	}
	.axis path, .axis line {
	fill: none;
	stroke: #545454;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 10px;
	}

	.y.axis text {
	font-size: 8px;
	}
	.y.axis path, .y.axis line {
	opacity: 0;
	}
	</style>

	<h1>Runningbacks with 420 or more touches in a season</h1>
	<p>Sixteen running backs have had 420 or more touches in a single season since the NFL/AFL merger in 1970. For some, the 420-plus season was the beginning of the end for a career.</p>

	<script type="text/javascript">


	var dimensions = {
	w: 600,
	h: 2000,
	padding: {
	t: 25,
	r: 25,
	b: 25,
	l: 125
	}
	}


	var xScale = d3.scale.linear()
	.range([0, dimensions.w - dimensions.padding.r - dimensions.padding.l]);

	var yScale = d3.scale.ordinal()
	.rangeRoundBands([dimensions.padding.t, dimensions.h - dimensions.padding.b], .5);


	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient('bottom');

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


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


	//Load in contents of CSV file
	d3.csv("TouchesData.csv", function(data) {

	xScale.domain([0, d3.max(data, function(d) {
	return +d.YScm;
	}) ]);

	yScale.domain(data.map(function(d) { return d.Player; } ));

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", dimensions.padding.l)
	.attr("y", function(d) {
	return yScale(d.Player);
	})
	.attr("width", function(d) {
	return xScale(d.YScm);
	})
	.attr("height", yScale.rangeBand())
	.style("fill",function(d) {
	return d.Touches >= 420 ? "red" : "#545454 ";
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + dimensions.padding.l + "," + (dimensions.h - dimensions.padding.b) +")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + dimensions.padding.l + ",0)")
	.call(yAxis);
	});


	</script>

	</body>
	</html>
Player	Age	Games	Started	Rush	RushYds	RushTD	Rec	RecYds	RecTD	Touches	YScm
James Wilder (1981)	23	16	16	107	370	4	48	507	1	155	877
James Wilder (1982)	24	9	9	83	324	3	53	466	1	136	790
James Wilder (1983)	25	10	10	161	640	4	57	380	2	218	1020
James Wilder (1984)	26	16	16	407	1544	13	85	685	0	492	2229
James Wilder (1985)	27	16	16	365	1300	10	53	341	0	418	1641
James Wilder (1986)	28	12	12	190	704	2	43	326	1	233	1030
James Wilder (1987)	29	12	12	106	488	0	40	328	1	146	816
James Wilder (1988)	30	7	7	86	343	1	15	124	0	101	467
James Wilder (1989)	31	15	4	70	244	0	36	335	3	106	579
James Wilder (1990)	32	16	0	11	51	0	1	8	1	12	59
Larry Johnson (2003)	24	6	0	20	85	1	1	2	0	21	87
Larry Johnson (2004)	25	10	3	120	581	9	22	278	2	142	859
Larry Johnson (2005)	26	16	9	336	1750	20	33	343	1	369	2093
Larry Johnson (2006)	27	16	16	416	1789	17	41	410	2	457	2199
Larry Johnson (2007)	28	8	8	158	559	3	30	186	1	188	745
Larry Johnson (2008)	29	12	12	193	874	5	12	74	0	205	948
Larry Johnson (2009)	30	14	7	178	581	0	15	80	0	193	661
Larry Johnson (2010)	31	2	0	5	2	0	0	0	0	5	2
Larry Johnson (2011)	32	1	0	1	2	0	0	0	0	1	2
Eddie George (1996)	23	16	16	335	1368	8	23	182	0	358	1550
Eddie George (1997)	24	16	16	357	1399	6	7	44	1	364	1443
Eddie George (1998)	25	16	16	348	1294	5	37	310	1	385	1604
Eddie George (1999)	26	16	16	320	1304	9	47	458	4	367	1762
Eddie George (2000)	27	16	16	403	1509	14	50	453	2	453	1962
Eddie George (2001)	28	16	16	315	939	5	37	279	0	352	1218
Eddie George (2002)	29	16	16	343	1165	12	36	255	2	379	1420
Eddie George (2003)	30	16	16	312	1031	5	22	163	0	334	1194
Eddie George (2004)	31	13	8	132	432	4	9	83	0	141	515
LaDainian Tomlinson (2001)	22	16	16	339	1236	10	59	367	0	398	1603
LaDainian Tomlinson (2002)	23	16	16	372	1683	14	79	489	1	451	2172
LaDainian Tomlinson (2003)	24	16	16	313	1645	13	100	725	4	413	2370
LaDainian Tomlinson (2004)	25	15	15	339	1335	17	53	441	1	392	1776
LaDainian Tomlinson (2005)	26	16	16	339	1462	18	51	370	2	390	1832
LaDainian Tomlinson (2006)	27	16	16	348	1815	28	56	508	3	404	2323
LaDainian Tomlinson (2007)	28	16	16	315	1474	15	60	475	3	375	1949
LaDainian Tomlinson (2008)	29	16	16	292	1110	11	52	426	1	344	1536
LaDainian Tomlinson (2009)	30	14	14	223	730	12	20	154	0	243	884
LaDainian Tomlinson (2010)	31	15	13	219	914	6	52	368	0	271	1282
LaDainian Tomlinson (2011)	32	14	1	75	280	1	42	449	2	117	729
Edgerrin James (1999)	21	16	16	369	1553	13	62	586	4	431	2139
Edgerrin James (2000)	22	16	16	387	1709	13	63	594	5	450	2303
Edgerrin James (2001)	23	6	6	151	662	3	24	193	0	175	855
Edgerrin James (2002)	24	14	14	277	989	2	61	354	1	338	1343
Edgerrin James (2003)	25	13	13	310	1259	11	51	292	0	361	1551
Edgerrin James (2004)	26	16	16	334	1548	9	51	483	0	385	2031
Edgerrin James (2005)	27	15	15	360	1506	13	44	337	1	404	1843
Edgerrin James (2006)	28	16	16	337	1159	6	38	217	0	375	1376
Edgerrin James (2007)	29	16	16	324	1222	7	24	204	0	348	1426
Edgerrin James (2008)	30	13	7	133	514	3	12	85	0	145	599
Edgerrin James (2009)	31	7	0	46	125	0	3	19	0	49	144
DeMarco Murray (2011)	23	13	7	164	897	2	26	183	0	190	1080
DeMarco Murray (2012)	24	10	10	161	663	4	34	247	0	195	910
DeMarco Murray (2013)	25	14	14	217	1121	9	53	350	1	270	1471
DeMarco Murray (2014)	26	16	16	392	1845	13	57	416	0	449	2261
Marcus Allen (1982))	22	9	9	160	697	11	38	401	3	198	1098
Marcus Allen (1983))	23	16	15	266	1014	9	68	590	2	334	1604
Marcus Allen (1984))	24	16	16	275	1168	13	64	758	5	339	1926
Marcus Allen (1985))	25	16	16	380	1759	11	67	555	3	447	2314
Marcus Allen (1986))	26	13	10	208	759	5	46	453	2	254	1212
Marcus Allen (1987))	27	12	12	200	754	5	51	410	0	251	1164
Marcus Allen (1988))	28	15	15	223	831	7	34	303	1	257	1134
Marcus Allen (1989))	29	8	5	69	293	2	20	191	0	89	484
Marcus Allen (1990))	30	16	15	179	682	12	15	189	1	194	871
Marcus Allen (1991))	31	8	2	63	287	2	15	131	0	78	418
Marcus Allen (1992))	32	16	0	67	301	2	28	277	1	95	578
Marcus Allen (1993))	33	16	10	206	764	12	34	238	3	240	1002
Marcus Allen (1994))	34	13	13	189	709	7	42	349	0	231	1058
Marcus Allen (1995))	35	16	15	207	890	5	27	210	0	234	1100
Marcus Allen (1996))	36	16	15	206	830	9	27	270	0	233	1100
Marcus Allen (1997))	37	16	0	124	505	11	11	86	0	135	591
Ricky Williams (1999)	22	12	12	253	884	2	28	172	0	281	1056
Ricky Williams (2000)	23	10	10	248	1000	8	44	409	1	292	1409
Ricky Williams (2001)	24	16	16	313	1245	6	60	511	1	373	1756
Ricky Williams (2002)	25	16	16	383	1853	16	47	363	1	430	2216
Ricky Williams (2003)	26	16	16	392	1372	9	50	351	1	442	1723
Ricky Williams (2005)	28	12	3	168	743	6	17	93	0	185	836
Ricky Williams (2007)	30	1	0	6	15	0	0	0	0	6	15
Ricky Williams (2008)	31	16	3	160	659	4	29	219	1	189	878
Ricky Williams (2009)	32	16	7	241	1121	11	35	264	2	276	1385
Ricky Williams (2010)	33	16	0	159	673	2	19	141	1	178	814
Ricky Williams (2011)	34	16	0	108	444	2	13	83	0	121	527
Eric Dickerson (1983)	23	16	16	390	1808	18	51	404	2	441	2212
Eric Dickerson (1984)	24	16	16	379	2105	14	21	139	0	400	2244
Eric Dickerson (1985)	25	14	14	292	1234	12	20	126	0	312	1360
Eric Dickerson (1986)	26	16	16	404	1821	11	26	205	0	430	2026
Eric Dickerson (1987)	27	12	10	283	1288	6	18	171	0	301	1459
Eric Dickerson (1988)	28	16	16	388	1659	14	36	377	1	424	2036
Eric Dickerson (1989)	29	15	14	314	1311	7	30	211	1	344	1522
Eric Dickerson (1990)	30	11	8	166	677	4	18	92	0	184	769
Eric Dickerson (1991)	31	10	9	167	536	2	41	269	1	208	805
Eric Dickerson (1992)	32	16	15	187	729	2	14	85	1	201	814
Eric Dickerson (1993)	33	4	2	26	91	0	6	58	0	32	149
Emmitt Smith (1990)	21	16	15	241	937	11	24	228	0	265	1165
Emmitt Smith (1991)	22	16	16	365	1563	12	49	258	1	414	1821
Emmitt Smith (1992)	23	16	16	373	1713	18	59	335	1	432	2048
Emmitt Smith (1993)	24	14	13	283	1486	9	57	414	1	340	1900
Emmitt Smith (1994)	25	15	15	368	1484	21	50	341	1	418	1825
Emmitt Smith (1995)	26	16	16	377	1773	25	62	375	0	439	2148
Emmitt Smith (1996)	27	15	15	327	1204	12	47	249	3	374	1453
Emmitt Smith (1997)	28	16	16	261	1074	4	40	234	0	301	1308
Emmitt Smith (1998)	29	16	16	319	1332	13	27	175	2	346	1507
Emmitt Smith (1999)	30	15	15	329	1397	11	27	119	2	356	1516
Emmitt Smith (2000)	31	16	16	294	1203	9	11	79	0	305	1282
Emmitt Smith (2001)	32	14	14	261	1021	3	17	116	0	278	1137
Emmitt Smith (2002)	33	16	16	254	975	5	16	89	0	270	1064
Emmitt Smith (2003)	34	10	5	90	256	2	14	107	0	104	363
Emmitt Smith (2004)	35	15	15	267	937	9	15	105	0	282	1042
Jamal Anderson (1994)	22	3	0	2	-1	0	0	0	0	2	0
Jamal Anderson (1995)	23	16	0	39	161	1	4	42	0	43	203
Jamal Anderson (1996)	24	16	12	232	1055	5	49	473	1	281	1528
Jamal Anderson (1997)	25	16	15	290	1002	7	29	284	3	319	1286
Jamal Anderson (1998)	26	16	16	410	1846	14	27	319	2	437	2165
Jamal Anderson (1999)	27	2	2	19	59	0	2	34	0	21	93
Jamal Anderson (2000)	28	16	16	282	1024	6	42	382	0	324	1406
Jamal Anderson (2001)	29	3	3	55	190	1	3	111	1	58	301
Steven Jackson (2004)	21	14	3	134	673	4	19	189	0	153	862
Steven Jackson (2005)	22	15	15	254	1046	8	43	320	2	297	1366
Steven Jackson (2006)	23	16	16	346	1528	13	90	806	3	436	2334
Steven Jackson (2007)	24	12	12	237	1002	5	38	271	1	275	1273
Steven Jackson (2008)	25	12	11	253	1042	7	40	379	1	293	1421
Steven Jackson (2009)	26	15	15	324	1416	4	51	322	0	375	1738
Steven Jackson (2010)	27	16	16	330	1241	6	46	383	0	376	1624
Steven Jackson (2011)	28	15	15	260	1145	5	42	333	1	302	1478
Steven Jackson (2012)	29	16	16	258	1045	4	38	321	0	296	1366
Steven Jackson (2013)	30	12	12	157	543	6	33	191	1	190	734
Steven Jackson (2014)	31	15	15	190	707	6	20	148	0	210	855
Gerald Riggs (1982)	22	9	0	78	299	5	23	185	0	101	484
Gerald Riggs (1983)	23	14	0	100	437	8	17	149	0	117	586
Gerald Riggs (1984)	24	15	14	353	1486	13	42	277	0	395	1763
Gerald Riggs (1985)	25	16	16	397	1719	10	33	267	0	430	1986
Gerald Riggs (1986)	26	16	15	343	1327	9	24	136	0	367	1463
Gerald Riggs (1987)	27	12	12	203	875	2	25	199	0	228	1074
Gerald Riggs (1988)	28	9	9	113	488	1	22	171	0	135	659
Gerald Riggs (1989)	29	12	7	201	834	4	7	67	0	208	901
Gerald Riggs (1990)	30	10	0	123	475	6	7	60	0	130	535
Gerald Riggs (1991)	31	16	0	78	248	11	1	5	0	79	253
Barry Foster (1990)	22	16	1	36	203	1	1	2	0	37	205
Barry Foster (1991)	23	10	9	96	488	1	9	117	1	105	605
Barry Foster (1992)	24	16	15	390	1690	11	36	344	0	426	2034
Barry Foster (1993)	25	9	9	177	711	8	27	217	1	204	928
Barry Foster (1994)	26	11	10	216	851	5	20	124	0	236	975
Walter Payton (1975)	21	13	7	196	679	7	33	213	0	229	892
Walter Payton (1976)	22	14	14	311	1390	13	15	149	0	326	1539
Walter Payton (1977)	23	14	14	339	1852	14	27	269	2	366	2121
Walter Payton (1978)	24	16	16	333	1395	11	50	480	0	383	1875
Walter Payton (1979)	25	16	16	369	1610	14	31	313	2	400	1923
Walter Payton (1980)	26	16	16	317	1460	6	46	367	1	363	1827
Walter Payton (1981)	27	16	16	339	1222	6	41	379	2	380	1601
Walter Payton (1982)	28	9	9	148	596	1	32	311	0	180	907
Walter Payton (1983)	29	16	16	314	1421	6	53	607	2	367	2028
Walter Payton (1984)	30	16	16	381	1684	11	45	368	0	426	2052
Walter Payton (1985)	31	16	16	324	1551	9	49	483	2	373	2034
Walter Payton (1986)	32	16	16	321	1333	8	37	382	3	358	1715
Walter Payton (1987)	33	12	12	146	533	4	33	217	1	179	750
Deuce McAllister (2001)	23	16	4	16	91	1	15	166	1	31	257
Deuce McAllister (2002)	24	15	15	325	1388	13	47	352	3	372	1740
Deuce McAllister (2003)	25	16	16	351	1641	8	69	516	0	420	2157
Deuce McAllister (2004)	26	14	14	269	1074	9	34	228	0	303	1302
Deuce McAllister (2005)	27	5	5	93	335	3	17	117	0	110	452
Deuce McAllister (2006)	28	15	13	244	1057	10	30	198	0	274	1255
Deuce McAllister (2007)	29	3	3	24	92	0	4	15	0	28	107
Deuce McAllister (2008)	30	13	6	107	418	5	18	128	1	125	546