Surbhi Shankar 01012632
Selection and highlighing enhances the view and makes it easier for the viewer to view the information. Although there is a bit of animation in this scatterplot, it is more effective because of the changing of size and highlighting players belonging to one particular kind of Conference. If we want information about one single Conference, then this scatterplot is a good choice. I have retained the different sizes of the circles (based on varying Rushing TD values) initially and after the animation. I chose this graph for highligting and animating because there are different sizes of circles already based on Rushing TD values and I wanted to see if it gets better with highlighting the circles with respect to particular Conference. Also, it gives some information about the Player when we hover over the circles which is helpful.
References:
https://bost.ocks.org/mike/
/weiglemc/bdc0474429e6567bc320
/caged/6476579
/williamqliu/bd12f73d0b79d70bfbae
https://github.com/mbostock/d3/wiki/Gallery
xxxxxxxxxx<html><meta charset="utf-8"><!-- Example based on https://bl.ocks.org/weiglemc/bdc0474429e6567bc320 --><style>.axis path,.axis line { fill: none; stroke: #000;}.dot { stroke: #000;} .dot:hover{ fill:red; } .tooltip { position: absolute; width: 200px; height: 28px; pointer-events: none;} .d3-tip { line-height: 1; font-weight: bold; padding: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 2px;} .d3-tip:after { box-sizing: border-box; display: inline; font-size: 10px; width: 100%; line-height: 1; color: rgba(0, 0, 0, 0.8); content: "\25BC"; position: absolute; text-align: center;} .d3-tip.n:after { margin: -1px 0 0 0; top: 100%; left: 0;} </style><body><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script><script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script><script>var margin = {top: 25, right: 50, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;// Create x var xVal = function(d) { return d["Passing TD"];}, xScale = d3.scale.linear().range([0, width]), xMap = function(d) { return xScale(xVal(d));}, xAxis = d3.svg.axis().scale(xScale).orient("bottom");// Create yvar yVal = function(d) { return d["Rushing TD"];}, yScale = d3.scale.linear().range([height, 0]), yMap = function(d) { return yScale(yVal(d));}, yAxis = d3.svg.axis().scale(yScale).orient("left"); var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(function(d) { return "<strong>" + "Player: " + d.Player + "</strong> <span style='color:red'>" +"<br>" + "School: " + d.School + "</span>"; })var cVal = function(d) { return d.Conf;}, color = d3.scale.ordinal() .domain(["SEC", "ACC", "Big 12","Pac-12","Big Ten"]) .range(["#ffffcc", "#a1dab4" , "#41b6c4","#2c7fb8","#253494"]); var tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0);var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right ) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.call(tip); // load data in .csv formatd3.csv("data.csv", function(error, data1) { data1.forEach(function(d) { if(d['Conf'] == 'SEC' || d['Conf'] == 'ACC' || d['Conf'] == 'Big 12' || d['Conf'] == 'Pac-12' || d['Conf'] == 'Big Ten') d["Rushing TD"] = +d["Rushing TD"]; d["Passing TD"] = +d["Passing TD"]; }); xScale.domain([d3.min(data1, xVal)-2, d3.max(data1, xVal)+2]); yScale.domain([d3.min(data1, yVal)-1, d3.max(data1, yVal)+5]);var rScale = d3.scale.linear() .domain([0, d3.max(data1, function(d) { return yVal(d); })]) .range([4, 12]); // define x axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("class", "label") .attr("x", width) .attr("y", -10) .style("text-anchor", "end") .text("Passing TD"); // define y axis svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("class", "label") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Rushing TD"); svg.selectAll(".dot") .data(data1) .enter().append("circle") .attr("class", "dot") .attr("r", function(d) {return rScale(yVal(d))}) .attr("cx", xMap) .attr("cy", yMap) .style("fill", function(d) { return color(cVal(d));}) .on("mouseover", function(d) { tooltip.transition() .duration(1200) .style("opacity", 0); }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); }) .on("click", function(d) { var i = d.Conf; console.log(i); svg.selectAll("circle") .data(data1) .transition() .duration(1000) .each("start", function() { d3.select(this) .attr("r", function(d) { if (d.Conf == i) {return "22"} else { return function(d) {return rScale(yVal(d))} } }) }) .each("end", function() { d3.select(this) .transition() .duration(1500) .attr("r", function(d) {return rScale(yVal(d))}) .style("fill", function(d) { return color(cVal(d));}) }); }) .on("mouseover", tip.show) .on("mouseout", tip.hide); // legend var legend = svg.selectAll(".legend") .data(['SEC', 'ACC', 'Big 12','Pac-12','Big Ten']) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(10," + (i+4) * 20 + ")"; }); // legend colored rectangles legend.append("rect") .attr("x", width - 20) .attr("width", 20) .attr("height", 20) .style("fill", color); // legend text legend.append("text") .attr("x", width - 24) .attr("y", 15) .attr("dy", ".30em") .style("text-anchor", "end") .text(function(d) { return d;})}); function type(d) { d.Player = +d.Player; return d;} </script> </body></html> Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js
https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js