Surbhi Shankar 01012632
a. There are no color restrictions here and hence I chose a set of eye pleasing colors to represent the five different conferences.
b. Here we have to represent five different conferences with five different colors. For this we require minimum of five bins. Colorblind safe and photocopy safe colors limit the number of bins and hence it is not possible to represent this graph with colorblind safe or photocopy safe version.
References:
/weiglemc/bdc0474429e6567bc320
/enjalot/211bd42857358a60a936/example/
http://blockbuilder.org/
https://bost.ocks.org/mike
xxxxxxxxxx<html><meta charset="utf-8"><!-- Example based on https://bl.ocks.org/weiglemc/bdc0474429e6567bc320 --><style>.axis path,.axis line { fill: none; stroke: #000;}.dot { stroke: #000;}</style><body><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script><script>var margin = {top: 25, right: 50, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;// Create x var xVal = function(d) { return d["Passing TD"];}, xScale = d3.scale.linear().range([0, width]), xMap = function(d) { return xScale(xVal(d));}, xAxis = d3.svg.axis().scale(xScale).orient("bottom");// Create yvar yVal = function(d) { return d["Rushing TD"];}, yScale = d3.scale.linear().range([height, 0]), yMap = function(d) { return yScale(yVal(d));}, yAxis = d3.svg.axis().scale(yScale).orient("left");var cVal = function(d) { return d.Conf;}, color = d3.scale.ordinal() .domain(["SEC", "ACC", "Big 12","Pac-12","Big Ten"]) .range(["#ffffcc", "#a1dab4" , "#41b6c4","#2c7fb8","#253494"]);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 + ")");// load data in .csv formatd3.csv("data.csv", function(error, data) { data.forEach(function(d) { if(d['Conf'] == 'SEC' || d['Conf'] == 'ACC' || d['Conf'] == 'Big 12' || d['Conf'] == 'Pac-12' || d['Conf'] == 'Big Ten') d["Rushing TD"] = +d["Rushing TD"]; d["Passing TD"] = +d["Passing TD"]; }); xScale.domain([d3.min(data, xVal)-2, d3.max(data, xVal)+2]); yScale.domain([d3.min(data, yVal)-1, d3.max(data, yVal)+5]);var rScale = d3.scale.linear() .domain([0, d3.max(data, function(d) { return yVal(d); })]) .range([4, 10]); // define 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", -10) .style("text-anchor", "end") .text("Passing TD"); // define 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("Rushing TD"); svg.selectAll(".dot") .data(data) .enter().append("circle") .attr("class", "dot") .attr("r", function(d) {return rScale(yVal(d))}) .attr("cx", xMap) .attr("cy", yMap) .style("fill", function(d) { return color(cVal(d));}) // 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(10," + (i+4) * 20 + ")"; }); // legend colored rectangles legend.append("rect") .attr("x", width - 20) .attr("width", 20) .attr("height", 20) .style("fill", color); // legend text legend.append("text") .attr("x", width - 24) .attr("y", 15) .attr("dy", ".30em") .style("text-anchor", "end") .text(function(d) { return d;})}); </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js