MikeCostelloe/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Crazy Rhythms History</title>
		<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
		<style type="text/css">
			body {
			  font: 10px sans-serif;
			}
			.axis {
			  font: 10px sans-serif;
			  fill: #a0a0a0;
			}
			.axis path,
			.axis line {
			  fill: none;
			  stroke: #a0a0a0;
			  shape-rendering: crispEdges;
			}
			.x.axis path {
			  display: none;
			}
			.line {
			  fill: none;
			  stroke-width: 2px;
			}
			#tooltip {
			  font: 14px sans-serif;
			}

		</style>
	</head>
	<body>
		<div id="container">
				<script type="text/javascript">
				//Javascript here

				//Conventional Margins start
				var margin = {top: 30, right: 160, bottom: 30, left: 40};
					width = 1000 - margin.left - margin.right,
					height = 500 - margin.top - margin.bottom;

				var svg = d3.select("#container").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 + ")");
				//Conventional Margins end

				var parseDate = d3.time.format("%Y").parse;

				//Scales
				var x = d3.time.scale()
					.range([0, width]);

				var y = d3.scale.linear()
					.range([height, 0]);

				//Color
				var color = d3.scale.category10();

				//Axes
				var xAxis = d3.svg.axis()
					.scale(x)
					.orient('bottom')
					.ticks(5);

				var yAxis = d3.svg.axis()
					.scale(y)
					.orient('left');

				//Lines
				var line = d3.svg.line()
					.x(function(d) { return x(d.Year); })
					.y(function(d) { return y(d.Record); });

				//Converts to 3-digit decimal
				var converted = d3.format(".3r");

				//Data load and two console logs, before and after the data.map
				d3.csv('../winPercentage.csv', function(error, data) {

					//Check it.
					console.log(data)

					//Splits into 10 colors by owner
					color.domain(d3.keys(data[0]).filter(function(key) { return key !== 'Year'; }));

					data.forEach(function(d) {
						d.Year = parseDate(d.Year);
					  });

				var owners = color.domain().map(function(name) {
					return {
						name: name,
						values: data.map(function(d) {
							return {Year: d.Year, Record: +d[name]};
							})
						};
					});

				//Check it.
				console.log(owners);

				//x-Domain corresponds to Years
				x.domain(d3.extent(data, function(d) {return d.Year; }));

				//y-Domain to min/max of winPct's
				y.domain([
					d3.min(owners, function(c) { return d3.min(c.values, function(v) { return v.Record; }); }),
					d3.max(owners, function(c) { return d3.max(c.values, function(v) { return v.Record; }); })
				])

				svg.append('g')
					.attr('class', 'x axis')
					.attr('transform', 'translate(0,' + height + ')')
					.call(xAxis)

				svg.append('g')
					.attr("class", "y axis")
					.call(yAxis)
    				.append("text")
      				.attr("transform", "rotate(-90)")
      				.attr("y", 6)
      				.attr("dy", ".71em")
      				.style("text-anchor", "end")
      				.text("Win Percentage");

      			//Selects .owner class (none exist at first) and creates them as needed
      			var owner = svg.selectAll('.owner')
      				.data(owners)
      				.enter().append('g')
      				.attr('class', 'owner');

      			//Assigns each owner a line and a unique color for it
      			owner.append('path')
      				.attr('class', 'line')
      				.attr('d', function(d) { return line(d.values); })
      				.style('stroke', function(d) { return color(d.name); });

				//Adds a circle to each data node
      			owner.append('g').selectAll('circle')
      				.data(function(d) {return d.values; })
      				.enter().append('circle')
      				.attr('r', 6)
      				.attr('cx', function(c) { return x(c.Year); })
      				.attr('cy', function(c) { return y(c.Record); })
      				.attr('fill', function(d) { return color(this.parentNode.__data__.name); })
      				.on('mouseover', function(d) {
      					var xTip = parseFloat(d3.select(this).attr('cx'));
      					var yTip = parseFloat(d3.select(this).attr('cy'));

      					svg.append('text')
      						.attr('id', 'tooltip')
							.attr('x', xTip + 5)
							.attr('y', yTip - 10)
							.attr('fill', 'black')
							.text(converted(d.Record));
						})

					.on('mouseout', function() {
      					d3.select('#tooltip').remove()
      				});

      			//Adds the names at the end
      			owner.append("text")
					.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
					.attr("transform", function(d) { return "translate(" + x(d.value.Year) + "," + y(d.value.Record) + ")"; })
					.attr('class', 'labels')
					.attr("x", 5)
					.attr("dy", 15)
					.attr('fill', function(d) { return color(this.parentNode.__data__.name); })
					.text(function(d) { return d.name; });

				});
				</script>
		</div>
	</body>
</html>

