S18 - HW3 - Scatterplot

Hariharan Thiyagarajan

CS 725/825

Spring 2018

Homework 3 - Scatterplot

Intial Scatterplot

Mark Used

Points is the mark used in the scatter plot.
Position is the Channel used to map the points.
Position channel is mapped to the attribute RushingTD's and Passing TD's
The data type of the attribute RushingTD's and Passing TD's is Quantitative

Edited Scatterplot

Channel used

Position, color and Size are the channels used in this.
Position is used to plot the points. Color is used to differentiate the attribute Conf and Size is used for the attribute Rate which calculates the passing effiecny rating above 140.
The data type of the Rushing and Passinf TD's is Quantitative, Conf is Categorical and Rate is Quantitative

forked from hthiyaga'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;
}
  
  
  #l{
    
     margin-left:38px;
     margin-bottom:-110px;
     transform-origin: 10px;
     font-weight:Bold;
     font-style:italic;
       
     
   
  }
</style>
  
<body>
  <h2>Scatterplot</h2>
<div>
<pre id="l">pac-12   MWC     MAC    Big 12  Big Ten   SEC     CUSA     ACC   American   Ind  Sun Belt
    
</pre>

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");
// color legend
//      var col = ["#3B3B6D","red"]
//      g.selectAll(".cl")
//      .data(col)
//      .enter().append("circle")
//      .attr("class","cl")
//      .attr("r",4)
//      .attr("cx",680)
//      .style("fill",function(d){return d;})
  
  // draw dots
  
  
  g.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function(d){
          if(d.Rate >= 140)
    
    return 4.5;
           else { return 2.75;}}
           )
      .attr("cx", xMap)
      .attr("cy", yMap)

// tooltip
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)         // ms delay before appearing
               .style("opacity", 0.8); // tooltip appears on mouseover
          tooltip.html(d["Player"] + "<br/> " + d.School + "<br />"  + d.Conf + "<br />"+ d.Rate+ "<br />" +"<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
      })
  
     
     .style("fill",function(d){
    
            if(d.Conf =="Pac-12"){ return "#3B3B6D";}
            else if( d.Conf == "MWC") { return "#391802	";}
            else if( d.Conf == "MAC") { return "#D3212D";}
            else if( d.Conf == "Big 12") { return "#3B7A57";}
            else if( d.Conf == "Big Ten") { return"#84DE02";}
            else if( d.Conf == "SEC") { return "#FFBF00";}
            else if( d.Conf == "CUSA") { return "#551B8C";}
            else if( d.Conf == "ACC") { return "#008000";}
            else if( d.Conf == "American") {return"#00FFFF";}
            else if( d.Conf == "Ind") { return "#007FFF";}
            else if( d.Conf == "Sun Belt") {return"#FF2052";}
            else{ return black;}
            
  })
  ;
});
 
  
 
</script>

</body>
</html>

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

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