D3 Examples - UT-Austin Men's Basketball Team Net Rating

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    h1 {
      font-family:"Gill Sans", "Calibri", "sans-serif";
      font-weight: 500;
      font-size: 30;
      font-style: normal;
      line-height: 0.9;
    }
    
    h3 {font-family:sans-serif;
            margin-right: 10px;
            line-height: 0.4;
        font-weight: 400;
    }
    
    body {
      background: #fcfcfc;
    }
    
    text {
      font: "Arial";
    }
    
    div.tooltip {
      position: absolute;
      text-align: center;
      width:115px;
      height: 40px;
      padding: 2px;
      font: 11px sans-serif;
      font-weight: 600;
      background: lightsteelblue;
      border: 0px;
      border-radius: 8px;
      pointer-events: none;
    }
  </style>
</head>
​
<body>
  <header>
            <h1 align="center">University of Texas at Austin 2016-17 Men's Basketball Net Rating by Game</h1>
    </header>
  
  <h3 style="color:#BF5700" align="right";>Home Game</h3>
    <h3 style="color:#0069bf" align="right";>Away Game</h3>
    <h3 style="color:#515151" align="right";>Neutral Game</h3>
  
  <script type="text/javascript">
    var w = 950;
        var h = 500;
        var padding = 20;
        var barPadding = 0;
        var dataset;
​
        var svg = d3.select("body")
                    .append("svg")
                    .attr("height", h)
                    .attr("width", w);
    
    var div = d3.select("body")
                            .append("div")
                            .attr("class", "tooltip")
                            .style("opacity", 0);var div = d3.select("body")
                            .append("div")
                            .attr("class", "tooltip")
                            .style("opacity", 0);
        
    
        d3.csv("Ratings.csv", function(error, data){
            data.forEach(function(d){
                d.game= +d.Game,
                d.opp= d.Opp,
                d.team = +d.Team,
        d.date = d.Date,
        d.full = d.OppFull
            });
​
            dataset = data;
​
            var xScale = d3.scaleLinear()
                            .domain([1, 32])
                            .range([padding, w - padding]);
​
            var yScale = d3.scaleLinear()
                            .domain([-1*d3.max(data, function(d){
                                return d.team;
                            }),d3.max(data,function(d){
                                return d.team;
                            })])
                            .range([-h/2 + padding, h/2 - padding]);
      
​
            var bars = svg.selectAll("rect")
                        .data(dataset)
                        .enter()
                        .append("rect");
​
            bars.attr("x", function(d,i){
                return i*(w/data.length) + barPadding;
            })
                .attr("y", function(d){
                    if ((d.team) > 0){
                        return h/2 - yScale(d.team);
                    } else{
                        return h/2;
                    }
                    
                })
                .attr("height", function(d){
                    if ((yScale(d.team)) > 0){
                        return yScale(d.team);
                    } else {
                        return yScale(d.team)*-1;
                    }
                    
                })
                .attr("width", function(d){
                    return w/data.length;
                })
                .attr("fill", function(d){
                    if (d.opp[0] == "v"){
                        return d3.rgb(191, 87, 0);
                    } else if(d.opp[0] == "n"){
                        return d3.rgb(58,63,66);
                    }
                    else{
                        return d3.rgb(0,105,191);
                    }
                })
        .on("mouseover", function(d){
            div.transition()
            .duration(200)
            .style("opacity", .9);
            div.html("Date: " + d.date +"<br/>"+"Opp: " + d.full + "<br/>" +"UT NetRtg: " + d.team)
            .style("left", (d3.event.pageX) -10 + "px")
            .style("top", (d3.event.pageY-30) + "px");
      })
        .on("mouseout", function(d){
            div.transition()
            .duration(500)
            .style("opacity", 0);
      });
​
            var text = svg.selectAll("text")
                        .data(dataset)
                        .enter()
                        .append("text")
                        .text(function(d){
                            return d.opp.slice(1,d.opp.length);
                        })
                        .attr("x", function(d,i){
                            return i*(w/data.length) + barPadding + (w/data.length)/2;
                        })
                        .attr("y", h/2 - 4)
                        .attr("font-size", function(d){
                            if (d.opp === "@MICH"){
                                return "9px";
                            } else{
                                return "10px";
                            }
                        })
                        .attr("fill", function(d){
                            if ((d.team) < 0 || yScale(d.team < 3)){
                                return "black";
                            } else{
                                return "white";
                            }
                        })
                        .attr("text-anchor", "middle")
                        .attr("font-family", "Arial");
    });
​
  </script>
  <h4 align="center"><em>by Andrew Haruki Hill</em></h4>
</body>
​
    