Skip to content

Instantly share code, notes, and snippets.

@1wheel

1wheel/index.html

Last active October 31, 2016 17:58
Show Gist options
  • Save 1wheel/f1f27a57dd8f400b3ab7 to your computer and use it in GitHub Desktop.
Save 1wheel/f1f27a57dd8f400b3ab7 to your computer and use it in GitHub Desktop.
Download ZIP
Stacked Bump Chart
Raw
readme.md
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
margin: 0px;
font: 10px sans-serif;
}
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>
<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>
var players = [
{name: 'Kareem', start: 1970, stop: 1989},
{name: 'Jordan', start: 1985, stop: 2003},
{name: 'Russell', start: 1957, stop: 1969},
{name: 'Wilt', start: 1959, stop: 1969},
{name: 'Kobe', start: 1997, stop: 2015},
{name: 'Duncan', start: 1998, stop: 2015},
{name: 'Shaq', start: 1993, stop: 2011},
{name: 'Cousy', start: 1951, stop: 1963},
{name: 'Garnett', start: 1995, stop: 2015},
{name: 'West', start: 1961, stop: 1974},
{name: 'Magic', start: 1980, stop: 1996},
{name: 'K. Malone', start: 1986, stop: 2004},
{name: 'LeBron', start: 2004, stop: 2015},
{name: 'Olajuwon', start: 1985, stop: 2002},
{name: 'Bird', start: 1980, stop: 1982},
{name: 'Hayes', start: 1969, stop: 1984},
{name: 'Robertson', start: 1975, stop: 1995},
{name: 'M. Malone', start: 1975, stop: 1995},
{name: 'Schayes', start: 1950, stop: 1964},
{name: 'Dirk', start: 1999, stop: 2015},
{name: 'Stockton', start: 1961, stop: 1974},
{name: 'Pettit', start: 1955, stop: 1965},
{name: 'Isiah', start: 1982, stop: 1994},
]
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment