D3 Examples - S18 - HW3

S18 - HW3 - Scatterplot

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

See the assignment instructions at http://www.cs.odu.edu/~mweigle/CS725-S18/HW3

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

Scatterplot

What is the type of mark used in the scatterplot?

The type of mark used in the scatterplot is point.

List the channels, the attribute they are mapped to, and the data type of that attribute.

The vertical spatial position channel is mapped to the passing touchdowns attribute. The passing touchdown attribute is a quantitative attribute.

The horizontal spatial positon channel is mapped to the rushing touchdowns attribute. The rushing touchdown attribute is a quantitative attribute.

After your changes, list the channels, the attribute they are mapped to, and the data type of that attribute.

The color hue channel is mapped to the 11 different college football conferences attribute. The conference attribute is a categorical attribute.

The size channel is mapped to the passing yards per attemp (Y/A) attribute. The Y/A attribute is a quantitative attribute.

The vertical spatial position channel is mapped to the passing touchdowns attribute. The passing touchdown attribute is a quantitative attribute.

The horizontal spatial position channel is mapped to the rushing touchdowns attribute. The rushing touchdown attribute is a quantitative attribute.

References

xxxxxxxxxx
 
<!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> <!-- for color scales -->
  
<!-- Example based on https://bl.ocks.org/mbostock/3887118 -->
<!-- Tooltip example from https://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->
​
<style>
  body { font-family: calibri; }
  .axis { font: 14px calibri; }
  .label {font: 16px calibri; }
​
.tooltip {
  position: absolute;
  width: 150px;
  height: 60px;
  background: #f2f2f2;
  pointer-events: none;
}
  
  .legend {
    font-size: 12px;
  }
</style>
  
<body>
  <h2>Scatterplot</h2>
  <div><svg id="chart1" width="700" height="400"></svg></div>
  <div><svg id="legend" width="700" height="400"></svg></div>
​
<script>
// Eric - Color scale
var colorScale = d3.scaleOrdinal(d3.schemePaired);
​
// 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;
​
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"];
  d["Rushing Avg"] = +d["Rushing Avg"];
  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", /*3.5*/ function(d){return d["Y/A"]})
      .attr("cx", xMap)
      .attr("cy", yMap)
            .style("fill", function(d){return colorScale(d["Conf"]);})
      // 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>
    