Old school D3 from simpler times

All examples By author By category About

surabhishankar

Full window Github gist

Visualization Implementation 9

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

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

<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 y
var 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 format
d3.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