Exercise for Module 6

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Line Charts</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>

body {
				background-color: lightgrey;
			}

svg {
				background-color: white;
			}

circle:hover {
				stroke-width: 1px;
				r: 6;
			}

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

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

</style>

</head>
	<body>

<p>Exercise for Module 6: Line Charts</p>
		<h2>Brazilian Soccer League (<span style="color:blue">Cruzeiro</span> vs. Corinthians)</h2>
		<p><em>From 2003 to 2014 (Divisions A and B aggregate)</span></em></p>
	
		<script type="text/javascript">

var w = 800;
			var h = 700;
			var padding = [ 80, 40, 80, 80 ]; // T R B L

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

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

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

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

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

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

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

d3.csv("BrazilianLeague_A_B_2003_2014.csv", function(data) {

data.sort(function(a, b) {
					return d3.ascending(a.Team, b.Team);
				});

var Cruzeiro = data.slice(171,183);
			var Corinthians = data.slice(138,150);

console.log(Cruzeiro);
			console.log(Corinthians);

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

yScale.domain([1, 25]);

//			var circle = canvas.selectAll("circle")
//					.data(data)
//					.enter()
//					.append("circle");
//
//			circle.attr("cx", padding[0])
//				.attr("cy", h - padding[0])
//				.attr("r", .1)
//				.style("fill", function(d) {
//					if (d.Division == "A") {
//						return "lightgreen";
//					} else {
//						return "salmon";
//					}
//				})
//				.attr("stroke", "black")
//				.attr("stroke-width", "0px")
//				.attr("onmouseover", "evt.target.setAttribute('r', '4');")
//				.attr("onmouseout", "evt.target.setAttribute('r', '3');")

//				.append("title")
//				.text(function(d) {
//					return d.Team + " " + d.Year + " (" + d.PctPts * 100 + "% | " + d.aGF + ")";
//				});

//				circle.sort(function(a, b) {
//					return d3.ascending(+a.Position, +b.Position);
//				})
//
//				circle.transition()
//					.delay(function(d, i) {
//						return i * 5;
//					})
//					.duration(1000)
//					.attr("cx", function(d) {
//					return xScale(dateFormat.parse(d.Year));
//				})
//					.attr("cy", function(d) {
//					return yScale(d.RelPos);
//				})
//					.attr("r", 3);

canvas.data([ Cruzeiro ])
				.append("path")
				.attr("class", "line")
				.attr("d", line)
				.attr("fill", "none")
				.attr("stroke", "Blue")
				.attr("stroke-width", 2);

canvas.data([ Corinthians ])
				.append("path")
				.attr("class", "line")
				.attr("d", line)
				.attr("fill", "none")
				.attr("stroke", "black")
				.attr("stroke-width", 2);

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

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

canvas.append("text")
				.attr("x", (w - padding[3]) * 0.5 + padding[3])
				.attr("y", h - (padding[0] * 0.5))
				.attr("text-anchor", "middle")
				.text("Year");

canvas.append("text")
				.attr("x", 0)
				.attr("y", h * 0.5)
				.attr("text-anchor", "middle")
				.text("Position")
				.attr("transform", "rotate(-90, -60, 250)");

});
		</script>

</body>
</html>

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

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