block by jeremycflin 51cf751069ec716fdc5acc13defb52c4

UT-Austin Men's Basketball Team Net Rating

Full Screen

Built with blockbuilder.org

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

index.html

<!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>

Ratings.csv

Game,Win,Opp,OppFull,Date,Team,Jones,Davis,Young,Banks,Allen,Yancy,Roach,Isom,Cleare
1,1,vUIW,Incarnate Word,11-Nov,6,-6,8,39,-23,23,9,,,-27
2,1,vULM, ULM,14-Nov,31,46,7,13,4,3,81,50,,22
3,1,vEWU,E. Washington,17-Nov,45,60,37,-74,69,29,107,80,,44
4,0,nNU,Northwestern,21-Nov,-28,-9,-17,-9,116,-69,-47,-40,,-61
5,0,nCU,Colorado,22-Nov,-22,25,-41,-122,,6,-65,-15,,-16
6,0,vUTA,Texas-Arlington,29-Nov,-15,-6,-84,-32,-35,3,-45,-17,,-53
7,1,vBAMA,Alabama,2-Dec,3,5,9,39,34,-2,115,2,,26
8,0,@MICH,Michigan,6-Dec,-5,-1,-38,-28,-4,-10,132,-32,,25
9,1,vLBSU,Long Beach St.,10-Dec,9,-19,48,-1,-95,-31,-1,-7,,31
10,0,@ARK,Arkansas,17-Dec,-4,46,-108,-100,6,-4,-65,-22,,51
11,1,vUAB,UAB,21-Dec,49,53,37,-10,-52,97,96,95,,77
12,0,vKENT,Kent St.,27-Dec,-7,-11,-60,-6,-50,21,-83,57,,4
13,0,@KSU,Kansas St.,30-Dec,-4,-14,-28,22,-10,20,-65,-16,,-1
14,1,vOSU,Oklahoma St.,4-Jan,4,-24,36,-64,-86,-23,,52,,5
15,0,@ISU,Iowa St.,7-Jan,-12,13,-47,-47,-108,-42,,38,,-22
16,0,vTCU,TCU,11-Jan,-4,8,-9,-55,-8,24,,-29,,-1
17,0,vWVU,WVU (10),14-Jan,-3,-1,-41,-18,-61,69,,-12,-114,9
18,0,@BU,Baylor (6),17-Jan,-14,24,-30,-49,-98,24,-90,-29,-118,2
19,0,@KU,Kansas (2),21-Jan,-16,35,-9,-117,-59,3,26,-71,-120,-27
20,1,vOU,Oklahoma,23-Jan,1,75,58,-114,-44,-48,-16,-9,-112,39
21,0,@GA,Georgia,28-Jan,-3,10,12,-49,61,-50,-46,-1,,14
22,1,vTTU,Texas Tech,1-Feb,6,8,35,-7,-47,28,-29,-13,-60,-37
23,0,@TCU,TCU,4-Feb,-24,-34,-54,-89,83,12,-20,20,,-30
24,1,vISU,Iowa St.,7-Feb,3,-10,-5,-66,-22,31,1,-23,195,29
25,0,@OSU,Oklahoma St.,11-Feb,-18,-20,-45,-74,52,-13,-50,15,193,-59
26,0,@OU,Oklahoma,14-Feb,-6,-33,-62,20,90,-13,79,-3,-117,49
27,0,vKSU,Kansas St.,18-Feb,-5,-9,-56,-90,81,27,38,-31,31,12
28,0,@WVU,WVU (12),20-Feb,-22,-3,-41,-49,-44,-4,-50,-16,-127,-28
29,0,vKU,Kansas (3),25-Feb,-14,-12,-38,22,-102,29,-103,-26,-19,-25
30,0,@TTU,Texas Tech,1-Mar,-16,-66,-105,-6,-119,-14,16,-13,-115,47
31,0,vBU,Baylor (11),4-Mar,-16,-11,-110,-24,-27,7,-24,-69,-68,14
32,1,nTTU,Texas Tech,8-Mar,15,23,-94,-68,19,12,89,12,34,117
33,0,nWVU,WVU (11),9-Mar,-15,15,-54,-86,115,-15,-27,-13,-16,-68