D3 Examples - S18 - HW3 - Scatterplot by Yash

S18 - HW3 - Scatterplot by Yash

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

The image is a Scatterplot of 2014 NCAA Passing Statistics. Precisely speaking, the chart shows the number of passing touchdowns versus the number of rushing touchdowns for NCAA Division I quarterbacks.

The following are the details of the chart :

The mark used for this Scatterplot is dot. The dots in the chart depict the information that we need to know. Hovering your mouse pointer over a dot would provide you with the name of the player, their school (I also added the conference information later).

Initially, the channel in the chart was position. The Y-axis describes the passing touchdowns while the X-axis describes the rushing touchdowns. Based on both these values, the position of a player is determined along the chart. The attribute for touchdowns is quantitative.

Later, I made few minor changes to the channels. I added two more channels - size and color hue. The size of the dot varies depending on the Rate of a player. The size of the dot is smaller if a player's rate is 150 and above, in comparision to the size of the dot of a player whose rate is less than 150. Additionally, there are 11 conferences and the color of a dot varies depending on the conference the player belongs to. The attribute for conference is categorical while the attribute for rate is quantitative.

Acknowledgement:

Here are the resources that helped me finish my homework.

I'll forever be grateful to https://stackoverflow.com/, it never fails in helping me out.

Another important resources that guided me - http://d3-legend.susielu.com/

This video was helpful too - https://www.youtube.com/watch?v=6Xynj_pBybc

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: Garamond; }
  .axis { font: 14px Garamond; }
  .label {font: 16px Garamond; }
​
.tooltip {
  position: absolute;
  width: 150px;
  height: 60px;
  background: #f2f2f2;
  pointer-events: none;
}
</style>
  
<body>
  <h2>Scatterplot</h2>
  <div><svg id="chart1" width="700" height="400"></svg></div>
​
<script>
// 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 + ")");
var colorScale = d3.scaleOrdinal(d3.schemeCategory20);
// 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");
​
  /*colLeg = svg.append("g")
            .attr("class","legend")
            .attr("transform","translate(35, 35)")
            .attr("data-legend", function(d) {return 'd.Conf'})
            .attr("font-family","Garamond")
            .attr("font-size","10px")
            .call(d3.legend)*/
  // draw dots
  g.selectAll(".dot")
      .data(data)
      
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function (d) {
        if (d.Rate >= 150) {return d = 1.5}
        else if (d.Rate < 150) {return d = 2.5};
        
        
  })
      .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/> " + d.Conf + "<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>
    