Classic Cubs by 1wheel

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<style>
body{
	margin: 0px;
	font: 10px monospace;
	font-weight: bold;
}

path.team{
	stroke: black;
	stroke-width: 2px;
	fill: none;
}


path.domain{
	display: none;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.y.axis line{
	display: none;
}


.x-line, .y-line{
	stroke: black;
	stroke: lightgrey;
  shape-rendering: crispEdges;
}
.y-line{
	stroke-width: 1.5px;
}


.name{
	text-shadow: 0 2px 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, -2px 0 0 #fff;
	fill: black;
}


</style>

<body></body>

<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>


<script>

d3.csv('raw.csv', function(res){
	data = res

	var parseTime = d3.time.format('%Y%m%d').parse
	var parseXtime = d3.time.format('%x').parse

	teams = _.uniq(data.map(ƒ('hTeam'))).map(function(d){
		return {id: d, games: []}
	})

	idToTeam = d3.nest().key(ƒ('id')).rollup(ƒ(0)).map(teams)

	data.forEach(function(d){
		var date = parseTime(d.date)
		var hWon = +d.hScore > +d.vScore

		idToTeam[d.hTeam].games.push({date: date, won: hWon})
		idToTeam[d.vTeam].games.push({date: date, won: !hWon})
	})

	teams.forEach(function(team){
		team.games.forEach(function(d, i){
			d.wins = d.won + (i ? team.games[i - 1].wins : 0)
			d.percent = d.wins/(i + 1)
		})

		team.percent = _.last(team.games).percent
	})

	nlTeams = teams.filter(function(d){ return _.contains(['PIT', 'CHI', 'NYG', 'CIN', 'PHI', 'BRO', 'STIL', 'BSN'], d.id) })
	
	c = d3.conventions({height: 500, margin: {left: 40, top: 100, bottom: 10, right: 10}})

	c.svg.append('defs')
		.append('clipPath')
			.attr('id', 'rect-clip')
		.append('rect')
			.attr({width: c.width, height: c.height})

	c.x = d3.time.scale().range(c.x.range()).domain(['04/21/1909', '10/14/1909'].map(parseXtime))
	c.y.domain([.2, .3, .7, .8])
			.range([c.height, c.height*9/10, c.height*1/10, 0])

	c.xAxis = d3.svg.axis()
			.scale(c.x)
			.tickValues(d3.time.wednesdays(c.x.domain()[0], c.x.domain()[1]))
			.orient('top')
			.tickFormat(function(d){ return d3.time.format('%B %d')(d).replace('August', 'Aug.').replace('September', 'Sept.').replace('October', 'Oct.') })
			.tickSize(c.margin.top)
	c.yAxis
			.tickValues([200, 250, 300, 325, 350, 375, 400, 425, 450, 475, 500, 525, 550, 575, 600, 625, 650, 675, 700, 750, 800].map(function(d){ return d/1000 }))
			.tickFormat(function(d){ return d*1000 })

	c.drawAxis()

	d3.select('.x.axis').translate([0,0])
		.selectAll('text')
			.attr({'y': -2, 'x': 5, 'text-anchor': 'start'})
			.attr('transform', 'rotate(-90)')
			.style({'text-anchor': 'start'})

	//grid lines
	c.svg.dataAppend(d3.time.days(c.x.domain()[0], c.x.domain()[1]), 'path.x-line')
			.attr('d', function(d){ return ['M', c.x(d), '0v', c.height].join(' ') })

	c.svg.dataAppend(c.yAxis.tickValues().filter(function(d, i){ return (1 + i) % 2 }), 'path.y-line')
			.attr('d', function(d){ return ['M0,', c.y(d), 'h', c.x(parseXtime('10/13/1909'))].join(' ') })


	line = d3.svg.line()
			.x(ƒ('date', c.x))
			.y(ƒ('percent', c.y))

	c.svg.dataAppend(nlTeams, 'path.team')
			.attr('d', ƒ('games', line))
			.attr('clip-path', 'url(#rect-clip)')
			.attr('id', ƒ('id'))
			.style('opacity', .3)

	c.svg.dataAppend(nlTeams, 'text.team')
			.attr('clip-path', 'url(#rect-clip)')
		.append('textPath')
			.attr('xlink:href', function(d){ return '#' + d.id })
			.text(function(d, i){ return _.repeat(' ' + d.id + ' ', 200) })
			.attr('rotate', function(){ 
				var rotate = "";
				for(var i = 0; i < this.getNumberOfChars(); i++){
				  rotate += this.getRotationOfChar(i) + " ";
				}
				// return rotate;
			})
			.attr('dy', '.33em')


	d3.select(self.frameElement).style("height", d3.select('svg').attr('height') + "px");
})




</script>