Visual Implementation (VI9)

<!DOCTYPE html>
<html>
<meta charset="utf-8">

.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 color
var 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 data
d3.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