johndhancock · April 20, 2015 03:57
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;
 			}
 			circle:hover {
 				cursor: pointer;
 			}
 			.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;
 			}
 			.label {
 				font-size: 10px;
 			}
 		
 		</style>
 	
 		<h1>Running backs 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. Below is each season of those players' careers. Blue circles indicate a year before a player reached the 420-touch mark. Green circles are seasons after which a player had 420 touches in a year. Red circles are the first year in which a player reached 420 or more touches.</p>

 		<script type="text/javascript">		


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


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

 			var yScale = d3.scale.linear()
 							.range([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.Touches;
 					}) ]);

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

 					var circles = svg.selectAll("circle")
 						.data(data)
 						.enter()
 						.append("circle");

 					circles.attr("cx", function(d){
 						return xScale(d.Touches)
 					})
 						.attr("cy", function(d) {
 							return yScale(d.YScm);
 						})
 						.attr("r", .25)
 						.style("fill",function(d) {
 							switch(d.Era){
 								case "pre":
 									return "#69D2E7";
 									break;
 								case "current":
 									return "#B11623";
 									break;
 								case "post":
 									return "#519548";
 									break;
 								default:
 									alert("Problem picking round");
 							}
 						})
 						.append("title")
 						.text(function(d){
 							return d.Player + ", " + d.Touches + " touches, " + d.YScm + " yards from scrimmage";
 						})

 					circles.transition()
 						.duration(2000)
 						.attr("r", 5);

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

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

 					svg.append('text')
 						.attr("class", "x axis label")
 						.attr("x", dimensions.padding.l + (dimensions.w /2) )
 						.attr("y", dimensions.h)
 						.style("text-anchor", "middle")
 						.text("TOUCHES IN A SEASON");

 					svg.append('text')
 						.attr("class", "y axis label")
 						.attr("transform", "rotate(-90)")
 						.attr("y", 15)
 						.attr("x", ((dimensions.h + dimensions.padding.t) / 2 - 33)* -1) 
 						.style("text-anchor", "middle")
 						.text("TOTAL YARDS");
 				});


 		</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;
	}
	circle:hover {
	cursor: pointer;
	}
	.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;
	}
	.label {
	font-size: 10px;
	}

	</style>

	<h1>Running backs 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. Below is each season of those players' careers. Blue circles indicate a year before a player reached the 420-touch mark. Green circles are seasons after which a player had 420 touches in a year. Red circles are the first year in which a player reached 420 or more touches.</p>

	<script type="text/javascript">


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


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

	var yScale = d3.scale.linear()
	.range([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.Touches;
	}) ]);

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

	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle");

	circles.attr("cx", function(d){
	return xScale(d.Touches)
	})
	.attr("cy", function(d) {
	return yScale(d.YScm);
	})
	.attr("r", .25)
	.style("fill",function(d) {
	switch(d.Era){
	case "pre":
	return "#69D2E7";
	break;
	case "current":
	return "#B11623";
	break;
	case "post":
	return "#519548";
	break;
	default:
	alert("Problem picking round");
	}
	})
	.append("title")
	.text(function(d){
	return d.Player + ", " + d.Touches + " touches, " + d.YScm + " yards from scrimmage";
	})

	circles.transition()
	.duration(2000)
	.attr("r", 5);

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

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

	svg.append('text')
	.attr("class", "x axis label")
	.attr("x", dimensions.padding.l + (dimensions.w /2) )
	.attr("y", dimensions.h)
	.style("text-anchor", "middle")
	.text("TOUCHES IN A SEASON");

	svg.append('text')
	.attr("class", "y axis label")
	.attr("transform", "rotate(-90)")
	.attr("y", 15)
	.attr("x", ((dimensions.h + dimensions.padding.t) / 2 - 33)* -1)
	.style("text-anchor", "middle")
	.text("TOTAL YARDS");
	});


	</script>

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