D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
body {
  font: 11px sans-serif;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.dot {
  stroke: #000;
}
.tooltip {
  position: absolute;
  width: 200px;
  height: 28px;
  pointer-events: none;
}
</style>
<body>
​
<h1 align="center">Selection and Highlighting</h1>
<h2> I have taken only QBs from schools in the Big Five conferences, coloring the marks by conference.</h2>
<h3> Selecting any one conference (among SEC,ACC,Big 12,Pac 12,Big Ten) and clicking on that respective dot on the graph, highlights that conference and makes all other conferences inactive for some time. By this audience can get the count in each conference.</h3>
<script src="https://d3js.org/d3.v3.min.js"></script>
​
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 800 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
// setup x 
var xValue = function(d) { return d["RushingTD"];}, // 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");
// setup y
var yValue = function(d) { return d["PassingTD"];}, // 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) { return d.Conf;},
 color = function(val) {
    if(val == 'SEC') {
        return '#e41a1c';
    } else if (val == 'ACC') {
        return '#377eb8';
    } else if( val == 'Big 12'){
        return '#4daf4a';
    }
   else if(val == 'Pac-12')
     {
       return '#984ea3';
     }
     else
       {
         return '#ff7f00';
       }
};
// add the graph canvas to the body of the webpage
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 + ")");
// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
// load data
d3.csv("passing-stats-2014.csv", function(error, data) {
  // change string (from CSV) into number format
  data.forEach(function(d) {
    d["RushingTD"] = +d["RushingTD"];
    d["PassingTD"] = +d["PassingTD"];
    
});
  // don't want dots overlapping axis, so add in buffer to data domain
  xScale.domain([d3.min(data, xValue)-4, d3.max(data, xValue)+4]);
  yScale.domain([d3.min(data, yValue)-4, d3.max(data, yValue)+4]);
// scales w/o extra padding
//  xScale.domain([d3.min(data, xValue), d3.max(data, xValue)]);
//  yScale.domain([d3.min(data, yValue), d3.max(data, yValue)]);
  // 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", -6)
      .style("text-anchor", "end")
      .text("RushingTD");
  // 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("PassingTD");
  // draw dots
  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/> " + d.School + "<br/>" + d.Conf)
               .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 selection = cValue(d);
          console.log(selection);
          svg.selectAll("circle")
              .data(data) 
              .transition()  
              .duration(1000)  
              .each("start", function() {  
                  d3.select(this)  
                      .attr("r", function(d) {
                          if (cValue(d) == selection) {return "10"}
                          else  { return "0" }  
                      })
                  })
              .each("end", function() {  
                  d3.select(this)  
                      .transition()
                      .duration(500)
                      .attr("r", 4);  
              });
    
    
      });
  // draw 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(5," +i * 22 + ")"; });
  // draw legend colored rectangles
  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);
  // draw legend text
  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>
    