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.
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".
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.
xxxxxxxxxx
<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> <!-- for color scales -->
<!-- Example based on https://bl.ocks.org/mbostock/3887118 -->
<!-- Tooltip example from https://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html -->
<style>
body { font-family: calibri; }
.axis { font: 14px calibri; }
.label {font: 16px calibri; }
.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>
<script>
// add the graph canvas to the body of the webpage
var svg = d3.select("#chart1"),
margin = {top: 6, right: 20, bottom: 224, left: 100},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
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