CS 725/825 - Spring 2018 - Homework 3 - Scatterplot
** Shwetha Shyam Sunder - 01067337 **
Scatterplot size is based on http://alignedleft.com/tutorials/d3/making-a-scatterplot
Scatterplot colo is based on http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3
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: 75px; background: #f2f2f2; pointer-events: none;}.viz { display: inline-block;}</style> <body> <h2>Scatterplot</h2> <div class="viz"><svg id="chart1" width="700" height="500"></svg></div> <div class="viz" style="margin-top: -16%";><svg id="chart2" width="200" height="450"></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 + ")");var svg2 = d3.select("#chart2");// var g2 = svg2.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);var color_domain = ["Pac-12", "MWC", "MAC","SEC", "Big 12", "Big Ten","CUSA", "ACC", "American","Ind", "Sun Belt"];var color = d3.scaleOrdinal() .domain(["Pac-12", "MWC", "MAC","SEC", "Big 12", "Big Ten","CUSA", "ACC", "American","Ind", "Sun Belt"]) .range(['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99']);// 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["Interceptions"] = +d["Interceptions"]; 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]); // 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 (d.Interceptions/2); }) .attr("cx", xMap) .attr("cy", yMap) .style("fill", function(d) { return color(d.Conf); }) // 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>Interceptions: "+d.Interceptions) .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 }); var legend = svg2.selectAll("g.legend") .data(color_domain) .enter().append("g") .attr("class", "legend"); var ls_w = 15, ls_h = 15; legend.append("rect") .attr("x", 20) .attr("y", function(d, i){ return height - (i*ls_h) - 2*ls_h + 15;}) .attr("width", ls_w) .attr("height", ls_h) .style("fill", function(d, i) { return color(d); }) .style("opacity", 0.8) .style("margin-top", "10px"); legend.append("text") .attr("x", 50) .attr("y", function(d, i){ return height - (i*ls_h) - ls_h - 4 + 15;}) .text(function(d, i){ return color_domain[i].toString(); }) .style("font-size","12px");});</script></body></html> https://d3js.org/d3.v4.min.js
https://d3js.org/d3-scale-chromatic.v1.min.js