Knight Project Week 5: Running backs with 420+ touches

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

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>

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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js