Skip to content

Instantly share code, notes, and snippets.

@swingley
Created January 22, 2016 18:05
Show Gist options
  • Save swingley/b5fb2cdf5532581c26b0 to your computer and use it in GitHub Desktop.
Save swingley/b5fb2cdf5532581c26b0 to your computer and use it in GitHub Desktop.
Chart of Yahoo Pick'em standings over the regular NFL season.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
margin: 0 auto;
width: 960px;
}
h1 {
margin-bottom: 0;
text-align: center;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
cursor: pointer;
fill: none;
stroke: #9E9E9E;
stroke-width: 1.5px;
}
.line.selected {
stroke-width: 4px;
}
div.team-name-container {
height: 100px;
margin-left: 25px;
}
div.team-name {
border: 2px solid #000;
border-radius: 6px;
cursor: pointer;
display: inline-block;
font-size: 130%;
margin: 0.5em;
padding: 0.5em;
}
div.team-name.selected {
border-width: 4px;
color: #fff;
font-weight: bold;
}
</style>
<body>
<h1>Spread Pick 'em 2015: Regular Season Rankings</h1>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
// https://gist.github.com/trtg/3922684
d3.selection.prototype.moveToFront = function() {
return this.each(function(){
this.parentNode.appendChild(this);
});
};
var margin = {top: 20, right: 50, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.tickFormat(function(d) { return 'Week ' + d; });
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
var yAxisRight = d3.svg.axis()
.scale(y)
.orient('right');
var line = d3.svg.line()
.interpolate('monotone')
.x(function(d, i) { return x(i+1); })
.y(function(d) { return y(d); });
var colors = d3.scale.category20();
var svg = d3.select('body').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
d3.json('teams-ranked.json', function(error, data) {
if (error) { throw error; }
var teamNames = Object.keys(data);
var teamData = teamNames.map(function(t, i) {
return { name: t, values: data[t], index: i };
});
x.domain(d3.extent(d3.range(1, teamData[0].values.length + 1)));
y.domain([teamNames.length + 0.5, 1]);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)
d3.select('svg').append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + (width + margin.left) + ',' + margin.top + ')')
.call(yAxisRight);
var ranks = svg.append('g').selectAll('.line')
.data(teamData)
.enter()
.append('path')
.attr('class', 'line')
.attr('d', function(d) { return line(d.values); })
.attr('data-team', function(d) { return d.name; })
.attr('data-team-index', function(d, i) { return i; })
.style({
stroke: function(d, i) { return colors(i); }
})
.on('click', function(e) {
removeSelection();
var selector = 'div[data-team-index=\'' + e.index + '\']';
d3.select(this).classed('selected', true).moveToFront();
d3.select(selector).classed('selected', true);
});
var teams = teamData.map(function(d, i) {
return {
name: d.name.toLowerCase(),
display: d.name,
index: i,
color: colors(i)
};
});
teams.sort(function(a, b) {
if ( a.name < b.name ) { return -1 };
if ( a.name > b.name ) { return 1 };
return 0;
});
var legend = d3.select('body').append('div')
.attr('class', 'team-name-container');
legend.selectAll('.team-name')
.data(teams)
.enter()
.append('div')
.attr('class', 'team-name')
.attr('data-team-index', function(d) { return d.index; })
.style({
color: function(d) { return d.color; },
'border-color': function(d) { return d.color; }
})
.text(function(d) { return d.display; })
.on('click', function(e) {
removeSelection();
var selector = 'path[data-team-index=\'' + e.index + '\']';
d3.select(this).classed('selected', true);
d3.select(selector).classed('selected', true).moveToFront();
});
function removeSelection() {
d3.select('.team-name.selected').classed('selected', false);
d3.select('.line.selected').classed('selected', false);
}
});
</script>
{
"DJ DB'S (DEFLATED BALLS)": [1, 1, 6, 9, 10, 10, 11, 10, 11, 11, 11, 13, 13, 13, 13, 13, 13],
"Quest For Six": [2, 2, 7, 3, 4, 3, 2, 3, 2, 2, 2, 2, 1, 2, 3, 3, 1],
"FreeAldonSmith": [3, 3, 9, 5, 7, 8, 8, 8, 8, 6, 6, 8, 8, 7, 12, 12, 12],
"CJT": [4, 4, 4, 4, 5, 5, 5, 7, 7, 8, 7, 6, 6, 6, 6, 6, 6],
"Jared from Subway": [5, 5, 1, 2, 2, 4, 4, 4, 4, 5, 4, 4, 4, 5, 4, 4, 5],
"Mexican Domination": [6, 6, 3, 7, 11, 11, 10, 9, 9, 9, 9, 11, 12, 10, 7, 7, 7],
"Here Come the Irish": [7, 7, 2, 6, 8, 9, 9, 11, 10, 10, 10, 12, 10, 12, 9, 9, 9],
"Chicken Dinner": [8, 8, 12, 12, 13, 13, 13, 13, 13, 12, 13, 9, 9, 9, 8, 8, 10],
"WATER IS JUST FISH AIR": [9, 9, 5, 1, 1, 2, 3, 2, 3, 3, 3, 3, 2, 3, 2, 1, 3],
"Kap Nip": [10, 10, 8, 10, 6, 6, 7, 5, 5, 4, 5, 5, 5, 4, 5, 5, 4],
"Gambletron 2000": [11, 11, 10, 8, 3, 1, 1, 1, 1, 1, 1, 1, 3, 1, 1, 2, 2],
"Pants Party": [12, 12, 13, 13, 12, 12, 12, 12, 12, 13, 12, 10, 11, 11, 10, 11, 11],
"Haynekering": [13, 13, 11, 11, 9, 7, 6, 6, 6, 7, 8, 7, 7, 8, 11, 10, 8]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment