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.
xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>QB's - No Restriction</title> <script src="https://d3js.org/d3.v3.min.js"></script> <script src="https://d3js.org/colorbrewer.v1.min.js"></script> <style> .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> </head> <body> <h2> Color the marks by if the QB's school is in the Big Five, Group of Five, or Independent</h2> <h2> No Restriction</h2> <p> Used three colors- RED,BLUE,GREEN as there is no restriction. <br> <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(d) { return d["Rushing TD"];}, // 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["Passing TD"];}, // 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.Group;}, color = d3.scale.ordinal().range(colorbrewer.Set1[3]); // 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["Passing TD"] = +d["Passing TD"]; d["Rushing TD"] = +d["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 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"); // Create 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", 4.0) .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 + "<br/>(" + xValue(d) //Hover information + ", " + yValue(d) + ")") .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(color.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, 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", 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> <h2> Color-blind Safe</h2> <p> People with color blindness cannot differentiate blue-yellow and green-red. Color blind safe palette has only differentiable colors. I used differtiable colors like orange, green, violet. <br> <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(d) { return d["Rushing TD"];}, // 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["Passing TD"];}, // 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.Group;}, color1 = d3.scale.ordinal().range(colorbrewer.Dark2[3]); // Add the graph canvas to the body of the webpage var svg1 = 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["Passing TD"] = +d["Passing TD"]; d["Rushing TD"] = +d["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 svg1.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 svg1.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 svg1.selectAll(".dot") .data(data) .enter().append("circle") .attr("class", "dot") .attr("r", 4.0) .attr("cx", xMap) .attr("cy", yMap) .style("fill", function(d) { return color1(cValue(d));}) .on("mouseover", function(d) { tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(d["Player"] + "<br/> " + d.School + "<br/> " + d.Conf + "<br/>(" + xValue(d) //Hover information + ", " + yValue(d) + ")") .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 = svg1.selectAll(".legend") .data(color1.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, 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", color1); // 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> <h2> Photocopy Safe</h2> <p> Photocopy safe colors should have same amount of brightness and lightness, I choose a set of colors from color brewer which have the same brightness and lightness. <br> <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(d) { return d["Rushing TD"];}, // 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["Passing TD"];}, // 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.Group;}, color2 = d3.scale.ordinal().range(colorbrewer.Set3[3]); // Add the graph canvas to the body of the webpage var svg2 = 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["Passing TD"] = +d["Passing TD"]; d["Rushing TD"] = +d["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 svg2.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 svg2.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 svg2.selectAll(".dot") .data(data) .enter().append("circle") .attr("class", "dot") .attr("r", 4.0) .attr("cx", xMap) .attr("cy", yMap) .style("fill", function(d) { return color2(cValue(d));}) .on("mouseover", function(d) { tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(d["Player"] + "<br/> " + d.School + "<br/> " + d.Conf + "<br/>(" + xValue(d) //Hover information + ", " + yValue(d) + ")") .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 = svg2.selectAll(".legend") .data(color1.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, 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", color2); // 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> <h2>QBs from schools in the Big Five conferences,Color the marks by conference.</h2> <h2>No Restrictions</h2> <p> To identify conferences easily,used various diffrentiable colors. <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(d2) { return d2["Rushing TD"];}, // data -> value xScale = d3.scale.linear().range([0, width]), // value -> display xMap = function(d2) { return xScale(xValue(d2));}, // data -> display xAxis = d3.svg.axis().scale(xScale).orient("bottom"); // Setup y var yValue = function(d2) { return d2["Passing TD"];}, // data -> value yScale = d3.scale.linear().range([height, 0]), // value -> display yMap = function(d2) { return yScale(yValue(d2));}, // data -> display yAxis = d3.svg.axis().scale(yScale).orient("left"); // Setup fill color var cValue1 = function(d2) { return d2.Conf;}, color3 = d3.scale.ordinal() .range(colorbrewer.Set1[5]); // Add the graph canvas to the body of the webpage var svg3 = 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, data1) { // Change string from CSV into number format data1.forEach(function(d2) { d2["Passing TD"] = +d2["Passing TD"]; d2["Rushing TD"] = +d2["Rushing TD"]; }); // Add buffer to data domain so dots won't overlap axis xScale.domain([d3.min(data1, xValue)-1, d3.max(data1, xValue)+1]); yScale.domain([d3.min(data1, yValue)-1, d3.max(data1, yValue)+1]); // Create x-axis svg3.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 svg3.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 svg3.selectAll(".dot") .data(data1) .enter().append("circle") .filter(function(d2) { return d2.Group == "Big Five" }) .attr("class", "dot") .attr("r", 4.0) .attr("cx", xMap) .attr("cy", yMap) .style("fill", function(d2) { return color3(cValue1(d2));}) .on("mouseover", function(d2) { tooltip.transition() .duration(200) .style("opacity", .9); tooltip.html(d2["Player"] + "<br/> " + d2.School + "<br/> " + d2.Conf + "<br/>(" + xValue(d2) //Hover information + ", " + yValue(d2) + ")") .style("left", (d3.event.pageX + 10) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d2) { tooltip.transition() .duration(500) .style("opacity", 0); }); // Draw legend var legend1 = svg3.selectAll(".legend") .data(color3.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d2, i) { return "translate(10," + (i+7) * 20 + ")"; }); // Draw legend colored rectangles legend1.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", color3); // Draw legend text legend1.append("text") .attr("x", width - 24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d2) { return d2;}) }); </script> <h2>Can you do a color-blind safe or photocopy safe version? why or why not? </h2> <p>It is not possible to do a color-blind safe or a photocopy safe version. This is because, we are increasing the number of categories here from 3 to 5.Since photocopy safe and color-blind limit the number of available bins we can work with and even though the chart can be displayed, we do not have enough bins to separate the categories</p> <h2> Top 5 QBs by rank and color the marks by rank</h2> <h2>Multi-hue colormap</h2> <p> Colors diverge from orange to violet,the data is ordered by rank. Rank1(orange) -Rank5(violet).</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;}, color5 = d3.scale.ordinal() .range(colorbrewer.PuOr[5]); // Add the graph canvas to the body of the webpage var svg5 = 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 svg5.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 svg5.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 svg5.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 color5(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 = svg5.selectAll(".legend") .data(color5.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", color5); // 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> <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