HW7- Scatterplot1

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

forked from hthiyaga's block: HW7- Scatterplot

forked from hthiyaga's block: HW7- Scatterplot1

<!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;
}

/* basic positioning */
.legend { list-style: none;
           margin-left:738px;
           margin-top:-495px;
  
  }
.legend li { float: left; 
  margin-right: 10px; }
.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }
/* your colors */
.legend .CSK{ background-color: #ff8c00; }
.legend .DC { background-color: Gray; }
.legend .DD{ background-color: Red; }
.legend .GL { background-color: saddlebrown; }
.legend .KB{ background-color: Darkgreen; }
.legend .KXIP { background-color: Black; }
.legend .KKR{ background-color: Navy; }
.legend .MI{ background-color: teal; }
.legend .RR{ background-color: Blue; }
.legend .RPS { background-color: Purple; }
.legend .RCB{ background-color: Maroon; }
.legend .SRH{ background-color: #ff1ed2; }

</style>
  
<body>
  <h2>Scatterplot</h2>

<div><svg id="chart1" width="700" height="481"></svg>
 </div>
<script>
// add the graph canvas to the body of the webpage
var svg = d3.select("#chart1"), 
    margin = {top: 20, 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.tsv("data.tsv", function (d) {
  // change string (from CSV) into number format
  d["TW"] = +d["TW"];
  d["MW"] = +d["MW"];
  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["TW"];}, // 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["MW"];}, // 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")
    .style("font-weight", "bold")
      .style("font-size", "22px")

.text("Toss won")
    .style("fill","Teal");

// 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")
    .style("font-weight", "bold")
    .style("font-size", "22px")
    .text("Matches won")
    .style("fill","Teal");

// draw dots
  
  
  g.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 4.5)
      .attr("cx", xMap)
      .attr("cy", yMap)
      
    .style("fill",function(d){
    
            if(d.Team =="Kerala Blasters"){ return "Darkgreen";}
            else if( d.Team =="Rising Pune Supergiants") { return "Purple";}
            else if( d.Team =="Deccan Chargers") { return "Gray";}
            else if( d.Team =="Mumbai Indians") { return "teal";}
            else if( d.Team =="Delhi Daredevils") { return"Red";}
            else if( d.Team =="Rajasthan Royals") { return "Blue";}
            else if( d.Team =="Royal Challengers Bangalore") { return "Maroon";}
            else if( d.Team =="Chennai Super Kings") { return "#ff8c00";}
            else if( d.Team =="Kolkata Knight Riders") { return "Tan";}
    
            else if( d.Team =="Kings XI Punjab") { return "#0000";}
            
            else if( d.Team =="Gujarat Lions") { return "saddlebrown";}
            else if(d.Team =="Sunrisers Hyderabad") {return"#ff1ed2";}
    else
      {return "teal";}
           
  })
            
     
      // tooltip
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)         // ms delay before appearing
               .style("opacity", .8); // tooltip appears on mouseover
          tooltip.html(d["Team"] + "<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
      });
});

</script>
  <ul class="legend">
    <li><span class="CSK"></span> CSK</li></br>
  </br>
    <li><span class="DC"></span>DC</li></br></br>
    <li><span class="DD"></span>DD
</li></br></br>
    <li><span class="GL"></span>GL</li></br></br>
<li><span class="KB"></span> KB
</li></br></br>
    <li><span class="KXIP"></span> KXIP</li></br></br>
<li><span class="KKR"></span> KKR
</li></br></br>
    <li><span class="MI"></span> MI
</li></br></br>
<li><span class="RR"></span> RR

</li></br></br>
    <li><span class="RPS"></span>RPS

</li></br></br>
<li><span class="RCB"></span>RCB

</li></br></br>
    <li><span class="SRH"></span>SRH

</li></br>

</ul>

</body>
</html>

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

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