soyeonjeong · April 5, 2018 14:55
diff --git a/games.csv b/games.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <style type="text/css">

 	body {
 		font-family: 'Raleway', sans-serif;
 		font-weight: lighter;
 	}

 	.each-cutoff { 
 		display:inline-block;
 	}

 	.yaxis text { 
 		font-size: 10pt;
 	}

 	.yaxis line { 
 		stroke: lightgrey; 
 	}

 	.xaxis text { 
 		font-size: 10pt;
 	}

 	.yaxis .domain { 
 		display: none; 
 	}

 	svg {
 		overflow: visible;
 	}

 	body { 
 		padding: 50px;
 	}

 	.country {
 		fill: none;
 		stroke: seagreen;
 		stroke-width: 3;
 	}

 	.font { 
 		font: 15px sans-serif;
 	}

 	line { 
 		fill: none;
 		stroke:lightgrey;
 		stroke-width:1;
 	}

 	path { 
 		fill: none;
 /*		stroke:grey;
 */		stroke-width:1;
 	}

 	.us {
 		stroke: purple;
 		fill: none;
 		stroke-width: 3;
 	}

 	button { 
 		background-color: grey;
 		border: none;
    	color: white;
    	padding: 15px 32px;
    	text-align: center;
    	text-decoration: none;
    	display: inline-block;
 /*    	border-radius: 5%;
 */    }

 	div { 
 		width: 50%; 
 	}

 	h2 { 
 		font-weight: lighter; 
 	}

 	h4 { 
 		font-weight: lighter; 
 	}
 }

 </style>

 <body>

 	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

 </body>

 <script src="https://d3js.org/d3.v4.min.js"></script>

 <script>

 	var body = d3.select("body");

 	var margin = {top: 20, right: 40, bottom: 20, left: 10};

    var height = 600 - margin.top - margin.bottom;
    var width = 1000 - margin.left - margin.right;

 	d3.csv("games.csv", ready);

 	function ready(data) {

 		//data work
 		var parseTime = d3.timeParse("%Y-%m-%d");

 		data.forEach(function(d) {
    		d.time = parseTime(d.date_str2);
    		d.pct = +d.pct;
    		d.combofield = d.league + "-" + d.division;
    	});

    	dataByCombofield = d3.nest()
    	  .key(function(d) { return d.combofield})
    	  .key(function(d) { return d.team; })
    	  .entries(data)

    	var alCentral = dataByCombofield.filter(function(d) { 
    		return d.key === "AL-central"
    	})

    	//Make axes
    	var minDate = new Date(2015, 2, 1)
    	var maxDate = new Date(2015, 10, 31)

  		var x = d3.scaleTime()
  			.domain([minDate, maxDate])
  			.range([0, width])

 		var y = d3.scaleLinear()
 			.domain([0, 1])
 			.range([height, 0]);	

 		var body = d3.select("body");

 		body.append("h2")
 			.text("Baseball Team Winning Percentages from 2015")

 		var svg = body.append("svg")
 			.attr("width", width + margin.left + margin.right)
 			.attr("height", height + margin.top + margin.bottom + 30)
 			//create margins so that content doesn't leave the svg width & height
 			.append ("g")
 				.attr("transform", "translate(" + (margin.right) + "," + margin.top + ")")

 		//d3 axes creation
 		var xaxis = d3.axisBottom(x)
 			.tickSize(0)
 			.tickPadding(10)

    	var yaxis = d3.axisLeft(y)
    		.tickSize(width)

    	svg.append("g")
    		.attr("class", "xaxis")
    		.call(xaxis)
    		.attr("transform", "translate(0," + height + ")")

    	svg.append("g")
    		.attr("class", "yaxis ")
    		.call(yaxis)
    		.attr("stroke-dasharray", "2.2")    		
    		.attr("transform", "translate(" + width + ", 0)");

    	//create lines    	
    	var generateLine = d3.line()
   			.curve(d3.curveNatural )
    		.x(function(d) { return x(d.time); })
    		.y(function(d) { return y(d.pct); });

 		var teamGroup = svg.selectAll(".team-group")
 			.data(alCentral[0].values)
 			.enter()
 			.append("g")
 			.attr("class", "team-group")

 		var colors = ["red", "blue", "orange", "purple", "green"]

 		teamGroup.append("path")
    		.attr("d", function(d) { return generateLine(d.values)}) 
    		.attr("class", "team-path")
 			.attr("stroke", function(d, i) {
 				return colors[i];
 			})

    	teamGroup.append("text")
    		.text(function(d) { return d.key; })
    		.attr("x", width-210)
    		.attr("y", function(d){ 
    			var last = d.values[d.values.length-1];
    			return y(last.pct)})
    		.attr("font-size", 10)
    		.attr("class", "team-text")


 		var uniq = d3.set(data.map(function(d) { return d.combofield; })).values();
 		// console.log(uniq)

 		body.append("h4")
 			.text("Division and League:")

    	body.selectAll("allButtons")
    		.data(uniq)
    		.enter()
    		.append("button")
    		.text (function(d) { return d })
    		.on("click", updateData)

 		function updateData(combofieldName){ 
    		var userData = dataByCombofield.filter(function(d) { 
    			return d.key === combofieldName;
    		});
    		var innerData = userData[0].values;
    		console.log(innerData)

    		var tg = teamGroup
    			.data(innerData);

    		//children elements don't get the data-join until they are selected
    		tg.select(".team-path")
    		    .transition().duration(500)
    			.attr("d", function(d) { return generateLine(d.values); })
    			
    		tg.select(".team-text")
    		    .transition().duration(500)
    			.text(function(d) { return d.key; })
        		.attr("x", width-210)
    			.attr("y", function(d) { 
    				var last = d.values[d.values.length-1];
    				return y(last.pct)
    			});
    	}
  	}


 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style type="text/css">

	body {
	font-family: 'Raleway', sans-serif;
	font-weight: lighter;
	}

	.each-cutoff {
	display:inline-block;
	}

	.yaxis text {
	font-size: 10pt;
	}

	.yaxis line {
	stroke: lightgrey;
	}

	.xaxis text {
	font-size: 10pt;
	}

	.yaxis .domain {
	display: none;
	}

	svg {
	overflow: visible;
	}

	body {
	padding: 50px;
	}

	.country {
	fill: none;
	stroke: seagreen;
	stroke-width: 3;
	}

	.font {
	font: 15px sans-serif;
	}

	line {
	fill: none;
	stroke:lightgrey;
	stroke-width:1;
	}

	path {
	fill: none;
	/* stroke:grey;
	*/ stroke-width:1;
	}

	.us {
	stroke: purple;
	fill: none;
	stroke-width: 3;
	}

	button {
	background-color: grey;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	/* border-radius: 5%;
	*/ }

	div {
	width: 50%;
	}

	h2 {
	font-weight: lighter;
	}

	h4 {
	font-weight: lighter;
	}
	}

	</style>

	<body>

	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

	</body>

	<script src="https://d3js.org/d3.v4.min.js"></script>

	<script>

	var body = d3.select("body");

	var margin = {top: 20, right: 40, bottom: 20, left: 10};

	var height = 600 - margin.top - margin.bottom;
	var width = 1000 - margin.left - margin.right;

	d3.csv("games.csv", ready);

	function ready(data) {

	//data work
	var parseTime = d3.timeParse("%Y-%m-%d");

	data.forEach(function(d) {
	d.time = parseTime(d.date_str2);
	d.pct = +d.pct;
	d.combofield = d.league + "-" + d.division;
	});

	dataByCombofield = d3.nest()
	.key(function(d) { return d.combofield})
	.key(function(d) { return d.team; })
	.entries(data)

	var alCentral = dataByCombofield.filter(function(d) {
	return d.key === "AL-central"
	})

	//Make axes
	var minDate = new Date(2015, 2, 1)
	var maxDate = new Date(2015, 10, 31)

	var x = d3.scaleTime()
	.domain([minDate, maxDate])
	.range([0, width])

	var y = d3.scaleLinear()
	.domain([0, 1])
	.range([height, 0]);

	var body = d3.select("body");

	body.append("h2")
	.text("Baseball Team Winning Percentages from 2015")

	var svg = body.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom + 30)
	//create margins so that content doesn't leave the svg width & height
	.append ("g")
	.attr("transform", "translate(" + (margin.right) + "," + margin.top + ")")

	//d3 axes creation
	var xaxis = d3.axisBottom(x)
	.tickSize(0)
	.tickPadding(10)

	var yaxis = d3.axisLeft(y)
	.tickSize(width)

	svg.append("g")
	.attr("class", "xaxis")
	.call(xaxis)
	.attr("transform", "translate(0," + height + ")")

	svg.append("g")
	.attr("class", "yaxis ")
	.call(yaxis)
	.attr("stroke-dasharray", "2.2")
	.attr("transform", "translate(" + width + ", 0)");

	//create lines
	var generateLine = d3.line()
	.curve(d3.curveNatural )
	.x(function(d) { return x(d.time); })
	.y(function(d) { return y(d.pct); });

	var teamGroup = svg.selectAll(".team-group")
	.data(alCentral[0].values)
	.enter()
	.append("g")
	.attr("class", "team-group")

	var colors = ["red", "blue", "orange", "purple", "green"]

	teamGroup.append("path")
	.attr("d", function(d) { return generateLine(d.values)})
	.attr("class", "team-path")
	.attr("stroke", function(d, i) {
	return colors[i];
	})

	teamGroup.append("text")
	.text(function(d) { return d.key; })
	.attr("x", width-210)
	.attr("y", function(d){
	var last = d.values[d.values.length-1];
	return y(last.pct)})
	.attr("font-size", 10)
	.attr("class", "team-text")


	var uniq = d3.set(data.map(function(d) { return d.combofield; })).values();
	// console.log(uniq)

	body.append("h4")
	.text("Division and League:")

	body.selectAll("allButtons")
	.data(uniq)
	.enter()
	.append("button")
	.text (function(d) { return d })
	.on("click", updateData)

	function updateData(combofieldName){
	var userData = dataByCombofield.filter(function(d) {
	return d.key === combofieldName;
	});
	var innerData = userData[0].values;
	console.log(innerData)

	var tg = teamGroup
	.data(innerData);

	//children elements don't get the data-join until they are selected
	tg.select(".team-path")
	.transition().duration(500)
	.attr("d", function(d) { return generateLine(d.values); })

	tg.select(".team-text")
	.transition().duration(500)
	.text(function(d) { return d.key; })
	.attr("x", width-210)
	.attr("y", function(d) {
	var last = d.values[d.values.length-1];
	return y(last.pct)
	});
	}
	}


	</script>