| license: mit |
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 http://bl.ocks.org/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
| Team | TW | MW | |
|---|---|---|---|
| Kerala blasters | 8 | 4 | |
| Rising Pune Supergiants | 13 | 7 | |
| Gujarat Lions | 15 | 10 | |
| Sunrisers Hyderabad | 35 | 17 | |
| Deccan Chargers | 43 | 19 | |
| Kings XI Punjab | 68 | 28 | |
| Delhi Daredevils | 72 | 33 | |
| Rajasthan Royals | 63 | 34 | |
| Royal Challengers Bangalore | 70 | 35 | |
| Chennai Super Kings | 66 | 42 | |
| Kolkata Knight Riders | 78 | 44 | |
| Mumbai Indians | 85 | 48 |
| <!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> <!-- for color scales --> | |
| <!-- Example based on http://bl.ocks.org/mbostock/3887118 --> | |
| <!-- Tooltip example from http://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; | |
| } | |
| </style> | |
| <body> | |
| <h2>Scatterplot</h2> | |
| <div><svg id="chart1" width="700" height="412"></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", 3.5) | |
| .attr("cx", xMap) | |
| .attr("cy", yMap) | |
| .style("fill","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> | |
| </body> | |
| </html> |