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

Built with blockbuilder.org

forked from weiglemc's block: S18 - HW3 - Scatterplot

HW3 Scatterplot Q&A 1.What is the type of mark used in the scatterplot?

A Point is the mark.

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

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

The vertical line is the spatial position channel for the quantitative attribute of "Passing TD's" and the horizontal line is the spatial position channel for the quantitative attribute "Rushing TD's" but I also added in the color channel attribute for "Conf", which means Conferences the teams play in, as well as a size channel attribute for "Total TD's" by adding together both "Rushing TD's" and "Passing TD's". The more the size of the points increase the more total TD's the quarter has in a season.

<!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: 140px;
  height:20 px;
  background: #f2f2f2;
  pointer-events: none;
}
</style>
  
<body>
  <h2>Scatterplot</h2>
  <div><svg id="chart1" width="875" height="628"></svg></div>

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
 //setup color scale for legend
var color = d3.scaleOrdinal()
    .domain(["ACC","American","Big 12","Big 10","CUSA","Ind","MAC","MWC","Pac-12","SEC", ])
    .range(["lime","gold", "red", "darkorange", "cyan", "magenta", "dimgray", "darkslategray", "navy", "hotpink","peru","Sun Belt"]);
 
//legend block size
var legendRectSize = 18;
var legendSpacing = 4;
  
  // 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]);
  
//legend variable positioning
var legend = d3.select('svg')
    .append("g")
    .selectAll("g")
    .data(color.domain())
    .enter()
    .append('g')
      .attr('class', 'legend')
      .attr('transform', function(d, i) {
        var height = legendRectSize;
        var x = -9;
        var y = i * height;
        return 'translate(' + x + ',' + y + ')';
    });
  // 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.0941022989254657))
    .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", -15-(height/2.))
    .attr("y", 4-(margin.left*0.352))
    .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) {if (d["Passing TD"]+d["Rushing TD"] <=10){return 2.25}
                                 else if (d["Passing TD"]+d["Rushing TD"]> 10 &&   d["Passing TD"]+d["Rushing TD"] <=15 ) {return 3.00}                                              else if (d["Passing TD"]+d["Rushing TD"]> 15 &&   d["Passing TD"]+d["Rushing TD"] <=20 ) {return 3.75}
                                 else if (d["Passing TD"]+d["Rushing TD"]> 20 &&   d["Passing TD"]+d["Rushing TD"] <=25 ) {return 4.50}
                                 else if (d["Passing TD"]+d["Rushing TD"]> 25 &&   d["Passing TD"]+d["Rushing TD"] <=30 ) {return 5.40} 
                                 else if (d["Passing TD"]+d["Rushing TD"]> 30 &&   d["Passing TD"]+d["Rushing TD"] <=35 ) {return 8.50} 
                                 else if (d["Passing TD"]+d["Rushing TD"]> 35 &&   d["Passing TD"]+d["Rushing TD"] <=40 ) {return 9.75} 
                                 else if (d["Passing TD"]+d["Rushing TD"]> 40 &&   d["Passing TD"]+d["Rushing TD"] <=45 ) {return 12.00}
                                 else if (d["Passing TD"]+d["Rushing TD"]> 45 &&   d["Passing TD"]+d["Rushing TD"] <=60 ) {return 15.00};})
      .attr("cx", xMap)
      .attr("cy", yMap)
			.style("fill", function(d) {if (d.Conf =="ACC") {return "lime"}
                                 else if (d.Conf =="American") {return "gold"} 
                                 else if (d.Conf =="Big 12") {return "red"}                                
                                 else if (d.Conf =="Big Ten") {return "darkorange"} 
                                 else if (d.Conf =="CUSA") {return "cyan"}  
                                 else if (d.Conf =="Ind") {return "magenta"} 
                                 else if (d.Conf =="MAC") {return "dimgray"} 
                                 else if (d.Conf =="MWC") {return "darkslategray"} 
                                 else if (d.Conf =="Pac-12") {return "navy"} 
                                 else if (d.Conf =="SEC") {return "hotpink"}
                                 else if (d.Conf =="Sun Belt") {return "peru"}; })
      // 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["Conf"] + "<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
      });
  
//input color legend to chart
legend.append('rect')
    .attr('width', legendRectSize)
    .attr('height', legendRectSize)
    .style('fill', color)
    .style('stroke', color);

legend.append('text')
    .attr('x', legendRectSize + legendSpacing)
    .attr('y', legendRectSize - legendSpacing)
    .text(function(d) { return d; });
});

</script>
</body>
</html>

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

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