CS 725/825 - Spring 2018 - Homework 3 - Scatterplot
Varsha Ravi -01067335
**Scatterplot - ** This is a scatterplot which represents the football data. This is a plot representig Passing TD against Rushing TD. This graph clearly shows points on the X-Y graph with the corresponding values.
After Changes - Different colors are used to distinguish between Conferences.Also, we have given different sizes to the bubbles in the scatterplot depending on the values of passing attempts. It is easy for us to know which conference has the highest number of Passing Attempts.
Color legend has been added to the scatterplot.
References -
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;}</style> <body> <h2>Scatterplot</h2> <div><svg id="chart1" width="700" height="400"></svg></div><script>// add the graph canvas to the body of the webpagevar 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 webpagevar tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0);// load datad3.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"]; d["Passing Attempts"] = +d["Passing Attempts"]; 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 yvar 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]);var rScale = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return yValue(d); })]) .range([1, 10]); var cVal = function(d) { return d.Conf;}, color = d3.scaleOrdinal(d3.schemeCategory10); // 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"); // draw dots g.selectAll(".dot") .data(data) .enter().append("circle") .attr("class", "dot") .attr("r", function(d) {return rScale(yValue(d))}) .attr("cx", xMap) .attr("cy", yMap) .style("fill", function(d) { return color(cVal(d));}) // 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.School + "<br/>(" + xValue(d) + ", " + yValue(d) + ")<br/>Passing Attempts:" + d["Passing Attempts"]) .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 }); // legend var legend = svg.selectAll(".legend") .data(color.domain()) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(10," + (i+7) * 20 + ")"; }); // legend colored rectangles legend.append("rect") .attr("x", width + 60) .attr("width", 40) .attr("height", 15) .style("fill", color); // legend text legend.append("text") .attr("x", width + 55) .attr("y", 10) .attr("dy", ".02em") .style("text-anchor", "end") .text(function(d) { return d;})});</script></body></html> https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js