## winPercentage.csv

          
            Year
            Lee D.
            Andrew D.
            Brad R.
            Mike M.
            Sam R.
            Garrett T.
            Peter R.
            Bryan C.
            Mike C.
            Christopher M.

            
              2009
              0.595170454545
              0.548295454545
              0.538352272727
              0.5625
              0.494318181818
              0.431818181818
              0.515625
              0.428977272727
              0.492897727273
              0.392045454545

            
              2010
              0.563988095238
              0.525297619048
              0.379464285714
              0.52380952381
              0.52380952381
              0.671130952381
              0.5
              0.35119047619
              0.53125
              0.43005952381

            
              2011
              0.616666666667
              0.40625
              0.541666666667
              0.5
              0.364583333333
              0.514583333333
              0.575
              0.53125
              0.520833333333
              0.429166666667

            
              2012
              0.575
              0.622916666667
              0.429166666667
              0.660416666667
              0.354166666667
              0.333333333333
              0.495833333333
              0.466666666667
              0.564583333333
              0.497916666667

            
              2013
              0.551587301587
              0.646825396825
              0.507936507937
              0.521825396825
              0.424603174603
              0.553571428571
              0.426587301587
              0.438492063492
              0.559523809524
              0.369047619048
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Crazy Rhythms History</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">
	body {
	font: 10px sans-serif;
	}
	.axis {
	font: 10px sans-serif;
	fill: #a0a0a0;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #a0a0a0;
	shape-rendering: crispEdges;
	}
	.x.axis path {
	display: none;
	}
	.line {
	fill: none;
	stroke-width: 2px;
	}
	#tooltip {
	font: 14px sans-serif;
	}

	</style>
	</head>
	<body>
	<div id="container">
	<script type="text/javascript">
	//Javascript here

	//Conventional Margins start
	var margin = {top: 30, right: 160, bottom: 30, left: 40};
	width = 1000 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var svg = d3.select("#container").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 + ")");
	//Conventional Margins end

	var parseDate = d3.time.format("%Y").parse;

	//Scales
	var x = d3.time.scale()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	//Color
	var color = d3.scale.category10();

	//Axes
	var xAxis = d3.svg.axis()
	.scale(x)
	.orient('bottom')
	.ticks(5);

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient('left');

	//Lines
	var line = d3.svg.line()
	.x(function(d) { return x(d.Year); })
	.y(function(d) { return y(d.Record); });

	//Converts to 3-digit decimal
	var converted = d3.format(".3r");

	//Data load and two console logs, before and after the data.map
	d3.csv('../winPercentage.csv', function(error, data) {

	//Check it.
	console.log(data)

	//Splits into 10 colors by owner
	color.domain(d3.keys(data[0]).filter(function(key) { return key !== 'Year'; }));

	data.forEach(function(d) {
	d.Year = parseDate(d.Year);
	});

	var owners = color.domain().map(function(name) {
	return {
	name: name,
	values: data.map(function(d) {
	return {Year: d.Year, Record: +d[name]};
	})
	};
	});

	//Check it.
	console.log(owners);

	//x-Domain corresponds to Years
	x.domain(d3.extent(data, function(d) {return d.Year; }));

	//y-Domain to min/max of winPct's
	y.domain([
	d3.min(owners, function(c) { return d3.min(c.values, function(v) { return v.Record; }); }),
	d3.max(owners, function(c) { return d3.max(c.values, function(v) { return v.Record; }); })
	])

	svg.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0,' + height + ')')
	.call(xAxis)

	svg.append('g')
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Win Percentage");

	//Selects .owner class (none exist at first) and creates them as needed
	var owner = svg.selectAll('.owner')
	.data(owners)
	.enter().append('g')
	.attr('class', 'owner');

	//Assigns each owner a line and a unique color for it
	owner.append('path')
	.attr('class', 'line')
	.attr('d', function(d) { return line(d.values); })
	.style('stroke', function(d) { return color(d.name); });

	//Adds a circle to each data node
	owner.append('g').selectAll('circle')
	.data(function(d) {return d.values; })
	.enter().append('circle')
	.attr('r', 6)
	.attr('cx', function(c) { return x(c.Year); })
	.attr('cy', function(c) { return y(c.Record); })
	.attr('fill', function(d) { return color(this.parentNode.__data__.name); })
	.on('mouseover', function(d) {
	var xTip = parseFloat(d3.select(this).attr('cx'));
	var yTip = parseFloat(d3.select(this).attr('cy'));

	svg.append('text')
	.attr('id', 'tooltip')
	.attr('x', xTip + 5)
	.attr('y', yTip - 10)
	.attr('fill', 'black')
	.text(converted(d.Record));
	})

	.on('mouseout', function() {
	d3.select('#tooltip').remove()
	});

	//Adds the names at the end
	owner.append("text")
	.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
	.attr("transform", function(d) { return "translate(" + x(d.value.Year) + "," + y(d.value.Record) + ")"; })
	.attr('class', 'labels')
	.attr("x", 5)
	.attr("dy", 15)
	.attr('fill', function(d) { return color(this.parentNode.__data__.name); })
	.text(function(d) { return d.name; });

	});
	</script>
	</div>
	</body>
	</html>
Year	Lee D.	Andrew D.	Brad R.	Mike M.	Sam R.	Garrett T.	Peter R.	Bryan C.	Mike C.	Christopher M.
2009	0.595170454545	0.548295454545	0.538352272727	0.5625	0.494318181818	0.431818181818	0.515625	0.428977272727	0.492897727273	0.392045454545
2010	0.563988095238	0.525297619048	0.379464285714	0.52380952381	0.52380952381	0.671130952381	0.5	0.35119047619	0.53125	0.43005952381
2011	0.616666666667	0.40625	0.541666666667	0.5	0.364583333333	0.514583333333	0.575	0.53125	0.520833333333	0.429166666667
2012	0.575	0.622916666667	0.429166666667	0.660416666667	0.354166666667	0.333333333333	0.495833333333	0.466666666667	0.564583333333	0.497916666667
2013	0.551587301587	0.646825396825	0.507936507937	0.521825396825	0.424603174603	0.553571428571	0.426587301587	0.438492063492	0.559523809524	0.369047619048