S18 - HW3 - Scatterplot

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

Varsha Ravi -01067335

**Scatterplot - ** This is a scatterplot which represents the football data. This is a plot representig Passing TD against Rushing TD. This graph clearly shows points on the X-Y graph with the corresponding values.

Marks used - Points
Channels - Position
Attributes they are maped to - position of x axis(Rushing TD) , position of y axis(Passing TD)
Data type of that attribute - Number of passing touch downs, number of rushing touch downs

After Changes - Different colors are used to distinguish between Conferences.Also, we have given different sizes to the bubbles in the scatterplot depending on the values of passing attempts. It is easy for us to know which conference has the highest number of Passing Attempts.

Channels - Position, Size ,Color hue
Attributes they are mapped to - Magnitude , identity , area
Data type of that attribute - Number of passing touch downs, number of rushing touch downs, number of passing attempts.

Color legend has been added to the scatterplot.

References -

https://bl.ocks.org/pstuffa/3393ff2711a53975040077b7453781a9
https://github.com/d3/d3-scale-chromatic
/mbostock/3887118
http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html

<!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;
}
</style>
  
<body>
  <h2>Scatterplot</h2>
  <div><svg id="chart1" width="700" height="400"></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"];
  d["Passing Attempts"] = +d["Passing Attempts"];
  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]);
var rScale = d3.scaleLinear()
								 .domain([0, d3.max(data, function(d) { return yValue(d); })])
								 .range([1, 10]);
  var cVal = function(d) { return d.Conf;},
    color = d3.scaleOrdinal(d3.schemeCategory10); 
  
  // 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 rScale(yValue(d))})
      .attr("cx", xMap)
      .attr("cy", yMap)
			.style("fill", function(d) { return color(cVal(d));})
      // 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) + ")<br/>Passing Attempts:" + d["Passing Attempts"])
               .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
      });
  
   // legend
  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(10," + (i+7) * 20 + ")"; });

// legend colored rectangles
  legend.append("rect")
      .attr("x", width + 60)
      .attr("width", 40)
      .attr("height", 15)
      .style("fill", color);

// legend text
  legend.append("text")
      .attr("x", width + 55)
      .attr("y", 10)
      .attr("dy", ".02em")
      .style("text-anchor", "end")
      .text(function(d) { return d;})
});

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

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

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