S18 - HW3 - Scatterplot

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

** Modified README.md by dralph **

Q1. What is the type of mark used in the scatterplot?

The mark for the scatterplot is a Point.

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

Position channel which maps to x (Rushing TDs) and y (Passing TDs) attributes/coordinates (numerical/quantitative).

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

This remains the same:

Position channel which maps to x (Rushing TDs) and y (Passing TDs) attributes/coordinates (numerical/quantitative).

Added:

Hue channel which maps to the "Conf" attribute (11 conferences; label/categorical).
Size channel which maps to the "Interceptions" attribute (numerical/quantitative).

Hue/Color Assignments:

'Big 12'--> 'tan'
'CUSA'--> 'blue'
'SEC'--> 'crimson'
'Big Ten'--> 'silver'
'ACC'--> 'green'
'Pac-12'--> 'navy'
'American'--> 'red'
'Ind'--> 'gold'
'Sun Belt'--> 'yellow'
'MAC'--> 'black'
'MWC'--> 'gray'

The size channel modified existing dot size in a function:

3.5+(i["Interceptions"]*0.4)

Extra Credit: Add a color legend to the chart.

Legend added to show the color assignments for the conferences.

References:

https://jnnnnn.blogspot.com.au/2017/02/distinct-colours-2.html
https://bl.ocks.org/d3indepth/fabe4d1adbf658c0b73c74d3ea36d465
https://stackoverflow.com/questions/35186840/add-different-colors-to-each-bar-in-d3
/weiglemc/6185069
https://bl.ocks.org/enjalot/7c0fe907ba2010fed420
https://github.com/d3/d3-color

Built with blockbuilder.org

forked from weiglemc'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;
}
</style>
  
<body>
  <h2>Scatterplot</h2>
  
  <div><svg id="chart1" width="800" 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);
  
// Added by dralph
var confs = [ 'Big 12', 'CUSA', 'SEC', 'Big Ten', 'ACC', 'Pac-12', 'American', 'Ind', 'Sun Belt', 'MAC', 'MWC' ];
  
var colorScale = d3.scaleOrdinal()
.domain(confs)
.range([ 'tan', 'blue', 'crimson', 'silver', 'green', 'navy', 'red', 'gold', 'yellow', 'black', 'gray' ])
// End dralph

// load data
// Modified by dralph - added interceptions
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["Interceptions"] = +d["Interceptions"]
  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
 */ 
  
// Added by dralph
// Get the color for the dot based on the conference
  function getcolor(i)
  {
    var color = colorScale(i["Conf"]);
    return color;
  }
// Size the dot by Interceptions
  function getsize(i)
  {
		var size = 3.5+(i["Interceptions"]*0.4);
    return size;
  }  
// End dralph
  
// 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
  // Modified by dralph
  g.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", getsize)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", getcolor )

// 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
      });

// BEGIN LEGEND CODE  
  // Legend taken from https://bl.ocks.org/weiglemc/6185069

// draw dots
  g.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", getsize )
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", getcolor )
  
  // draw legend
  var legend = svg.selectAll(".legend")
      .data(colorScale.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(153," + i * 19 + ")"; });

// draw legend colored rectangles
  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", colorScale);

// draw legend text
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .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