D3 Examples - S18 - HW3

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

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</h2>
  <div id="mainDiv"><svg id="chart1" width="700" height="400"></svg></div>
​
<script>
  //Beginning of most of my code
  
  //The hue that will be used for a circle's fill will be determined by the conference
  var colorScale = d3.scaleOrdinal(d3.schemePaired);
  var circleFill = function(d){return colorScale(d.Conf);};
  
  //The size of the radius is determined by the rank of the quarterback
  var rScale = d3.scaleLinear().range([7, 2]).domain([1, 121]);
  var rsize = function(d){return rScale(d.Rk);};
  
  //The code used to create the color legend for the different confrences
  function createLegend(colorScale)
  {
    var conferences = ["American", "ACC", "Big Ten", "Big 12", "CUSA", "Ind", "MAC",            "MWC", "Pac-12", "SEC", "Sun Belt"];
    
    d3.select("#mainDiv").append("div").attr("id", "colorLegend");
    
    var legendDiv = d3.select("#colorLegend")
                                            .style("border", "2px solid black")
                                            .style("width", "17%")
                                            .style("margin-top", "10px")
                                            .style("display", "inline-block")
                                            .style("position", "absolute");
    
    legendDiv.append("p")
                    .text("Conference Categories")
                    .style("font-weight", "bold")
                        .style("margin-left", "5%");
​
    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>
    