Built with blockbuilder.org
<!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>