Visual Implementation (VI10)

<!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>Faceting Concept Superimpose</b>
	<p>I choose to implement the superimpose design faucet by displaying the team member names correlated with their “passing TD” and Rushing TD.  By superimposing the player’s statistics on another layer it is much easier to distinguish the data of each plot from one another.  Super imposing these statistics also does not require any additional screen space and does not contribute to visual clutter.</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 = 600 - margin.left - margin.right,
    height = 400 - 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 '#efedf5';
	} else if (val == 'Group of Five') {
		return '#bcbddc';
	} else {
		return '#756bb1';
	}
}

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