Crazy Rhythms History by MikeCostelloe

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Crazy Rhythms History</title>
		<script src="//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