Exercise for Module 5

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Scatterplot</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 5: Scatterplot</p>
		<h2>Brazilian Soccer League (Goals For vs. Performance)</h2>
		<p><em>From 2003 to 2014, Divisions <span style="background-color:lightgreen">A</span> and <span style="background-color:salmon">B</span></em></p>
	
		<script type="text/javascript">

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

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

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

var xAxis = d3.svg.axis()
				.scale(xScale)
				.tickFormat(function(d) { return d * 100 + "%"; })
				.orient("bottom");

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

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.descending(a.PctPts, b.PctPts);
				});

//			var top20 =	data.slice(0,20);

//			xScale.domain([0, d3.max(top20, function(d) {
//				return +d.PctPts;
//			})]);

xScale.domain([0.1, 0.8]);

yScale.domain([2.5, 0.5]);

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(d.PctPts);
				})
					.attr("cy", function(d) {
					return yScale(d.aGF);
				})
					.attr("r", 3);

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("Percentage of points won");

canvas.append("text")
				.attr("x", (padding[3] * 0.5))
				.attr("y", h * 0.5 )
				.attr("text-anchor", "middle")
				.text("Goals For Average")
				.attr("transform", "rotate(-90, 40, 250)");

});
		</script>

</body>
</html>

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

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