Stacked Bump Chart

Remake of Alicia Parlapiano's presidential primary graphic with Basketball Reference's top 25 players.

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

path.player{
	stroke: steelblue;
	stroke-width: 4px;
	fill: none;
}

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

circle{
	stroke-width: 2px;
	stroke: steelblue;
}

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

</style>

players = _.sortBy(players, 'start')
players.forEach(function(d){ d.years = [] })

d3.range(1950, 2016).forEach(function(year){
	var currentHeight = 0
	players.forEach(function(d){
		if (d.start <= year && year <= d.stop){
			d.years.push({year: year, height: ++currentHeight})
			if (d.stop  == year) d.stopHeight  = currentHeight
			if (d.start == year) d.startHeight = currentHeight

}
	})
})

var c = d3.conventions({height: 120})

c.x.domain([1950, 2015])
c.y.domain([0, 10])

c.yAxis.ticks(2)

c.drawAxis()

var line = d3.svg.line()
		.x(ƒ('year', c.x))
		.y(ƒ('height', c.y))

c.svg.dataAppend(players, 'path.player')
		.attr('d', ƒ('years', line))

c.svg.dataAppend(players, 'circle.start')
		.attr({cx: ƒ('stop', c.x), cy: ƒ('stopHeight', c.y)})
		.attr({r: 3, fill: 'white'})

c.svg.dataAppend(players, 'circle.stop')
		.attr({cx: ƒ('start', c.x), cy: ƒ('startHeight', c.y)})
		.attr({r: 3, fill: 'steelblue'})

c.svg.dataAppend(players, 'text.name')
		.attr({x: ƒ('start', c.x), y: ƒ('startHeight', c.y)})
		.text(ƒ('name'))
		.attr({'text-anchor': 'end', 'dy': '.33em', 'dx': '-.5em'})

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

</script>