D3 Examples - cs 724 final chart

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<h2>Does a great defense make a superbowl winning quarterback appear greater then they are?</h2>
<style>
​
.rectangle {
    fill: blue;
}
​
.rectangle:hover {
    fill: orange;
}
.axis {
  font: 14px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
</style>
</head>
<body>
<div id="drop" align=center></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
​
var margin = {top: 50, right: 45, bottom: 95, left: 45},
    width = 1000 - margin.left - margin.right,
    height = 475 - margin.top - margin.bottom;
​
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 + ")");
​
d3.tsv("mergedqb.txt", function(error, data){
​
    // Get every column value
    var elements = Object.keys(data[0])
        .filter(function(d){
            return ((d != "SuperBowlWinningQb") & (d != "SuperBowlD")&(d !="Year") );});
    var selection = elements[0];
​
    var y = d3.scale.linear()
            .domain([0, d3.max(data, function(d){
                return +d[selection];
            })])
            .range([0,height]);
    var y1 = d3.scale.linear()
            .domain([0, d3.max(data, function(d){
                return +d[selection];
            })])
            .range([height,0]);
    var x = d3.scale.ordinal()
            .domain(data.map(function(d){ return d.Year;}))
            .rangeBands([0,width ]);
            
​
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
​
    var yAxis = d3.svg.axis()
        .scale(y1)
        .orient("left");
​
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")
        .style("font-size", "10px")
        .style("text-anchor", "end")
        .attr("dx", "-0.920000000000002em")
        .attr("dy", "-.60em")
        .attr("transform", "rotate(-90)" );
​
​
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);
​
    svg.selectAll("rectangle")
        .data(data)
        .enter()
        .append("rect")
        .attr("class","rectangle")
        .attr("width", width/data.length)
        .attr("height", function(d){
            return height+2 - y1(+d[selection]);
        })
        .attr("x", function(d, i){
            return (width / data.length) * i ;
        })
​
        .attr("y", function(d){
            return y1(+d[selection]);
        })
        .append("title")
        .text(function(d){
                    return d.Year+ " "+  d.SuperBowlWinningQb+" "+ d[selection];
        });
​
    var selector = d3.select("#drop")
        .append("select")
        .attr("id","dropdown")
        .on("change", function(d){
            selection = document.getElementById("dropdown");
                    if (this.value === "RegularSeasonQbRating"){
            y1.domain([0, d3.max(data, function(d){
                return +d[selection.value];})]);
​
            yAxis.scale(y1);
                    
            d3.selectAll(".rectangle")
                .transition()
                .attr("height", function(d){
                    return height - y1(+d[selection.value]);
                })
                .attr("x", function(d, i){
                    return (width / data.length) * i ;
                })
                .attr("y", function(d){
                    return y1(+d[selection.value]);
                })
         .style("fill", function(d) {  if (d.QBRank == "1")  {return "red"}
                                else if (d.QBRank =="2")  {return "red"}
                                else if (d.QBRank =="3") {return "red"} 
                                else if (d.QBRank =="4") {return "red"}  
                                else if (d.QBRank =="5") {return "red"}})
                .ease("linear")
                .select("title")
                .text(function(d){
                    return d.Year+ " "+ d.SuperBowlWinningQb+ " "+ d[selection.value];
                });
      
            d3.selectAll("g.y.axis")
                .transition()
                .call(yAxis);}
          else if(this.value === "QBRank"){
            y.domain([1, d3.max(data, function(d){
                return +d[selection.value];})]);
​
            yAxis.scale(y);
                    
            d3.selectAll(".rectangle")
                .transition()
                .attr("height", function(d){
                    return height - y(+d[selection.value]);
                })
                .attr("x", function(d, i){
                    return (width / data.length) * i ;
                })
                .attr("y", function(d){
                    return y(+d[selection.value]);
                })
          .style("fill", function(d) {   
                                                             if (d.QBRank =="1") {return "red"}  
                                else if (d.QBRank =="2") {return "red"} 
                                else if (d.QBRank =="3") {return "red"} 
                                else if (d.QBRank =="4") {return "red"} 
                                else if (d.QBRank =="5") {return "red"}})
                .ease("linear")
                .select("title")
                .text(function(d){
                {return d.Year+ " "+ d.SuperBowlWinningQb+ " "+ d[selection.value];}
                });
      
            d3.selectAll("g.y.axis")
                .transition()
                .call(yAxis);}
            else {
            y.domain([0, d3.max(data, function(d){
                return +d[selection.value];})]);
​
            yAxis.scale(y);
                    
            d3.selectAll(".rectangle")
                .transition()
                .attr("height", function(d){
                    return height - y(+d[selection.value]);
                })
                .attr("x", function(d, i){
                    return (width / data.length) * i ;
                })
                .attr("y", function(d){
                    return y(+d[selection.value]);
                })
         .style("fill", function(d) {  if (d.DRank == "1")  {return "red"}
                                else if (d.DRank =="2")  {return "red"}
                                else if (d.DRank =="3") {return "red"} 
                                else if (d.DRank =="4") {return "red"}  
                                else if (d.DRank =="5") {return "red"}})
                .ease("linear")
                .select("title")
                .text(function(d){
                    return d.Year+ " "+ d.SuperBowlD+ " "+ d[selection.value];
                });
  svg.append("text")
    .attr("class", "label")
    .attr("x", 175-margin.left)       // set x position of label
    .attr("y", 16-margin.top/2)
    .style("text-anchor", "middle")
    .text ("18 Defenses ranked in the top 5 vs only 4 Quarterbacks")
    .style('fill', "Black")
            d3.selectAll("g.y.axis")
                .transition()
                .call(yAxis);}});
​
    selector.selectAll("option")
      .data(elements)
      .enter().append("option")
      .attr("value", function(d){
        return d;
      })
      .text(function(d){
        return d;
      })
   
//input color legend to chart
  // y-axis label
  svg.append("text")
    .attr("class", "label")
    .attr("x", 65-margin.left)       // set x position of label
    .attr("y", 0-margin.top/2)          // set y position of label
    .style("text-anchor", "start")  // left-justify
    .text ("= Ranked in the Top 5")
    .style('fill', "Black")
​
​
  svg.append("text")
    .attr("class", "label")
    .attr("x", 0-margin.left)       // set x position of label
    .attr("y", 0-margin.top/2)          // set y position of label
    .style("text-anchor", "start")  // left-justify
    .text ("Red Bars")
    .style('fill', "Red")
});
​
</script>
</body>
    