Skip to content

Instantly share code, notes, and snippets.

@Lecy277

Lecy277/.block

Last active April 16, 2018 00:37
Show Gist options
  • Save Lecy277/163bcc6bafcf9868153a99e309a95348 to your computer and use it in GitHub Desktop.
Save Lecy277/163bcc6bafcf9868153a99e309a95348 to your computer and use it in GitHub Desktop.
Download ZIP
cs 724 final chart
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<h2>Does a great defense make a superbowl winning quarterback appear greater then they are?</h2>
<style>
.rectangle {
fill: blue;
}
.rectangle:hover {
fill: orange;
}
.axis {
font: 14px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<div id="drop" align=center></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 50, right: 45, bottom: 95, left: 45},
width = 1000 - margin.left - margin.right,
height = 475 - margin.top - margin.bottom;
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 + ")");
d3.tsv("mergedqb.txt", function(error, data){
// Get every column value
var elements = Object.keys(data[0])
.filter(function(d){
return ((d != "SuperBowlWinningQb") & (d != "SuperBowlD")&(d !="Year") );});
var selection = elements[0];
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d){
return +d[selection];
})])
.range([0,height]);
var y1 = d3.scale.linear()
.domain([0, d3.max(data, function(d){
return +d[selection];
})])
.range([height,0]);
var x = d3.scale.ordinal()
.domain(data.map(function(d){ return d.Year;}))
.rangeBands([0,width ]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y1)
.orient("left");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.style("font-size", "10px")
.style("text-anchor", "end")
.attr("dx", "-0.920000000000002em")
.attr("dy", "-.60em")
.attr("transform", "rotate(-90)" );
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.selectAll("rectangle")
.data(data)
.enter()
.append("rect")
.attr("class","rectangle")
.attr("width", width/data.length)
.attr("height", function(d){
return height+2 - y1(+d[selection]);
})
.attr("x", function(d, i){
return (width / data.length) * i ;
})
.attr("y", function(d){
return y1(+d[selection]);
})
.append("title")
.text(function(d){
return d.Year+ " "+ d.SuperBowlWinningQb+" "+ d[selection];
});
var selector = d3.select("#drop")
.append("select")
.attr("id","dropdown")
.on("change", function(d){
selection = document.getElementById("dropdown");
if (this.value === "RegularSeasonQbRating"){
y1.domain([0, d3.max(data, function(d){
return +d[selection.value];})]);
yAxis.scale(y1);
d3.selectAll(".rectangle")
.transition()
.attr("height", function(d){
return height - y1(+d[selection.value]);
})
.attr("x", function(d, i){
return (width / data.length) * i ;
})
.attr("y", function(d){
return y1(+d[selection.value]);
})
.style("fill", function(d) { if (d.QBRank == "1") {return "red"}
else if (d.QBRank =="2") {return "red"}
else if (d.QBRank =="3") {return "red"}
else if (d.QBRank =="4") {return "red"}
else if (d.QBRank =="5") {return "red"}})
.ease("linear")
.select("title")
.text(function(d){
return d.Year+ " "+ d.SuperBowlWinningQb+ " "+ d[selection.value];
});
d3.selectAll("g.y.axis")
.transition()
.call(yAxis);}
else if(this.value === "QBRank"){
y.domain([1, d3.max(data, function(d){
return +d[selection.value];})]);
yAxis.scale(y);
d3.selectAll(".rectangle")
.transition()
.attr("height", function(d){
return height - y(+d[selection.value]);
})
.attr("x", function(d, i){
return (width / data.length) * i ;
})
.attr("y", function(d){
return y(+d[selection.value]);
})
.style("fill", function(d) {
if (d.QBRank =="1") {return "red"}
else if (d.QBRank =="2") {return "red"}
else if (d.QBRank =="3") {return "red"}
else if (d.QBRank =="4") {return "red"}
else if (d.QBRank =="5") {return "red"}})
.ease("linear")
.select("title")
.text(function(d){
{return d.Year+ " "+ d.SuperBowlWinningQb+ " "+ d[selection.value];}
});
d3.selectAll("g.y.axis")
.transition()
.call(yAxis);}
else {
y.domain([0, d3.max(data, function(d){
return +d[selection.value];})]);
yAxis.scale(y);
d3.selectAll(".rectangle")
.transition()
.attr("height", function(d){
return height - y(+d[selection.value]);
})
.attr("x", function(d, i){
return (width / data.length) * i ;
})
.attr("y", function(d){
return y(+d[selection.value]);
})
.style("fill", function(d) { if (d.DRank == "1") {return "red"}
else if (d.DRank =="2") {return "red"}
else if (d.DRank =="3") {return "red"}
else if (d.DRank =="4") {return "red"}
else if (d.DRank =="5") {return "red"}})
.ease("linear")
.select("title")
.text(function(d){
return d.Year+ " "+ d.SuperBowlD+ " "+ d[selection.value];
});
svg.append("text")
.attr("class", "label")
.attr("x", 175-margin.left) // set x position of label
.attr("y", 16-margin.top/2)
.style("text-anchor", "middle")
.text ("18 Defenses ranked in the top 5 vs only 4 Quarterbacks")
.style('fill', "Black")
d3.selectAll("g.y.axis")
.transition()
.call(yAxis);}});
selector.selectAll("option")
.data(elements)
.enter().append("option")
.attr("value", function(d){
return d;
})
.text(function(d){
return d;
})
//input color legend to chart
// y-axis label
svg.append("text")
.attr("class", "label")
.attr("x", 65-margin.left) // set x position of label
.attr("y", 0-margin.top/2) // set y position of label
.style("text-anchor", "start") // left-justify
.text ("= Ranked in the Top 5")
.style('fill', "Black")
svg.append("text")
.attr("class", "label")
.attr("x", 0-margin.left) // set x position of label
.attr("y", 0-margin.top/2) // set y position of label
.style("text-anchor", "start") // left-justify
.text ("Red Bars")
.style('fill', "Red")
});
</script>
</body>
Raw
mergedqb.txt
Year SuperBowlWinningQb RegularSeasonQbRating SuperBowlD DefensePointsAllowedPerGame DRank QBRank
1990 Jeff Hostetler 83.2 New York Giants 13.2 1 17
1991 Mark Rypien 97.9 Washington Redskins 14 2 7
1992 Troy Aikman 89.5 Dallas Cowboys 15.2 5 8
1993 Troy Aikman 99.0 Dallas Cowboys 15.2 2 7
1994 Steve Young 112.8 San Francisco 49ers 18.5 6 2
1995 Troy Aikman 93.6 Dallas Cowboys 18.2 3 9
1996 Brett Favre 95.8 Green Bay Packers 13.1 1 10
1997 John Elway 87.5 Denver Broncos 17.9 7 12
1998 John Elway 93.0 Denver Broncos 19.3 9 10
1999 Kurt Warner 109.2 St. Louis Rams 15.1 4 3
2000 Trent Dilfer 76.6 Baltimore Ravens 10.3 1 37
2001 Tom Brady 86.5 New England Patriots 17 6 22
2002 Brad Johnson 92.9 Tampa Bay Buccaneers 12.2 1 9
2003 Tom Brady 85.9 New England Patriots 14.9 1 22
2004 Tom Brady 92.6 New England Patriots 16.2 3 15
2005 Ben Roethlisberger 98.6 Pittsburgh Steelers 16.1 3 7
2006 Peyton Manning 101.0 Indianapolis Colts 22.5 23 7
2007 Eli Manning 73.9 New York Giants 21.9 17 44
2008 Ben Roethlisberger 80.1 Pittsburgh Steelers 13.9 1 36
2009 Drew Brees 109.6 New Orleans Saints 21.3 20 2
2010 Aaron Rodgers 101.2 Green Bay Packers 15 2 3
2011 Eli Manning 92.9 New York Giants 25 25 14
2012 Joe Flacco 87.7 Baltimore Ravens 21.5 13 21
2013 Russell Wilson 101.2 Seattle Seahawks 14.4 1 9
2014 Tom Brady 97.4 New England Patriots 19.6 8 11
2015 Peyton Manning 67.9 Denver Broncos 18.5 4 63
2016 Tom Brady 112.2 New England Patriots 15.6 1 6
2017 Nick Foles 79.5 Philadelphia Eagles 18.4 4 38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment