VI8

Rajyalakshmi Mukkamala

1.Color the marks by if the QB's school is in the Big Five, Group of Five, or Independent

2.Plot only QBs from schools in the Big Five conferences. Color the marks by conference

3.Plot only the top 5 QBs by rank and color the marks by rank.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>QB's - No Restriction</title>

<h2>Single-hue Colormap </h2>
		
    <p>A lighter color of green to dark green to represent the ordered data. </p>
	<script>
		var margin = {top: 20, right: 20, bottom: 30, left: 30},
			width = 960 - margin.left - margin.right,
			height = 500 - margin.top - margin.bottom;
		// Setup x 
		var xValue = function(d1) { return d1["Rushing TD"];}, // data -> value
			xScale = d3.scale.linear().range([0, width]), // value -> display
			xMap = function(d1) { return xScale(xValue(d1));}, // data -> display
			xAxis = d3.svg.axis().scale(xScale).orient("bottom");
		// Setup y
		var yValue = function(d1) { return d1["Passing TD"];}, // data -> value
			yScale = d3.scale.linear().range([height, 0]), // value -> display
			yMap = function(d1) { return yScale(yValue(d1));}, // data -> display
			yAxis = d3.svg.axis().scale(yScale).orient("left");
		// Setup fill color
		var cValue3 = function(d1) { return d1.Rk;},
			color4 = d3.scale.ordinal()
						.range(colorbrewer.Greens[5]);
		// Add the graph canvas to the body of the webpage
		var svg4 = d3.select("body").append("svg")
						.attr("width", width + margin.left + margin.right)
						.attr("height", height + margin.top + margin.bottom)
					.append("g")
						.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
		// Add the tooltip area to the webpage
		var tooltip = d3.select("body").append("div")
							.attr("class", "tooltip")
							.style("opacity", 0);
		// load data
		d3.csv("passing-stats-2014.csv", function(error, data) {
			// Change string from CSV into number format
			data.forEach(function(d1) {
				d1["Passing TD"] = +d1["Passing TD"];
				d1["Rushing TD"] = +d1["Rushing TD"];
			});
			// Add buffer to data domain so dots won't overlap axis
			xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
			yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);
			// Create x-axis
			svg4.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + height + ")")
					.call(xAxis)
				.append("text")
					.attr("class", "label")
					.attr("x", width)
					.attr("y", -6)
					.style("text-anchor", "end")
					.text("Rushing TDs");
			// Create y-axis
			svg4.append("g")
					.attr("class", "y axis")
					.call(yAxis)
				.append("text")
					.attr("class", "label")
					.attr("transform", "rotate(-90)")
					.attr("y", 6)
					.attr("dy", ".71em")
					.style("text-anchor", "end")
					.text("Passing TDs");
			// Draw dots
			svg4.selectAll(".dot")
				.data(data)
				.enter().append("circle")
				.filter(function(d1) { return d1.Rk < 6 })
				.attr("class", "dot")
				.attr("r", 4.0)
				.attr("cx", xMap)
				.attr("cy", yMap)
				.style("fill", function(d1) { return color4(cValue3(d1));}) 
				.on("mouseover", function(d1) {
					tooltip.transition()
							.duration(200)
							.style("opacity", .9);
					tooltip.html(d1["Player"] + "<br/> " + d1.School + "<br/> " + d1.Conf + "<br/>(" + xValue(d1) 	//Hover information
									+ ", " + yValue(d1) + ")")
							.style("left", (d3.event.pageX + 10) + "px")
							.style("top", (d3.event.pageY - 28) + "px");
				})
				.on("mouseout", function(d1) {
					tooltip.transition()
							.duration(500)
							.style("opacity", 0);
				});
			// Draw legend
			var legend = svg4.selectAll(".legend")
							.data(color4.domain())
							.enter().append("g")
								.attr("class", "legend")
								.attr("transform", function(d1, i) { return "translate(10," + (i+7) * 20 + ")"; });
			// Draw legend colored rectangles
			legend.append("rect")
					.attr("x", width - 18)
					.attr("width", 18)
					.attr("height", 18)
					.style("fill", color4);
			// Draw legend text
			legend.append("text")
					.attr("x", width - 24)
					.attr("y", 9)
					.attr("dy", ".35em")
					.style("text-anchor", "end")
					.text(function(d1) { return d1;})
		});
		
	</script>

</body>

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

Modified http://d3js.org/colorbrewer.v1.min.js to a secure url

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

https://d3js.org/colorbrewer.v1.min.js