UT-Austin Men's Basketball Team Net Rating

forked from harukihill's block: UT-Austin Men's Basketball Team Net Rating

<!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);
      });

</script>
  <h4 align="center"><em>by Andrew Haruki Hill</em></h4>
</body>

https://d3js.org/d3.v4.min.js