Old school D3 from simpler times

All examples By author By category About

surabhishankar

Full window Github gist

VI8 - Solution to Q2

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

<!DOCTYPE html>
<html>
<meta charset="utf-8">

<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 y
var 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 format
d3.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