Built with blockbuilder.org
xxxxxxxxxx<html><meta charset="utf-8"><!-- 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: 11px sans-serif;}.axis path,.axis line { fill: none; stroke: #000; shape-rendering: crispEdges;}.dot { stroke: #000;}.tooltip { position: absolute; width: 300px; height: 28px; pointer-events: none;}</style><body><div> <div class="no_res"> <b>Selection and Highlighting</b> <p>For this exercise I choose to change the view of my existing graph by implementing selection and highlighting. Being able to select one or more elements lets your user take advantage of the interactive idiom. Selection gives the user choice. Choice lets the user decide on a target that may be the input for another idiom. I liked allowing the user to select one conference to specify a dataset of teams since it was plotted in limited space not allowing the user to see every dot. The second view manipulation I used was highlighting. Highlighting allows the user to see what they exactly selected. In my design view this was an ideal addition to my graph view as the dots were plotted close to each other. When a user selects a conference the corresponding dots are then highlighted indicating their change by appearance. </p> <p>Code used from Mike Bostock’s and Professor Weigle's example.</p> </div> <br></div><script src="https://d3js.org/d3.v3.min.js"></script><script>var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 500 - margin.left - margin.right, height = 300 - margin.top - margin.bottom;var xValue = function(d) { return d['Rushing TD'];}, // data -> value xScale = d3.scale.linear().range([0, width]), // value -> display xMap = function(d) { return xScale(xValue(d));}, // data -> display xAxis = d3.svg.axis().scale(xScale).orient("bottom");var yValue = function(d) { return d["Passing TD"];}, // data -> value yScale = d3.scale.linear().range([height, 0]), // value -> display yMap = function(d) { return yScale(yValue(d));}, // data -> display yAxis = d3.svg.axis().scale(yScale).orient("left");// setup fill colorvar cValue = function(d) {if(d['Conf'] == 'Big 12' || d['Conf'] == 'Big Ten' || d['Conf'] == 'Conf' || d['Conf'] == 'Pac-12' || d['Conf'] == 'ACC') { return 'Big Five'; } else if(d['Conf'] == 'MWC' || d['Conf'] == 'Sun Belt' || d['Conf'] == 'American' || d['Conf'] == 'CUSA' || d['Conf'] == 'MAC'){ return 'Group of Five';}}, color = function(val) { if(val == 'Big Five') { return '#ffeda0'; } else if (val == 'Group of Five') { return '#feb24c'; } else { return '#f03b20'; }}var svg = d3.select(".no_res").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 + ")");var tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("opacity", 0);// load datad3.csv("passing-stats-2014.csv", function(error, data) { data.forEach(function(d) { d['Rushing TD'] = +d['Rushing TD']; d['Passing TD'] = +d['Passing TD']; }); xScale.domain([d3.min(data, xValue)-3, d3.max(data, xValue)+3]); yScale.domain([d3.min(data, yValue)-3, d3.max(data, yValue)+3]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("class", "label") .attr("x", width) .attr("y", -6) .style("text-anchor", "end") .text("Rushing TD"); 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("Passing TD"); svg.selectAll(".dot") .data(data) .enter().append("circle") .attr("class", "dot") .attr("r", 3.5) .attr("cx", xMap) .attr("cy", yMap) .style("fill", function(d) { return color(cValue(d));}) .on("mouseover", function(d) {tooltip.transition().duration(200) .style("opacity", .9); tooltip.html(d["Player"] + "<br/> (" + xValue(d) + ", " + yValue(d) + ")") .style("left", (d3.event.pageX + 10) + "px") .style("top", (d3.event.pageY - 28) + "px"); }) .on("mouseout", function(d) { tooltip.transition() .duration(500) .style("opacity", 0); }) .on("click", function(d) { var current = cValue(d); console.log(current); svg.selectAll("circle") .data(data) .transition() .duration(5000) .each("start", function() { d3.select(this) .attr("r", function(d) { if (cValue(d) == current) {return "15"} else { return "3.5" } }) }) .each("end", function() { d3.select(this) .transition() .duration(500) .attr("r", 3.5); }); }); var legend = svg.selectAll(".legend") .data(['Big Five', 'Group of Five', 'Independent']) .enter().append("g") .attr("class", "legend") .attr("transform", function(d, i) { return "translate(0," + i * 24 + ")"; }); legend.append("rect") .attr("x", width - 18) .attr("width", 18) .attr("height", 18) .style("fill", color); legend.append("text") .attr("x", width - 24) .attr("y", 9) .attr("dy", ".35em") .style("text-anchor", "end") .text(function(d) { return d; });});</script></body></html> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js