question 3: Plot only the top 5 QBs by rank and color the marks by rank.
a: choose a multi-hue colormap
The multiple hue varies in such a way that with increase in rank the intensity of color also increases.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.dot { | |
stroke: #000; | |
} | |
.tooltip { | |
position: absolute; | |
width: 200px; | |
height: 28px; | |
pointer-events: none; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scale.linear() | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.dot { | |
stroke: #000; | |
} | |
.tooltip { | |
position: absolute; | |
width: 200px; | |
height: 28px; | |
pointer-events: none; | |
} | |
</style> | |
<body> | |
<script src="//d3js.org/d3.v3.min.js"></script> | |
<script> | |
var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
width = 960 - margin.left - margin.right, | |
height = 500 - margin.top - margin.bottom; | |
var x = d3.scale.linear() | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left"); | |
var cValue = function(d) { | |
if(d['Conf'] == 'Pac-12' ) { | |
return 'Pac-12'; | |
} else if(d['Conf'] == 'MWC'){ | |
return 'MWC'; | |
} else if(d['Conf'] == 'MAC'){ | |
return 'MAC'; | |
} | |
else if(d['Conf'] == 'SEC'){ | |
return 'SEC'; | |
} | |
else if(d['Conf'] == 'Big 12'){ | |
return 'Big 12'; | |
} | |
}, color = function(val) { | |
if(val == 'Pac-12') { | |
return '#edf8fb'; | |
} else if (val == 'MWC') { | |
return '#b3cde3'; | |
} else if (val == 'MAC') { | |
return '#8c96c6'; | |
} | |
else if (val == 'SEC') { | |
return '#8856a7'; | |
} | |
else if (val == 'Big 12') { | |
return '#810f7c'; | |
} | |
} | |
var svg = 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 + ")"); | |
var tooltip = d3.select("body").append("div") | |
.attr("class", "tooltip") | |
.style("opacity", 0); | |
d3.csv("stats.csv", function(error, data) { | |
if (error) throw error; | |
data.forEach(function(d) { | |
if(d['Conf'] == 'Pac-12' || d['Conf'] == 'MWC' || d['Conf'] == 'MAC' || d['Conf'] == 'SEC' || d['Conf'] == 'Big 12') { | |
d.PassingTD = +d.PassingTD; | |
d.RushingTD = +d.RushingTD; | |
} | |
}); | |
x.domain(d3.extent(data, function(d) { return d.PassingTD; })).nice(); | |
y.domain(d3.extent(data, function(d) { return d.RushingTD; })).nice(); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(15," + height + ")") | |
.call(xAxis) | |
.append("text") | |
.attr("class", "label") | |
.attr("x", width) | |
.attr("y", -6) | |
.style("text-anchor", "end") | |
.text("PassingTD"); | |
svg.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("RushingTD") | |
svg.selectAll(".dot") | |
.data(data) | |
.enter().append("circle") | |
.attr("class", "dot") | |
.attr("r", 5) | |
.attr("cx", function(d) { if(d['Conf'] == 'Pac-12' || d['Conf'] == 'MWC' || d['Conf'] == 'MAC' || d['Conf'] == 'SEC' || d['Conf'] == 'Big 12') return x(d.PassingTD); }) | |
.attr("cy", function(d) { if(d['Conf'] == 'Pac-12' || d['Conf'] == 'MWC' || d['Conf'] == 'MAC' || d['Conf'] == 'SEC' || d['Conf'] == 'Big 12') return y(d.RushingTD); }) | |
.style("fill", function(d) { return color(cValue(d));}) | |
.on("mouseover", function(d) { | |
tooltip.transition() | |
.duration(200) | |
.style("opacity", .9); | |
tooltip.html(d["Player"] + "<br/> " + d.School + "<br/>"+ d.Conf) | |
.style("left", (d3.event.pageX + 5) + "px") | |
.style("top", (d3.event.pageY - 28) + "px"); | |
}) | |
.on("mouseout", function(d) { | |
tooltip.transition() | |
.duration(500) | |
.style("opacity", 0); | |
}); | |
var legend = svg.selectAll(".legend") | |
.data(['Pac-12', 'MWC', 'MAC','SEC','Big 12']) | |
.enter().append("g") | |
.attr("class", "legend") | |
.attr("transform", function(d, i) { return "translate(22," + i * 22 + ")"; }); | |
legend.append("rect") | |
.attr("x", width - 25) | |
.attr("width", 25) | |
.attr("height", 25) | |
.style("fill", color); | |
legend.append("text") | |
.attr("x", width - 24) | |
.attr("y", 9) | |
.attr("dy", ".35em") | |
.style("text-anchor", "end") | |
.text(function(d) { return d; }); | |
}); | |
</script> | |
</body> | |
</html> |
Rk | Player | School | Conf | Cmp | PassingAttempts | Pct | Passing Yards | Y/A | AY/A | PassingTD | Interceptions | Rate | RushingAttempts | Rushing Yards | Rushing Avg | RushingTD | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Marcus Mariota | Oregon | Pac-12 | 254 | 372 | 68.3 | 3773 | 10.1 | 11.9 | 38 | 2 | 186.1 | 117 | 669 | 5.7 | 14 | |
2 | Garrett Grayson | Colorado State | MWC | 250 | 386 | 64.8 | 3779 | 9.8 | 10.7 | 32 | 6 | 171.3 | 53 | -25 | -0.5 | 0 | |
3 | Zach Terrell | Western Michigan | MAC | 231 | 330 | 70.0 | 3146 | 9.5 | 9.6 | 23 | 10 | 167.0 | 67 | 203 | 3.0 | 3 | |
4 | Blake Sims | Alabama | SEC | 230 | 355 | 64.8 | 3250 | 9.2 | 9.7 | 26 | 7 | 161.9 | 73 | 321 | 4.4 | 6 | |
5 | Jake Waters | Kansas State | Big 12 | 231 | 349 | 66.2 | 3163 | 9.1 | 9.4 | 20 | 6 | 157.8 | 139 | 471 | 3.4 | 8 |