2016 MLB Division Races

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg text {
    	font-size: 12px;
      font-family: Helvetica, Arial, sans-serif;
    }
    
    .axis .domain {
      fill: none;
      stroke: #333;
    }
    .axis line {
      shape-rendering: crispEdges;
      stroke: #999;
    }
    .division path {
      fill: none;
      stroke: steelblue;
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var width = 960,
        margin = {top: 20, right: 120, bottom: 20, left: 40},
        divHeight = 300,
        innerWidth = width - margin.right - margin.left,
        innerHeight = divHeight - margin.top - margin.bottom,
        divMargin = 120;
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", (divHeight + divMargin) * 6)
    	.style('background', '#EEE');

d3.csv('all.csv')
    	.row(function(d) {
      	var datum = {
          team: d.team,
          opponent: d.opponent,
      		dt: new Date(d.dt + ', 2016'),
          innings: +d.extra_innings || 9,
          game_num: +d.gm_num,
          runs: +d.r,
          runs_against: +d.ra,
          div_rank: +d.rank,
          games_back: d.gb === 'Tied' ? 0 : +d.gb,
          wins: +d.wl.split('-')[0],
          losses: +d.wl.split('-')[1]
    		};
      	datum.games_above = datum.wins - datum.losses;
				datum.wl_pct = datum.wins / (datum.wins + datum.losses);
        return datum;
    	})
			.get(function(err, data) {
      	var teams = d3.nest()
        	.key(function(d) { return d.team; })
        	.sortValues(function(a,b) { return a.game_num - b.game_num; })
        	.entries(data);
      	var divisions = [
        	{
            name: 'AL East',
            teams: ['BOS', 'BAL', 'TOR', 'NYY', 'TBR'],
            teamNames: ['Boston Red Sox', 'Baltimore Orioles', 'Toronto Blue Jays', 'New York Yankees', 'Tampa Bay Rays']
          },
          {
            name: 'AL Central',
            teams: ['CLE', 'DET', 'KCR', 'CHW', 'MIN'],
            teamNames: ['Cleveland Indians', 'Detroit Tigers', 'Kansas City Royals', 'Chicago White Sox', 'Minnesota Twins']
          }
        ];
      	divisions.forEach(function(div) {
        	div.teamData = div.teams.map(function(tm) {
            return teams.filter(function(_tm) { return _tm.key === tm; })[0]; })
        });
      
      	var x = d3.scale.linear()
        	.domain([0, 162])
        	.range([0, innerWidth]);
      	var y = d3.scale.linear()
        	.domain([-30,30])
        	.range([innerHeight, 0]);
      	var xAxis = d3.svg.axis()
        	.orient('bottom')
        	.scale(x)
        	.tickValues([81,162]);
      	var yAxis = d3.svg.axis()
        	.orient('left')
        	.ticks(5)
        	.scale(y);
      	var line = d3.svg.line()
        	// .interpolate('cardinal')
        	.x(function(d) { return x(d.game_num); })
        	.y(function(d) { return y(d.games_above); });
      
    		var divisionSel = svg.selectAll('g.division').data(divisions);
      	var divisionEnter = divisionSel.enter().append('g')
          .attr('class', 'division')
        	.attr('transform', function(d,ndx) {
            return 'translate('+margin.left+','+(((divHeight + divMargin) * ndx) + margin.top)+')'; });
      	divisionEnter.append('g')
        	.attr('class', 'y axis')
        	.call(yAxis);
      	divisionEnter.append('g')
        	.attr('class', 'x axis')
        	.attr('transform', 'translate(0,'+y(0)+')')
        	.call(xAxis);
      	divisionEnter.selectAll('path.team')
          .data(function(div) { return div.teamData; }).enter()
        	.append('path')
        		.attr('class', 'team')
        		.attr('d', function(d) { return line(d.values); });
      	console.log(teams, divisions);
    	});
  </script>
</body>

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