Hariharan Thiyagarajan
CS 725/825
Spring 2018
Homework 3 - Scatterplot
Intial Scatterplot
Mark Used
Edited Scatterplot
Channel used
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: 150px;
height: 60px;
background: #f2f2f2;
pointer-events: none;
}
#l{
margin-left:38px;
margin-bottom:-110px;
transform-origin: 10px;
font-weight:Bold;
font-style:italic;
}
</style>
<body>
<h2>Scatterplot</h2>
<div>
<pre id="l">pac-12 MWC MAC Big 12 Big Ten SEC CUSA ACC American Ind Sun Belt
</pre>
<svg width =700>
<circle cx=50 cy=110 r=6 fill="#3B3B6D" />
<circle cx=110 cy=110 r=6 fill="#391802"/>
<circle cx=170 cy=110 r=6 fill="#D3212D"/>
<circle cx=230 cy=110 r=6 fill="#3B7A57" />
<circle cx=290 cy=110 r=6 fill="#84DE02"/>
<circle cx=350 cy=110 r=6 fill="#FFBF00"/>
<circle cx=410 cy=110 r=6 fill="#551B8C"/>
<circle cx=470 cy=110 r=6 fill="#008000"/>
<circle cx=530 cy=110 r=6 fill="#00FFFF"/>
<circle cx=590 cy=110 r=6 fill="#007FFF"/>
<circle cx=650 cy=110 r=6 fill="#FF2052"/>
</svg> </div>
<div><svg id="chart1" width="750" height="498"></svg></div>
<script>
// add the graph canvas to the body of the webpage
var svg = d3.select("#chart1"),
margin = {top: 15, right: 20, bottom: 50, left: 70},
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
// 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");
// color legend
// var col = ["#3B3B6D","red"]
// g.selectAll(".cl")
// .data(col)
// .enter().append("circle")
// .attr("class","cl")
// .attr("r",4)
// .attr("cx",680)
// .style("fill",function(d){return d;})
// draw dots
g.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", function(d){
if(d.Rate >= 140)
return 4.5;
else { return 2.75;}}
)
.attr("cx", xMap)
.attr("cy", yMap)
// tooltip
.on("mouseover", function(d) {
tooltip.transition()
.duration(200) // ms delay before appearing
.style("opacity", 0.8); // tooltip appears on mouseover
tooltip.html(d["Player"] + "<br/> " + d.School + "<br />" + d.Conf + "<br />"+ d.Rate+ "<br />" +"<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
})
.style("fill",function(d){
if(d.Conf =="Pac-12"){ return "#3B3B6D";}
else if( d.Conf == "MWC") { return "#391802 ";}
else if( d.Conf == "MAC") { return "#D3212D";}
else if( d.Conf == "Big 12") { return "#3B7A57";}
else if( d.Conf == "Big Ten") { return"#84DE02";}
else if( d.Conf == "SEC") { return "#FFBF00";}
else if( d.Conf == "CUSA") { return "#551B8C";}
else if( d.Conf == "ACC") { return "#008000";}
else if( d.Conf == "American") {return"#00FFFF";}
else if( d.Conf == "Ind") { return "#007FFF";}
else if( d.Conf == "Sun Belt") {return"#FF2052";}
else{ return black;}
})
;
});
</script>
</body>
</html>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js