swingley/index.html Secret

## index.html
<!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>

## teams-ranked.json
{
  "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]
}
	<!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]
	}