S18 - HW3 - Scatterplot

CS 725/825 - Spring 2018 - Homework 3 - Scatterplot

My Answers

A point mark is used for the scatterplot.
There is a vertical spatial position channel and a horizontal spatial position channel. The vertical spatial position channel is mapped to the Passing TD attribute. The Passing TD attribute represents the total amount of passing touchdowns a NCAA Division 1 quarterback has made in 2014. The horizontal spatial position channel is mapped to the Rushing TD attribute. The Rushing TD attribute represents the number of rushing touchdowns a NCAA Division 1 quarterback has made in 2014.
There is a vertical spatial position channel, a horizontal spatial position channel, color hue channel, and a size channel. The vertical and horizontal spatial position channels are the same as described in answer 2. The color hue channel is mapped to the Conf attribute. The Conf attribute represents the name of the conference that a quarterback’s team belongs to. The size channel is mapped to the Rk attribute. The Rk attribute represents the rank of the quarterback 2014.

Scatterplot of 2014 NCAA Passing Statistics

Data from http://www.sports-reference.com/cfb/years/2014-passing.html

Scatterplot based on /mbostock/3887118, tooltip example from http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

Built with blockbuilder.org

forked from weiglemc's block: S18 - HW3 - Scatterplot

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

.tooltip {
  position: absolute;
  width: 150px;
  height: 60px;
  background: #f2f2f2;
  pointer-events: none;
}
</style>
  
<body>
  <h2>Scatterplot</h2>
  <div id="mainDiv"><svg id="chart1" width="700" height="400"></svg></div>

legendDiv.append("hr"); 
    
    //Add the Conference name and the color hue associated with the conference
    for(var i = 0; i < conferences.length; i = i + 1)
    {      
      legendDiv.append("div")
        				.text(conferences[i])
        				.style("display", "inline-block")
        				.style("width", "55%")
      					.style("margin-left", "10%");
      
      legendDiv.append("svg")
        				.attr("width", "35")
        				.attr("height", "20")
        				.style("display", "inline-block")
        				.append("circle")
      						.attr("r", "5")
      						.attr("cx", "25")
      						.attr("cy", "15")
  								.style("fill", colorScale(conferences[i]));

legendDiv.append("br");
      
    }
    
  }//end of createLegend
  
  createLegend(colorScale);
  
  //end of most of my code
  
// add the graph canvas to the body of the webpage
var svg = d3.select("#chart1"), 
    margin = {top: 20, right: 20, bottom: 50, left: 70},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

svg.style("display", "inline-block");
  
var g = svg.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 (d) {
  // change string (from CSV) into number format
  d["Passing TD"] = +d["Passing TD"];
  d["Rushing TD"] = +d["Rushing TD"];
  return d;
}, function(error, data) {

if (error) throw error;
  
/* 
 * value accessor - returns the value to encode for a given data object.
 * scale - maps value to a visual display encoding, such as a pixel position.
 * map function - maps from data value to display value
 */ 
  
// setup x 
var xValue = function(d) { return d["Rushing TD"];}, // data -> value
    xScale = d3.scaleLinear().range([0, width]),     // value -> display
    xMap = function(d) { return xScale(xValue(d));}; // data -> display

// setup y
var yValue = function(d) { return d["Passing TD"];}, // data -> value
    yScale = d3.scaleLinear().range([height, 0]),    // value -> display
    yMap = function(d) { return yScale(yValue(d));}; // data -> display

// 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([0, d3.max(data, yValue)+1]);

// x-axis
  g.append("g")
 		.attr("class", "axis x-axis")
  	.attr("transform", "translate(0," + height + ")") // move axis to bottom of chart
   	.call(d3.axisBottom(xScale));
  
  // x-axis label
  g.append("text")
  	.attr("class", "label")
   	.attr("x", width/2)
    .attr("y", height+(margin.bottom*0.75))
    .style("text-anchor", "middle")
    .text("Rushing TDs");

// y-axis
  g.append("g")
 		.attr("class", "axis y-axis")
 		.call(d3.axisLeft(yScale));
  
  // y-axis label
  g.append("text") 
    .attr("class", "label")
    .attr("x", 0-(height/2))
    .attr("y", 0-(margin.left*0.55))
    .attr("transform", "rotate(-90)") // rotate text -90 degrees from x, y
    .style("text-anchor", "middle")
    .text("Passing TDs");

// draw dots
  g.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", rsize)
      .attr("cx", xMap)
      .attr("cy", yMap)
  		.style("fill", circleFill)// color of the circles

// tooltip
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)         // ms delay before appearing
               .style("opacity", .8); // tooltip appears on mouseover
          tooltip.html(d["Player"] + "<br/> " + d.School + "<br/>(" + xValue(d) 
	        + ", " + yValue(d) + ")")
               .style("left", (d3.event.pageX + 10) + "px")  // specify x location
               .style("top", (d3.event.pageY - 28) + "px");  // specify y location
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0); // disappear on mouseout
      });
});
</script>
</body>
</html>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js