S19 - HW3 - Scatterplot

David Ash
CS725/825
Spring 2019

SCATTER PLOT

Q1. What is the type of mark used in the bar chart?
A. The mark used is a zero-dimenional (0D) mark

Q2. List the channels, the attribute they are mapped to, and the data type of that attribute.
** A.** The channel that is used is the magnitude channel.
The attributes for the magnitude channel are horizontal position, and vertical postion.
Vertical position is mapped to the passing TDs attribute.
Horizontal position is mapped to the rushing TDs attribute

Q3. After your changes, list the channels, the attribute they are mapped to, and the data type of that attribute
** A.** The channels that are used is the magnitude channel, and the identity channel.
The attributes for the magnitude channel are horizontal position, vertical postion, and area(2D size).
The attributes for the identity channel is color hue.
Vertical position is mapped to the passing TDs attribute.
Horizontal position is mapped to the rushing TDs attribute.
Area (2D size) is mapped to the rushing yards attribute.
Color hue is mapped to the conf attribute.

REFERENCE
hsl
ordinal
D3 Scatterplot Example
forked from weiglemc's block: S19 - HW 3 - Bar Chart

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.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").then(function(data) {
  
/* 
 * 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 - use +d to change string (from CSV) into number format
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 - use +d to change string into number format
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");

colors=["red", "orange", "yellow", "green", "blue", "violet", "brown", "darkred", "yellowgreen", "aqua", "maroon"]
  var colorScale = d3.scaleOrdinal(colors)
  // draw dots
  g.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function(d, i){ return d["Rushing Yards"]/30})
      .attr("cx", xMap)
      .attr("cy", yMap)
			.style("fill", function(d, i){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.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
      });
  // draw legend
  var legend = svg.selectAll(".legend")
      .data(colorScale.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(125," + i * 20 + ")"; });

// draw legend colored rectangles
  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", function(d, i) {return colorScale(i)});

// 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.v5.min.js

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