Last active
March 23, 2016 04:47
-
-
Save RithikaReddy1/923dd0251e5a793c9337 to your computer and use it in GitHub Desktop.
Visualization Implementation 8
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 11px 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="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 800 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| // 1. a. no restrictions | |
| // setup x | |
| var xValue = function(d) { return d["RushingTD"];}, // data -> value | |
| xScale = d3.scale.linear().range([0, width]), // value -> display | |
| xMap = function(d) { return xScale(xValue(d));}, // data -> display | |
| xAxis = d3.svg.axis().scale(xScale).orient("bottom"); | |
| // setup y | |
| var yValue = function(d) { return d["PassingTD"];}, // data -> value | |
| yScale = d3.scale.linear().range([height, 0]), // value -> display | |
| yMap = function(d) { return yScale(yValue(d));}, // data -> display | |
| yAxis = d3.svg.axis().scale(yScale).orient("left"); | |
| // setup fill color | |
| var cValue = function(d) { | |
| if(d['Conf'] == 'SEC' || d['Conf'] == 'ACC' || d['Conf'] == 'Big 12' || d['Conf'] == 'Pac-12' || d['Conf'] == 'Big Ten') { | |
| return 'Big Five'; | |
| } else if(d['Conf'] == 'American' || d['Conf'] == 'Sun Belt' || d['Conf'] == 'MWC' || d['Conf'] == 'MAC' || d['Conf'] == 'CUSA'){ | |
| return 'Group of Five'; | |
| } else { | |
| return 'Independent'; | |
| } | |
| }, color = function(groupconf) { | |
| if(groupconf == 'Big Five') { | |
| return '#e41a1c'; | |
| } else if (groupconf == 'Group of Five') { | |
| return '#377eb8'; | |
| } else { | |
| return '#4daf4a'; | |
| } | |
| } | |
| // add the graph canvas to the body of the webpage | |
| 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 + ")"); | |
| // 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(d) { | |
| d["PassingTD"] = +d["PassingTD"]; | |
| d["RushingTD"] = +d["RushingTD"]; | |
| //console.log (d.School); | |
| //console.dir (d); | |
| }); | |
| // don't want dots overlapping axis, so add in buffer to data domain | |
| xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]); | |
| yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]); | |
| // scales w/o extra padding | |
| xScale.domain([d3.min(data, xValue), d3.max(data, xValue)]); | |
| yScale.domain([d3.min(data, yValue), d3.max(data, yValue)]); | |
| // x-axis | |
| svg.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"); | |
| // y-axis | |
| 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("Passing TDs"); | |
| // draw dots | |
| svg.selectAll(".dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 3.5) | |
| .attr("cx", xMap) | |
| .attr("cy", yMap) | |
| .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 + 10) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| tooltip.transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }); | |
| // draw legend | |
| var legend = svg.selectAll(".legend") | |
| .data(['Big Five', 'Group of Five', 'Independent']) | |
| .enter().append("g") | |
| .attr("class", "legend") | |
| .attr("transform", function(d, i) { return "translate(30," + (i+7) * 20 + ")"; }); | |
| // draw legend colored rectangles | |
| legend.append("rect") | |
| .attr("x", width - 18) | |
| .attr("width", 18) | |
| .attr("height", 18) | |
| .style("fill", color); | |
| // draw legend text | |
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 11px 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="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 800 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| // 1. b. color-blind safe | |
| // setup x | |
| var xValue = function(d) { return d["RushingTD"];}, // data -> value | |
| xScale = d3.scale.linear().range([0, width]), // value -> display | |
| xMap = function(d) { return xScale(xValue(d));}, // data -> display | |
| xAxis = d3.svg.axis().scale(xScale).orient("bottom"); | |
| // setup y | |
| var yValue = function(d) { return d["PassingTD"];}, // data -> value | |
| yScale = d3.scale.linear().range([height, 0]), // value -> display | |
| yMap = function(d) { return yScale(yValue(d));}, // data -> display | |
| yAxis = d3.svg.axis().scale(yScale).orient("left"); | |
| // setup fill color | |
| var cValue = function(d) { | |
| if(d['Conf'] == 'SEC' || d['Conf'] == 'ACC' || d['Conf'] == 'Big 12' || d['Conf'] == 'Pac-12' || d['Conf'] == 'Big Ten') { | |
| return 'Big Five'; | |
| } else if(d['Conf'] == 'American' || d['Conf'] == 'Sun Belt' || d['Conf'] == 'MWC' || d['Conf'] == 'MAC' || d['Conf'] == 'CUSA'){ | |
| return 'Group of Five'; | |
| } else { | |
| return 'Independent'; | |
| } | |
| }, color = function(groupconf) { | |
| if(groupconf == 'Big Five') { | |
| return '#1b9e77'; | |
| } else if (groupconf == 'Group of Five') { | |
| return '#d95f02'; | |
| } else { | |
| return '#7570b3'; | |
| } | |
| } | |
| // add the graph canvas to the body of the webpage | |
| 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 + ")"); | |
| // 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(d) { | |
| d["PassingTD"] = +d["PassingTD"]; | |
| d["RushingTD"] = +d["RushingTD"]; | |
| //console.log (d.School); | |
| //console.dir (d); | |
| }); | |
| // don't want dots overlapping axis, so add in buffer to data domain | |
| xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]); | |
| yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]); | |
| // scales w/o extra padding | |
| xScale.domain([d3.min(data, xValue), d3.max(data, xValue)]); | |
| yScale.domain([d3.min(data, yValue), d3.max(data, yValue)]); | |
| // x-axis | |
| svg.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"); | |
| // y-axis | |
| 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("Passing TDs"); | |
| // draw dots | |
| svg.selectAll(".dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 3.5) | |
| .attr("cx", xMap) | |
| .attr("cy", yMap) | |
| .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 + 10) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| tooltip.transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }); | |
| // draw legend | |
| var legend = svg.selectAll(".legend") | |
| .data(['Big Five', 'Group of Five', 'Independent']) | |
| .enter().append("g") | |
| .attr("class", "legend") | |
| .attr("transform", function(d, i) { return "translate(20," + (i+7) * 20 + ")"; }); | |
| // draw legend colored rectangles | |
| legend.append("rect") | |
| .attr("x", width - 18) | |
| .attr("width", 18) | |
| .attr("height", 18) | |
| .style("fill", color); | |
| // draw legend text | |
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 11px 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="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 800 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| // 1. a. no restrictions | |
| // setup x | |
| var xValue = function(d) { return d["RushingTD"];}, // data -> value | |
| xScale = d3.scale.linear().range([0, width]), // value -> display | |
| xMap = function(d) { return xScale(xValue(d));}, // data -> display | |
| xAxis = d3.svg.axis().scale(xScale).orient("bottom"); | |
| // setup y | |
| var yValue = function(d) { return d["PassingTD"];}, // data -> value | |
| yScale = d3.scale.linear().range([height, 0]), // value -> display | |
| yMap = function(d) { return yScale(yValue(d));}, // data -> display | |
| yAxis = d3.svg.axis().scale(yScale).orient("left"); | |
| // setup fill color | |
| var cValue = function(d) { | |
| if(d['Conf'] == 'SEC' || d['Conf'] == 'ACC' || d['Conf'] == 'Big 12' || d['Conf'] == 'Pac-12' || d['Conf'] == 'Big Ten') { | |
| return 'Big Five'; | |
| } else if(d['Conf'] == 'American' || d['Conf'] == 'Sun Belt' || d['Conf'] == 'MWC' || d['Conf'] == 'MAC' || d['Conf'] == 'CUSA'){ | |
| return 'Group of Five'; | |
| } else { | |
| return 'Independent'; | |
| } | |
| }, color = function(groupconf) { | |
| if(groupconf == 'Big Five') { | |
| return '#8dd3c7'; | |
| } else if (groupconf == 'Group of Five') { | |
| return '#ffffb3'; | |
| } else { | |
| return '#bebada'; | |
| } | |
| } | |
| // add the graph canvas to the body of the webpage | |
| 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 + ")"); | |
| // 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(d) { | |
| d["PassingTD"] = +d["PassingTD"]; | |
| d["RushingTD"] = +d["RushingTD"]; | |
| //console.log (d.School); | |
| //console.dir (d); | |
| }); | |
| // don't want dots overlapping axis, so add in buffer to data domain | |
| xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]); | |
| yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]); | |
| // scales w/o extra padding | |
| xScale.domain([d3.min(data, xValue), d3.max(data, xValue)]); | |
| yScale.domain([d3.min(data, yValue), d3.max(data, yValue)]); | |
| // x-axis | |
| svg.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"); | |
| // y-axis | |
| 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("Passing TDs"); | |
| // draw dots | |
| svg.selectAll(".dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 3.5) | |
| .attr("cx", xMap) | |
| .attr("cy", yMap) | |
| .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 + 10) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| tooltip.transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }); | |
| // draw legend | |
| var legend = svg.selectAll(".legend") | |
| .data(['Big Five', 'Group of Five', 'Independent']) | |
| .enter().append("g") | |
| .attr("class", "legend") | |
| .attr("transform", function(d, i) { return "translate(20," + (i+7) * 20 + ")"; }); | |
| // draw legend colored rectangles | |
| legend.append("rect") | |
| .attr("x", width - 18) | |
| .attr("width", 18) | |
| .attr("height", 18) | |
| .style("fill", color); | |
| // draw legend text | |
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 11px 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="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 800 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| // setup x | |
| var xValue = function(d) { return d["RushingTD"];}, // data -> value | |
| xScale = d3.scale.linear().range([0, width]), // value -> display | |
| xMap = function(d) { return xScale(xValue(d));}, // data -> display | |
| xAxis = d3.svg.axis().scale(xScale).orient("bottom"); | |
| // setup y | |
| var yValue = function(d) { return d["PassingTD"];}, // data -> value | |
| yScale = d3.scale.linear().range([height, 0]), // value -> display | |
| yMap = function(d) { return yScale(yValue(d));}, // data -> display | |
| yAxis = d3.svg.axis().scale(yScale).orient("left"); | |
| // setup fill color | |
| var cValue = function(d) { return d.Conf;}, | |
| color = function(val) { | |
| if(val == 'SEC') { | |
| return '#e41a1c'; | |
| } else if (val == 'ACC') { | |
| return '#377eb8'; | |
| } else if( val == 'Big 12'){ | |
| return '#4daf4a'; | |
| } | |
| else if(val == 'Pac-12') | |
| { | |
| return '#984ea3'; | |
| } | |
| else | |
| { | |
| return '#ff7f00'; | |
| } | |
| }; | |
| // add the graph canvas to the body of the webpage | |
| 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 + ")"); | |
| // 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(d) { | |
| d["RushingTD"] = +d["RushingTD"]; | |
| d["PassingTD"] = +d["PassingTD"]; | |
| }); | |
| // don't want dots overlapping axis, so add in buffer to data domain | |
| xScale.domain([d3.min(data, xValue)-4, d3.max(data, xValue)+4]); | |
| yScale.domain([d3.min(data, yValue)-4, d3.max(data, yValue)+4]); | |
| // scales w/o extra padding | |
| // xScale.domain([d3.min(data, xValue), d3.max(data, xValue)]); | |
| // yScale.domain([d3.min(data, yValue), d3.max(data, yValue)]); | |
| // x-axis | |
| svg.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("RushingTD"); | |
| // y-axis | |
| 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("PassingTD"); | |
| // draw dots | |
| svg.selectAll(".dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 3.5) | |
| .attr("cx", xMap) | |
| .attr("cy", yMap) | |
| .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 + 10) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| tooltip.transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }); | |
| // draw legend | |
| var legend = svg.selectAll(".legend") | |
| .data(['SEC', 'ACC', 'Big 12', 'Pac-12', 'Big Ten']) | |
| .enter().append("g") | |
| .attr("class", "legend") | |
| .attr("transform", function(d, i) { return "translate(5," +i * 22 + ")"; }); | |
| // draw legend colored rectangles | |
| legend.append("rect") | |
| .attr("x", width - 18) | |
| .attr("width", 18) | |
| .attr("height", 18) | |
| .style("fill", color); | |
| // draw legend text | |
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <p>For quantitative type of data, maximum number of bins for a colorblind safe color scheme is 4 and maximum number of bins for a photocopy safe is 3. Here we are using 5 bins so, color scheme is not applicable for colorblind safe and photocopy safe.</p> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 11px 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="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 800 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| // setup x | |
| var xValue = function(d) {return d['PassingTD']; | |
| /* return d["RushingTD"];*/}, // data -> value | |
| xScale = d3.scale.linear().range([0, width]), // value -> display | |
| xMap = function(d) { return xScale(xValue(d));}, // data -> display | |
| xAxis = d3.svg.axis().scale(xScale).orient("bottom"); | |
| // setup y | |
| var yValue = function(d) { return d['PassingTD']; | |
| /*return d["PassingTD"];*/}, // data -> value | |
| yScale = d3.scale.linear().range([height, 0]), // value -> display | |
| yMap = function(d) { return yScale(yValue(d));}, // data -> display | |
| yAxis = d3.svg.axis().scale(yScale).orient("left"); | |
| // setup fill color | |
| var cValue = function(d) { return d.Rk;}, | |
| color = function(val) { | |
| if(val == 1) { | |
| return '#045a8d'; | |
| } else if (val == 2) { | |
| return '#2b8cbe'; | |
| } else if( val == 3){ | |
| return '#74a9cf'; | |
| } | |
| else if(val == 4) | |
| { | |
| return '#bdc9e1'; | |
| } | |
| else if(val == 5) | |
| { | |
| return '#f1eef6'; | |
| } | |
| }; | |
| // add the graph canvas to the body of the webpage | |
| 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 + ")"); | |
| // add the tooltip area to the webpage | |
| var tooltip = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| // load data | |
| d3.csv("rank.csv", function(error, data) { | |
| // change string (from CSV) into number format | |
| data.forEach(function(d) { | |
| d["RushingTD"] = +d["RushingTD"]; | |
| d["PassingTD"] = +d["PassingTD"]; | |
| }); | |
| // don't want dots overlapping axis, so add in buffer to data domain | |
| xScale.domain([d3.min(data, xValue)-4, d3.max(data, xValue)+4]); | |
| yScale.domain([d3.min(data, yValue)-4, d3.max(data, yValue)+4]); | |
| // scales w/o extra padding | |
| // xScale.domain([d3.min(data, xValue), d3.max(data, xValue)]); | |
| // yScale.domain([d3.min(data, yValue), d3.max(data, yValue)]); | |
| // x-axis | |
| svg.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("RushingTD"); | |
| // y-axis | |
| 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("PassingTD"); | |
| // draw dots | |
| svg.selectAll(".dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 3.5) | |
| .attr("cx", xMap) | |
| .attr("cy", yMap) | |
| .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 + 10) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| tooltip.transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }); | |
| // draw legend | |
| var legend = svg.selectAll(".legend") | |
| .data(['1', '2', '3', '4', '5']) | |
| .enter().append("g") | |
| .attr("class", "legend") | |
| .attr("transform", function(d, i) { return "translate(5," +i * 22 + ")"; }); | |
| // draw legend colored rectangles | |
| legend.append("rect") | |
| .attr("x", width - 18) | |
| .attr("width", 18) | |
| .attr("height", 18) | |
| .style("fill", color); | |
| // draw legend text | |
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 11px 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="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 800 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| // setup x | |
| var xValue = function(d) {return d['PassingTD']; | |
| /* return d["RushingTD"];*/}, // data -> value | |
| xScale = d3.scale.linear().range([0, width]), // value -> display | |
| xMap = function(d) { return xScale(xValue(d));}, // data -> display | |
| xAxis = d3.svg.axis().scale(xScale).orient("bottom"); | |
| // setup y | |
| var yValue = function(d) { return d['PassingTD']; | |
| /*return d["PassingTD"];*/}, // data -> value | |
| yScale = d3.scale.linear().range([height, 0]), // value -> display | |
| yMap = function(d) { return yScale(yValue(d));}, // data -> display | |
| yAxis = d3.svg.axis().scale(yScale).orient("left"); | |
| // setup fill color | |
| var cValue = function(d) { return d.Rk;}, | |
| color = function(val) { | |
| if(val == 1) { | |
| return '#a50f15'; | |
| } else if (val == 2) { | |
| return '#de2d26'; | |
| } else if( val == 3){ | |
| return '#fb6a4a'; | |
| } | |
| else if(val == 4) | |
| { | |
| return '#fcae91'; | |
| } | |
| else if(val == 5) | |
| { | |
| return '#fee5d9'; | |
| } | |
| }; | |
| // add the graph canvas to the body of the webpage | |
| 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 + ")"); | |
| // add the tooltip area to the webpage | |
| var tooltip = d3.select("body").append("div") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| // load data | |
| d3.csv("rank.csv", function(error, data) { | |
| // change string (from CSV) into number format | |
| data.forEach(function(d) { | |
| d["RushingTD"] = +d["RushingTD"]; | |
| d["PassingTD"] = +d["PassingTD"]; | |
| }); | |
| // don't want dots overlapping axis, so add in buffer to data domain | |
| xScale.domain([d3.min(data, xValue)-4, d3.max(data, xValue)+4]); | |
| yScale.domain([d3.min(data, yValue)-4, d3.max(data, yValue)+4]); | |
| // scales w/o extra padding | |
| // xScale.domain([d3.min(data, xValue), d3.max(data, xValue)]); | |
| // yScale.domain([d3.min(data, yValue), d3.max(data, yValue)]); | |
| // x-axis | |
| svg.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("RushingTD"); | |
| // y-axis | |
| 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("PassingTD"); | |
| // draw dots | |
| svg.selectAll(".dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 3.5) | |
| .attr("cx", xMap) | |
| .attr("cy", yMap) | |
| .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 + 10) + "px") | |
| .style("top", (d3.event.pageY - 28) + "px"); | |
| }) | |
| .on("mouseout", function(d) { | |
| tooltip.transition() | |
| .duration(500) | |
| .style("opacity", 0); | |
| }); | |
| // draw legend | |
| var legend = svg.selectAll(".legend") | |
| .data(['1', '2', '3', '4', '5']) | |
| .enter().append("g") | |
| .attr("class", "legend") | |
| .attr("transform", function(d, i) { return "translate(5," +i * 22 + ")"; }); | |
| // draw legend colored rectangles | |
| legend.append("rect") | |
| .attr("x", width - 18) | |
| .attr("width", 18) | |
| .attr("height", 18) | |
| .style("fill", color); | |
| // draw legend text | |
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <body> | |
| <h3>1. Color the marks by if the QB's school is in the Big Five, Group of Five, or Independent</h3> | |
| <p> 1a. no restrictions </p> | |
| <p>Explanation: With a color scheme of no restrictions for 3 group of data; Red-Green-Blue are the more relevant colors to differentiate the groups easily.</p> | |
| <iframe src="1a.html" width="1200" height="550"> | |
| </iframe> | |
| <p> 1b. color-blind safe </p> | |
| <p>Explanation: With a color scheme of colorblind safe; Red color is not preferred.</p> | |
| <iframe src="1b.html" width="1200" height="550"> | |
| </iframe> | |
| <p> 1c. photocopy safe </p> | |
| <P>Explanation: Photocopy safe indicates that a given color scheme will withstand black and white photocopying. These colors were used to easily distinguish when the graph is photo copied. </P> | |
| <iframe src="1c.html" width="1200" height="550"> | |
| </iframe> | |
| <h3>2. Plot only QBs from schools in the Big Five conferences. Color the marks by conference.</h3> | |
| <p> 2a. no restrictions </p> | |
| <p>Explanation: Using these colors with reference to conference so as to differentiate 5 different conferences.</p> | |
| <iframe src="2a.html" width="1200" height="550"> | |
| </iframe> | |
| <p> 2b. can you do a color-blind safe or photocopy safe version? why or why not? </p> | |
| <iframe src="2b.html" width="600" height="200"> | |
| </iframe> | |
| <h3>3. Plot only the top 5 QBs by rank and color the marks by rank.</h3> | |
| <p> 3a. choose a multi-hue colormap </p> | |
| <p>Explanation: Ranking is a sequential attribute. In this graph, dark color is used for high rank to light color for low rank.</p> | |
| <iframe src="3a.html" width="1200" height="550"> | |
| </iframe> | |
| <p> 3b. choose a single-hue colormap </p> | |
| <p>Explanation: Ranking is a sequential attribute. In this graph, high saturated color is used for high rank to low saturated color for low rank.</p> | |
| <iframe src="3a.html" width="1200" height="550"> | |
| </iframe> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Rk | Player | School | Conf | Cmp | PassingAttempts | Pct | PassingYards | Y/A | AY/A | PassingTD | Interceptions | Rate | RushingAttempts | RushingYards | RushingAvg | 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 | |
| 6 | Connor Cook | Michigan State | Big Ten | 188 | 323 | 58.2 | 2900 | 9.0 | 9.5 | 22 | 6 | 152.4 | 45 | 69 | 1.5 | 2 | |
| 7 | J.T. Barrett | Ohio State | Big Ten | 203 | 314 | 64.6 | 2834 | 9.0 | 9.8 | 34 | 10 | 169.8 | 171 | 938 | 5.5 | 11 | |
| 8 | Grant Hedrick | Boise State | MWC | 270 | 381 | 70.9 | 3387 | 8.9 | 8.5 | 22 | 13 | 157.8 | 147 | 563 | 3.8 | 8 | |
| 9 | Bryce Petty | Baylor | Big 12 | 234 | 377 | 62.1 | 3305 | 8.8 | 9.4 | 26 | 6 | 155.3 | 77 | 137 | 1.8 | 5 | |
| 10 | Rakeem Cato | Marshall | CUSA | 242 | 414 | 58.5 | 3622 | 8.7 | 9.1 | 37 | 13 | 155.2 | 84 | 457 | 5.4 | 6 | |
| 11 | Bo Wallace | Mississippi | SEC | 219 | 358 | 61.2 | 3108 | 8.7 | 8.5 | 22 | 11 | 148.2 | 107 | 218 | 2.0 | 5 | |
| 12 | Dak Prescott | Mississippi State | SEC | 210 | 344 | 61.0 | 2987 | 8.7 | 8.8 | 24 | 10 | 151.2 | 195 | 939 | 4.8 | 13 | |
| 13 | Gary Nova | Rutgers | Big Ten | 178 | 307 | 58.0 | 2667 | 8.7 | 8.2 | 20 | 12 | 144.6 | 43 | -35 | -0.8 | 3 | |
| 14 | Brad Kayaa | Miami (FL) | ACC | 202 | 345 | 58.6 | 2962 | 8.6 | 8.6 | 25 | 11 | 148.2 | 24 | -124 | -5.2 | 1 | |
| 15 | Brandon Doughty | Western Kentucky | CUSA | 344 | 510 | 67.5 | 4344 | 8.5 | 9.4 | 44 | 10 | 163.5 | 37 | -56 | -1.5 | 2 | |
| 16 | Cody Kessler | Southern California | Pac-12 | 292 | 413 | 70.7 | 3505 | 8.5 | 9.8 | 36 | 4 | 168.8 | 52 | -149 | -2.9 | 2 | |
| 17 | Nick Marshall | Auburn | SEC | 163 | 271 | 60.1 | 2315 | 8.5 | 8.7 | 18 | 7 | 148.7 | 146 | 780 | 5.3 | 11 | |
| 18 | Jameis Winston | Florida State | ACC | 276 | 422 | 65.4 | 3559 | 8.4 | 7.8 | 24 | 17 | 147.0 | 50 | 82 | 1.6 | 3 | |
| 19 | Patrick Mahomes | Texas Tech | Big 12 | 105 | 185 | 56.8 | 1547 | 8.4 | 9.1 | 16 | 4 | 151.2 | 47 | 98 | 2.1 | 0 | |
| 20 | Gunner Kiel | Cincinnati | American | 219 | 364 | 60.2 | 3010 | 8.3 | 8.6 | 30 | 11 | 150.8 | 57 | 136 | 2.4 | 1 | |
| 21 | Kenny Hill | Texas A&M | SEC | 214 | 321 | 66.7 | 2649 | 8.3 | 8.6 | 23 | 8 | 154.6 | 52 | 156 | 3.0 | 0 | |
| 22 | Brett Hundley | UCLA | Pac-12 | 259 | 368 | 70.4 | 3019 | 8.2 | 8.7 | 21 | 5 | 155.4 | 148 | 548 | 3.7 | 8 | |
| 23 | Driphus Jackson | Rice | CUSA | 176 | 307 | 57.3 | 2524 | 8.2 | 8.4 | 21 | 8 | 143.8 | 108 | 360 | 3.3 | 1 | |
| 24 | Everett Golson | Notre Dame | Ind | 250 | 416 | 60.1 | 3355 | 8.1 | 7.9 | 29 | 14 | 144.1 | 113 | 280 | 2.5 | 8 | |
| 25 | Taylor Lamb | Appalachian State | Sun Belt | 181 | 295 | 61.4 | 2381 | 8.1 | 7.9 | 17 | 9 | 142.1 | 78 | 483 | 6.2 | 4 | |
| 26 | Cody Clements | Alabama-Birmingham | CUSA | 181 | 273 | 66.3 | 2221 | 8.1 | 7.9 | 13 | 7 | 145.2 | 91 | 160 | 1.8 | 4 | |
| 27 | Trevone Boykin | Texas Christian | Big 12 | 279 | 462 | 60.4 | 3714 | 8.0 | 8.7 | 30 | 7 | 146.3 | 141 | 659 | 4.7 | 8 | |
| 28 | Chad Voytik | Pittsburgh | ACC | 158 | 252 | 62.7 | 2011 | 8.0 | 7.9 | 15 | 7 | 143.8 | 102 | 426 | 4.2 | 3 | |
| 29 | Dylan Thompson | South Carolina | SEC | 248 | 417 | 59.5 | 3280 | 7.9 | 7.8 | 24 | 11 | 139.3 | 60 | -53 | -0.9 | 3 | |
| 30 | Cooper Rush | Central Michigan | MAC | 215 | 337 | 63.8 | 2664 | 7.9 | 7.5 | 20 | 12 | 142.7 | 38 | -77 | -2.0 | 0 | |
| 31 | Tommy Armstrong Jr | Nebraska | Big Ten | 152 | 294 | 51.7 | 2314 | 7.9 | 7.5 | 19 | 11 | 131.7 | 133 | 664 | 5.0 | 5 | |
| 32 | Trevor Knight | Oklahoma | Big 12 | 162 | 279 | 58.1 | 2197 | 7.9 | 7.4 | 14 | 9 | 134.3 | 66 | 340 | 5.2 | 5 | |
| 33 | Shane Carden | East Carolina | American | 358 | 551 | 65.0 | 4302 | 7.8 | 8.2 | 28 | 8 | 144.4 | 87 | 94 | 1.1 | 6 | |
| 34 | Jared Goff | California | Pac-12 | 315 | 509 | 61.9 | 3964 | 7.8 | 8.5 | 35 | 7 | 147.2 | 55 | -44 | -0.8 | 0 | |
| 35 | Clint Trickett | West Virginia | Big 12 | 281 | 419 | 67.1 | 3285 | 7.8 | 7.6 | 18 | 10 | 142.3 | 42 | -106 | -2.5 | 1 | |
| 36 | Justin Holman | Central Florida | American | 200 | 339 | 59.0 | 2661 | 7.8 | 7.3 | 20 | 13 | 136.7 | 103 | 162 | 1.6 | 3 | |
| 37 | Kevin Hogan | Stanford | Pac-12 | 218 | 333 | 65.5 | 2603 | 7.8 | 7.8 | 17 | 8 | 143.2 | 84 | 245 | 2.9 | 5 | |
| 38 | Logan Woodside | Toledo | MAC | 164 | 269 | 61.0 | 2087 | 7.8 | 8.0 | 19 | 7 | 144.2 | 47 | 88 | 1.9 | 3 | |
| 39 | Mike Bercovici | Arizona State | Pac-12 | 115 | 186 | 61.8 | 1445 | 7.8 | 8.1 | 12 | 4 | 144.1 | 26 | 16 | 0.6 | 0 | |
| 40 | Blake Frohnapfel | Massachusetts | MAC | 241 | 436 | 55.3 | 3345 | 7.7 | 7.7 | 23 | 10 | 132.5 | 41 | -85 | -2.1 | 0 | |
| 41 | Nick Arbuckle | Georgia State | Sun Belt | 259 | 429 | 60.4 | 3283 | 7.7 | 6.9 | 23 | 17 | 134.4 | 73 | 10 | 0.1 | 2 | |
| 42 | Joe Licata | Buffalo | MAC | 223 | 344 | 64.8 | 2642 | 7.7 | 7.9 | 29 | 11 | 150.8 | 34 | -6 | -0.2 | 2 | |
| 43 | Hutson Mason | Georgia | SEC | 178 | 263 | 67.7 | 2019 | 7.7 | 8.5 | 20 | 4 | 154.2 | 40 | 14 | 0.4 | 4 | |
| 44 | Lucas Falk | Washington State | Pac-12 | 156 | 243 | 64.2 | 1883 | 7.7 | 7.5 | 13 | 7 | 141.2 | 36 | -70 | -1.9 | 1 | |
| 45 | Taylor Kelly | Arizona State | Pac-12 | 141 | 244 | 57.8 | 1874 | 7.7 | 8.4 | 20 | 5 | 145.3 | 86 | 232 | 2.7 | 3 | |
| 46 | Taylor Heinicke | Old Dominion | CUSA | 289 | 455 | 63.5 | 3476 | 7.6 | 7.6 | 30 | 14 | 143.3 | 80 | 139 | 1.7 | 2 | |
| 47 | Cody Sokol | Louisiana Tech | CUSA | 246 | 420 | 58.6 | 3189 | 7.6 | 7.6 | 29 | 13 | 138.9 | 50 | 56 | 1.1 | 2 | |
| 48 | Christian Stewart | Brigham Young | Ind | 176 | 300 | 58.7 | 2273 | 7.6 | 8.1 | 22 | 6 | 142.5 | 71 | 174 | 2.5 | 4 | |
| 49 | Will Gardner | Louisville | ACC | 127 | 221 | 57.5 | 1669 | 7.6 | 8.0 | 12 | 3 | 136.1 | 22 | -106 | -4.8 | 0 | |
| 50 | Mitch Leidner | Minnesota | Big Ten | 101 | 206 | 49.0 | 1540 | 7.5 | 6.7 | 10 | 8 | 120.1 | 117 | 461 | 3.9 | 10 | |
| 51 | Connor Halliday | Washington State | Pac-12 | 354 | 526 | 67.3 | 3873 | 7.4 | 7.6 | 32 | 11 | 145.0 | 29 | -131 | -4.5 | 0 | |
| 52 | Paxton Lynch | Memphis | American | 235 | 367 | 64.0 | 2725 | 7.4 | 7.7 | 18 | 6 | 139.3 | 100 | 283 | 2.8 | 10 | |
| 53 | Colby Kirkegaard | Wyoming | MWC | 205 | 358 | 57.3 | 2654 | 7.4 | 7.0 | 12 | 9 | 125.6 | 78 | -110 | -1.4 | 0 | |
| 54 | Davis Webb | Texas Tech | Big 12 | 211 | 345 | 61.2 | 2539 | 7.4 | 7.1 | 24 | 13 | 138.4 | 17 | 15 | 0.9 | 1 | |
| 55 | Daxx Garman | Oklahoma State | Big 12 | 152 | 277 | 54.9 | 2041 | 7.4 | 6.3 | 12 | 12 | 122.4 | 60 | -16 | -0.3 | 1 | |
| 56 | Wes Lunt | Illinois | Big Ten | 149 | 233 | 63.9 | 1729 | 7.4 | 8.0 | 14 | 3 | 143.5 | 16 | -80 | -5.0 | 0 | |
| 57 | Marquise Williams | North Carolina | ACC | 245 | 391 | 62.7 | 2870 | 7.3 | 7.3 | 20 | 9 | 136.6 | 178 | 737 | 4.1 | 12 | |
| 58 | Cyler Miles | Washington | Pac-12 | 194 | 291 | 66.7 | 2129 | 7.3 | 8.0 | 16 | 3 | 144.2 | 109 | 280 | 2.6 | 4 | |
| 59 | Greg Ward | Houston | American | 161 | 236 | 68.2 | 1720 | 7.3 | 6.9 | 9 | 6 | 136.9 | 104 | 491 | 4.7 | 6 | |
| 60 | Andrew Hendrix | Miami (OH) | MAC | 222 | 458 | 48.5 | 3280 | 7.2 | 7.3 | 23 | 9 | 121.3 | 157 | 384 | 2.4 | 6 | |
| 61 | Blake Decker | Nevada-Las Vegas | MWC | 231 | 401 | 57.6 | 2881 | 7.2 | 5.9 | 15 | 18 | 121.3 | 147 | 366 | 2.5 | 5 | |
| 62 | Fredi Knighten | Arkansas State | Sun Belt | 246 | 401 | 61.3 | 2874 | 7.2 | 7.3 | 19 | 7 | 133.7 | 194 | 786 | 4.1 | 11 | |
| 63 | Austin Grammer | Middle Tennessee State | CUSA | 206 | 321 | 64.2 | 2307 | 7.2 | 6.5 | 16 | 12 | 133.5 | 124 | 442 | 3.6 | 6 | |
| 64 | Quinn Kaehler | San Diego State | MWC | 158 | 280 | 56.4 | 2016 | 7.2 | 6.2 | 9 | 10 | 120.4 | 24 | -116 | -4.8 | 0 | |
| 65 | Tyler Murphy | Boston College | ACC | 120 | 211 | 56.9 | 1526 | 7.2 | 6.1 | 11 | 10 | 125.3 | 170 | 1079 | 6.3 | 10 | |
| 66 | Tyler Jones | Texas State | Sun Belt | 246 | 376 | 65.4 | 2670 | 7.1 | 7.4 | 22 | 7 | 140.7 | 167 | 539 | 3.2 | 6 | |
| 67 | Jake Rudock | Iowa | Big Ten | 211 | 337 | 62.6 | 2404 | 7.1 | 7.4 | 16 | 5 | 135.2 | 65 | 154 | 2.4 | 3 | |
| 68 | Anu Solomon | Arizona | Pac-12 | 285 | 491 | 58.0 | 3458 | 7.0 | 7.5 | 27 | 7 | 132.5 | 114 | 259 | 2.3 | 1 | |
| 69 | Sean Mannion | Oregon State | Pac-12 | 282 | 453 | 62.3 | 3164 | 7.0 | 6.9 | 15 | 8 | 128.3 | 48 | -306 | -6.4 | 1 | |
| 70 | Joe Gray | San Jose State | MWC | 210 | 330 | 63.6 | 2305 | 7.0 | 6.4 | 11 | 9 | 127.9 | 57 | 108 | 1.9 | 3 | |
| 71 | Jaquez Johnson | Florida Atlantic | CUSA | 182 | 315 | 57.8 | 2215 | 7.0 | 7.4 | 17 | 5 | 131.5 | 120 | 513 | 4.3 | 7 | |
| 72 | Drew Hare | Northern Illinois | MAC | 179 | 299 | 59.9 | 2097 | 7.0 | 7.8 | 17 | 2 | 136.2 | 145 | 850 | 5.9 | 8 | |
| 73 | Travis Wilson | Utah | Pac-12 | 173 | 287 | 60.3 | 2012 | 7.0 | 7.6 | 17 | 4 | 135.9 | 103 | 218 | 2.1 | 2 | |
| 74 | Mike Cummings | Kansas | Big 12 | 137 | 244 | 56.1 | 1715 | 7.0 | 6.7 | 9 | 6 | 122.4 | 67 | 23 | 0.3 | 4 | |
| 75 | Reggie Bell | Eastern Michigan | MAC | 105 | 184 | 57.1 | 1297 | 7.0 | 6.6 | 9 | 6 | 125.9 | 133 | 562 | 4.2 | 4 | |
| 76 | Patrick Towles | Kentucky | SEC | 225 | 393 | 57.3 | 2718 | 6.9 | 6.6 | 14 | 9 | 122.5 | 145 | 303 | 2.1 | 6 | |
| 77 | Anthony Jennings | Louisiana State | SEC | 104 | 213 | 48.8 | 1460 | 6.9 | 6.3 | 10 | 7 | 115.3 | 100 | 284 | 2.8 | 0 | |
| 78 | Nick Mullens | Southern Mississippi | CUSA | 218 | 365 | 59.7 | 2470 | 6.8 | 6.3 | 12 | 9 | 122.5 | 49 | 39 | 0.8 | 0 | |
| 79 | Jacoby Brissett | North Carolina State | ACC | 206 | 344 | 59.9 | 2344 | 6.8 | 7.4 | 22 | 5 | 135.3 | 110 | 498 | 4.5 | 3 | |
| 80 | Brandon Silvers | Troy | Sun Belt | 190 | 270 | 70.4 | 1823 | 6.8 | 7.1 | 11 | 3 | 138.3 | 100 | 196 | 2.0 | 5 | |
| 81 | Mike White | South Florida | American | 122 | 242 | 50.4 | 1639 | 6.8 | 6.1 | 8 | 7 | 112.4 | 29 | -85 | -2.9 | 0 | |
| 82 | Chandler Whitmer | Connecticut | American | 124 | 225 | 55.1 | 1522 | 6.8 | 6.1 | 11 | 8 | 121.0 | 76 | 77 | 1.0 | 2 | |
| 83 | Dane Evans | Tulsa | American | 256 | 462 | 55.4 | 3102 | 6.7 | 6.1 | 23 | 17 | 120.9 | 77 | 58 | 0.8 | 3 | |
| 84 | Brandon Allen | Arkansas | SEC | 178 | 316 | 56.3 | 2125 | 6.7 | 7.2 | 18 | 5 | 128.4 | 36 | -13 | -0.4 | 2 | |
| 85 | Devin Gardner | Michigan | Big Ten | 172 | 281 | 61.2 | 1892 | 6.7 | 5.0 | 10 | 15 | 118.8 | 98 | 258 | 2.6 | 4 | |
| 86 | Matt Linehan | Idaho | Sun Belt | 220 | 378 | 58.2 | 2500 | 6.6 | 5.1 | 11 | 18 | 113.8 | 82 | -74 | -0.9 | 1 | |
| 87 | Tyrone Swoopes | Texas | Big 12 | 211 | 359 | 58.8 | 2352 | 6.6 | 6.0 | 13 | 10 | 120.2 | 103 | 294 | 2.9 | 3 | |
| 88 | Terrance Broadway | Louisiana-Lafayette | Sun Belt | 190 | 311 | 61.1 | 2068 | 6.6 | 6.1 | 12 | 9 | 123.9 | 133 | 646 | 4.9 | 3 | |
| 89 | Jameill Showers | Texas-El Paso | CUSA | 146 | 262 | 55.7 | 1732 | 6.6 | 6.7 | 12 | 5 | 122.6 | 83 | 288 | 3.5 | 4 | |
| 90 | Maty Mauk | Missouri | SEC | 209 | 395 | 52.9 | 2551 | 6.5 | 6.4 | 23 | 11 | 120.8 | 97 | 335 | 3.5 | 1 | |
| 91 | Ozzie Mann | Ball State | MAC | 116 | 197 | 58.9 | 1281 | 6.5 | 7.1 | 10 | 2 | 128.2 | 31 | -2 | -0.1 | 0 | |
| 92 | Sefo Liufau | Colorado | Pac-12 | 325 | 498 | 65.3 | 3194 | 6.4 | 6.2 | 28 | 15 | 131.7 | 70 | 126 | 1.8 | 0 | |
| 93 | C.J. Brown | Maryland | Big Ten | 174 | 327 | 53.2 | 2083 | 6.4 | 5.9 | 13 | 9 | 114.3 | 148 | 569 | 3.8 | 7 | |
| 94 | Andrew McNulty | North Texas | CUSA | 110 | 202 | 54.5 | 1295 | 6.4 | 5.4 | 6 | 7 | 111.2 | 42 | 54 | 1.3 | 2 | |
| 95 | Pete Thomas | Louisiana-Monroe | Sun Belt | 301 | 501 | 60.1 | 3181 | 6.3 | 6.4 | 14 | 6 | 120.2 | 110 | 6 | 0.1 | 3 | |
| 96 | James Knapke | Bowling Green State | MAC | 255 | 444 | 57.4 | 2805 | 6.3 | 5.7 | 13 | 12 | 114.8 | 57 | 126 | 2.2 | 2 | |
| 97 | Tyler Rogers | New Mexico State | Sun Belt | 268 | 435 | 61.6 | 2739 | 6.3 | 4.9 | 19 | 22 | 118.8 | 69 | 200 | 2.9 | 2 | |
| 98 | Brian Burrell | Fresno State | MWC | 242 | 412 | 58.7 | 2576 | 6.3 | 5.6 | 22 | 16 | 121.1 | 101 | 328 | 3.2 | 3 | |
| 99 | Cody Fajardo | Nevada | MWC | 225 | 376 | 59.8 | 2374 | 6.3 | 6.0 | 18 | 11 | 122.8 | 164 | 997 | 6.1 | 13 | |
| 100 | Greyson Lambert | Virginia | ACC | 154 | 261 | 59.0 | 1632 | 6.3 | 5.1 | 10 | 11 | 115.7 | 35 | -6 | -0.2 | 2 | |
| 101 | Justin Worley | Tennessee | SEC | 157 | 252 | 62.3 | 1579 | 6.3 | 5.8 | 12 | 8 | 124.3 | 45 | -105 | -2.3 | 3 | |
| 102 | Michael Brewer | Virginia Tech | ACC | 248 | 417 | 59.5 | 2598 | 6.2 | 5.5 | 17 | 14 | 118.5 | 75 | -22 | -0.3 | 2 | |
| 103 | Jack Milas | Ball State | MAC | 115 | 209 | 55.0 | 1302 | 6.2 | 6.0 | 9 | 5 | 116.8 | 27 | 96 | 3.6 | 2 | |
| 104 | Ikaika Woolsey | Hawaii | MWC | 208 | 414 | 50.2 | 2534 | 6.1 | 5.3 | 13 | 13 | 105.7 | 109 | 213 | 2.0 | 1 | |
| 105 | Colin Reardon | Kent State | MAC | 228 | 401 | 56.9 | 2466 | 6.1 | 5.1 | 14 | 16 | 112.1 | 59 | 148 | 2.5 | 2 | |
| 106 | P.J. Walker | Temple | American | 205 | 379 | 54.1 | 2317 | 6.1 | 5.0 | 13 | 15 | 108.8 | 106 | 324 | 3.1 | 3 | |
| 107 | Alex McGough | Florida International | CUSA | 138 | 274 | 50.4 | 1680 | 6.1 | 5.5 | 14 | 10 | 111.4 | 97 | 92 | 0.9 | 4 | |
| 108 | Brandon Bridge | South Alabama | Sun Belt | 140 | 270 | 51.9 | 1648 | 6.1 | 6.1 | 14 | 6 | 115.8 | 85 | 256 | 3.0 | 3 | |
| 109 | J.D. Sprague | Ohio | MAC | 98 | 202 | 48.5 | 1236 | 6.1 | 5.3 | 3 | 5 | 99.9 | 65 | 264 | 4.1 | 3 | |
| 110 | Christian Hackenberg | Penn State | Big Ten | 236 | 434 | 54.4 | 2606 | 6.0 | 4.8 | 8 | 15 | 104.0 | 85 | -94 | -1.1 | 0 | |
| 111 | Sam Richardson | Iowa State | Big 12 | 254 | 452 | 56.2 | 2669 | 5.9 | 5.8 | 18 | 9 | 115.0 | 125 | 421 | 3.4 | 3 | |
| 112 | Anthony Boone | Duke | ACC | 240 | 422 | 56.9 | 2507 | 5.9 | 6.0 | 17 | 7 | 116.8 | 88 | 346 | 3.9 | 5 | |
| 113 | Cole Stoudt | Clemson | ACC | 165 | 266 | 62.0 | 1573 | 5.9 | 4.7 | 6 | 10 | 111.6 | 61 | 101 | 1.7 | 0 | |
| 114 | Tanner Lee | Tulane | American | 185 | 336 | 55.1 | 1962 | 5.8 | 4.7 | 12 | 14 | 107.6 | 35 | -128 | -3.7 | 0 | |
| 115 | Trevor Siemian | Northwestern | Big Ten | 228 | 391 | 58.3 | 2214 | 5.7 | 4.8 | 7 | 11 | 106.2 | 68 | -123 | -1.8 | 5 | |
| 116 | Kyle Pohl | Akron | MAC | 207 | 382 | 54.2 | 2185 | 5.7 | 5.2 | 9 | 8 | 105.8 | 46 | 18 | 0.4 | 1 | |
| 117 | John Wolford | Wake Forest | ACC | 205 | 353 | 58.1 | 1965 | 5.6 | 4.5 | 11 | 13 | 107.8 | 104 | -151 | -1.5 | 0 | |
| 118 | Jeff Driskel | Florida | SEC | 106 | 195 | 54.4 | 1092 | 5.6 | 4.2 | 9 | 10 | 106.4 | 66 | 173 | 2.6 | 4 | |
| 119 | John O'Korn | Houston | American | 90 | 174 | 51.7 | 951 | 5.5 | 4.1 | 6 | 8 | 99.8 | 32 | 17 | 0.5 | 1 | |
| 120 | Austin Appleby | Purdue | Big Ten | 144 | 272 | 52.9 | 1449 | 5.3 | 4.2 | 10 | 11 | 101.7 | 61 | 198 | 3.2 | 5 | |
| 121 | Garrett Krstich | Southern Methodist | American | 99 | 181 | 54.7 | 855 | 4.7 | 3.2 | 2 | 7 | 90.3 | 40 | 81 | 2.0 | 0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Rk | Player | School | Conf | Cmp | PassingAttempts | Pct | PassingYards | Y/A | AY/A | PassingTD | Interceptions | Rate | RushingAttempts | RushingYards | RushingAvg | 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment