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

The type of mark used in the scatterplot is point mark.

The channels are vertical and horizontal spatial positions. The vertical spatial position is mapped to Passsing TDs while the horizontal spatial position is mapped to Rushing TDs.

Data type is categorical

After editing the scatterplot chart, the channels are:

Vertical and horizontal spatial positions. The vertical spatial position is mapped to Passsing TDs while the horizontal spatial position is mapped to Rushing TDs

The color hue that represents the "Conf" attribute. The 11 different colors represent 11 different conferences.

The size channel represents the rank attribute. The size of the dot shows different ranks. The highest rank (1) has the biggest dot size while the least rank (121) has the smallest dot size.

The dot size encodes the rank attribute where the players with the highest rank is represented in the size of the dots.

Data type: Categorical

For extra credit, I added color legend to the scatterplot chart. The color legend shows the 11 conferences and the color that represents each conference.

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;
}
</style>
  
<body>
  <h2>Scatterplot (Size encodes rank)</h2>
  <div><svg id="chart1" width="1000" height="400"></svg></div>
​
<script>
var params = {};
params.legend = [];
params.legendDedup = {};
​
var colorScale = d3.scaleOrdinal(d3['schemeCategory20']);
// 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;
    width = 700 - margin.left - margin.right,
    height = 400 - 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"];
  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", function(d)
      {
        return 15 - Math.floor(d.Rk/10);
      })
      .attr("cx", xMap)
      .attr("cy", yMap)
      // 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) + "), conf: " + d.Conf + ", rank: " + d.Rk)
               .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
      })
      .style("fill", function(d)
      {
        if( params.legendDedup[d.Conf] == undefined )
        {
          params.legend.push( {class: d.Conf, color: colorScale(d.Conf)} );
          params.legendDedup[d.Conf] = true
        }
          
        return colorScale(d.Conf);
      })
      .style("opacity", 0.5);
​
​
  var lengendXpos = width + 150;
  var lengendYpos = 10;
​
​
  //legend
  var legend = svg.selectAll(".legend")
    .data(params.legend)
  .enter().append("g")
   .attr("class", "legend")
   .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
​
 // draw legend colored rectangles
  legend.append("path")
    .attr("d", d3.symbol()
         .size(100)
    )
    .attr("transform", function(d) { return "translate(" + lengendXpos + "," + lengendYpos + ")"; })
    .style("stroke", function(d)
    {
      if( d.stroke )
      {
        return d.stroke;
      }
      else if(d.color)
      {
        return d.color;
      }
      else
      {
        return 'black';
      }
    })
    .style("fill", function(d)
    {
      return d.color;
    });
​
    // draw legend text
  legend.append("text")
      .attr("x", lengendXpos - 24)
      .attr("y", lengendYpos)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d)
      {
        return d.class;
      });
​
});
​
</script>
</body>
</html>
    