Exercise for Module 4

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

body {
				background-color: lightgrey;
			}

svg {
				background-color: white;
			}

rect:hover {
				fill: orange;
			}

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

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

.y.axis path,
			.y.axis line {
				opacity: 0;
			}

</style>

</head>
	<body>

<p>Exercise for Module 4: Scales and Stuff</p>
		<h2>Ranking: Brazilian Soccer League, Top20 Performances</h2>
		<p><em>From 2003 to 2014, Divisions <span style="background-color:lightgreen">A</span> and <span style="background-color:salmon">B</span> | Percentage of points won</em></p>
	
		<script type="text/javascript">

var w = 600;
			var h = 500;
			var padding = [ 40, 40, 40, 150 ];

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

var heightScale = d3.scale.ordinal()
					.rangeRoundBands([ padding[0], h - padding[2] ], 0.3);

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

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

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);

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

widthScale.domain([0, 1]);

heightScale.domain(top20.map(function(d) {
			return d.Team + " " + d.Year;
		}));

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

rects.attr("x", padding[3])
				.attr("y", function(d) {
					return heightScale(d.Team + " " + d.Year);
				})
				.attr("width", function(d) {
					return widthScale(d.PctPts);
				})
				.attr("height", heightScale.rangeBand())
				.style("fill", function(d) {
					if (d.Division == "A") {
						return "lightgreen";
					} else {
						return "salmon";
					}
					
				})
				.attr("onmouseover", "evt.target.setAttribute('opacity', '0.5');")
				.attr("onmouseout", "evt.target.setAttribute('opacity','1)');")

.append("title")
				.text(function(d) {
					return d.PctPts * 100 + "%";
				});

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

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

});
		</script>

</body>
</html>

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

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