jowang0319 · October 12, 2015 03:16
diff --git a/data2.csv b/data2.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <hmtl lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title>Adolescent Fertility Rate</title>
 		<style type="text/css">
 			body{
 				background-color: white;
 				font-family: Helvetica,Arial,sans-serif;
 				width:1020px;
 				margin:auto;
 			}
 			h1 {
 				font-size:40px;
 				margin:0;
 				color: black;
 				margin-left:100px;
 				margin-top:10px;
 				padding-bottom:20px;
 			}
 			p{
 				font-size:15px;
 				margin:10px 0 0 0;
 			}
 			svg{
 				background-color: white;
 			}
 			.axis path,
 			.axis line{
 				fill:none;
 				stroke: black;
 				stroke-width: 1px;
 			}
 			.line{
 				fill:none;
 				
 				stroke-width:1px;
 				stroke-opacity:30%;
 			}
 			.line.unfocused{
 				stroke-opacity:10%;
 			}
 			.line.focused{
 				fill:none;
 				stroke-width:2px;
 				stroke-opacity:80%;
 			}
 			.axis text{
 				font-family: sans-serif;
 				font-size:11px;
 			}
 			.tooltip{
 				position:absolute;
 				z-index:10;
 			}
 			.tooltip p{
 				background-color: white;
 				border:none;
 				padding:3px;
 			}
 			#intro {
 				float:right;
 				margin-right: 100px;
 				margin-top: 150px;
 				width:200px;
 				background-color: rgba(0,153,255,0.2);
 				padding:10px;
 				text-align:justify;
 				border-radius:10px;
 			}
 			#chart {
 				float:left;
 				margin-left:100px;
 			}
 			circle{

 				stroke: lightgrey;
 			}
 		</style>
 	</head>

 	<body>
 		<h1>Adolescent Fertility Rate by Country(‰)</h1>
 		<div id="intro">
 		<p><strong>Introduction: </strong>The adolescent fertility has been an issue worldwide since long, belows shows how it varies from year 1960 to year 2014 by country. Althought the world average rate is declining, most developing areas are still suffering from the issue. Another interesting finding is that many asian countries such as Japan and China have always have the relatively lower rate, whether this is a problem of culture can be discussed further.</p>
 		<p> Different colors represent different regions.</p>
 		<p><strong>Source: </strong><a href="http://data.worldbank.org/">World Bank</a></p>
 	</div>
 		<div id="chart">
 			<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 			<script type="text/javascript">

 			var width = 700;
 			var height = 700;
 			var margin = {top:20, right:0, bottom:40, left:45};

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

 			var xScale = d3.time.scale()
 							.range([margin.left,width-margin.left - margin.right]);
 			var yScale = d3.scale.linear()
 							.range([margin.top, height- margin.bottom]);

 			var colorScale = d3.scale.category10();

 			var xAxis = d3.svg.axis()
 							.scale(xScale)
 							.orient("bottom")
 							.ticks(15)
 							.tickFormat(function(d){
 								return dateFormat(d);
 							})
 							.innerTickSize([0]);
 			var yAxis = d3.svg.axis()
 							.scale(yScale)
 							.orient("left")
 							.innerTickSize([0]);

 			var line = d3.svg.line()
 							.x(function(d){
 								return xScale(dateFormat.parse(d.year));
 							})
 							.y(function(d){
 								return yScale(+d.amount);
 							});

 			var tooltip = d3.select("body")
 							.append("div")
 							.attr("class","tooltip");

 			var svg = d3.select("body")
 							.append("svg")
 							.attr("width",width)
 							.attr("height",height);

 			d3.csv("data2.csv",function(data){
 				var years = ["1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010","2011","2012","2013","2014"]; 

 				var dataSet = [];

 				data.forEach(function(d,i){
 					var fertilityRate = [];

 					years.forEach(function(y){
 						if (d[y]){
 							fertilityRate.push({
 								country: d.country,
 								region: d.Region,
 								year: y,
 								amount:d[y]
 							});
 						}
 					});
 					dataSet.push({
 						country: d.country,
 						region: d.Region,
 						rates: fertilityRate
 					});

 					});

 					//console.log(data);
 				console.log(dataSet);
 					//console.log(dataSet[0]);
 					//console.log(dataSet[0].country);
 					//console.log(dataSet[0].rates);
 					//console.log(dataSet[0].rates.length)
 					//console.log(dataSet[0].rates[dataSet[0].rates.length-1]);
 					//console.log(dataSet[0].rates[dataSet[0].rates.length-1].amount);
 					//console.log((height - (+dataSet[0].rates[dataSet[0].rates.length-1].amount) - margin.top - margin.bottom))


 				xScale.domain(
 					d3.extent(years,function(d){
 						return dateFormat.parse(d);
 					}));
 					yScale.domain([
 					d3.max(dataSet,function(d){
 						return d3.max(d.rates,function(d){
 							return +d.amount;
 						});
 					}),
 					0
 					]);
 				var groups = svg.selectAll("g.lines")
 					.data(dataSet)
 					.enter()
 					.append("g")
 					.attr("class","lines");

 				groups.selectAll("path")
 					.data(function(d){
 						return [d.rates];
 					})
 					.enter()
 					.append("path")
 					.attr("class","line")
 					.attr("d",line);

 				var circles = groups.selectAll("circle")
 								.data(function(d) { 
 											return d.rates; // NOT an array here.
 								})
 								.enter()
 								.append("circle");

 				circles.attr("cx", function(d) {
 						return xScale(dateFormat.parse(d.year));
 					})
 					.attr("cy", function(d) {
 						return yScale(d.amount);
 					})
 					.attr("r", 3)
 					.style("opacity", 0); // this is optional - if you want visible dots or not!

 				circles
 					.on("mouseover", mouseover2Func)
 					.on("mousemove", mousemoveFunc)
 					.on("mouseout",	mouseout2Func);

 				svg.append("g")
 					.attr("class","x axis")
 					.attr("transform","translate(0," + (height - margin.bottom) + ")")
 					.call(xAxis);
 					svg.append("g")
 					.attr("class","y axis")
 					.attr("transform","translate(" + margin.left + ",0)")
 					.call(yAxis);

 				svg.append("text")      
     			    .attr("x", width/2 )
       				.attr("y", height - 10 )
      			 	.style("text-anchor", "middle")
        			.text("Year");

        		svg.append("text")  
        			.attr("y", 0 )    
     			    .attr("x", - height/2)
      			 	.style("text-anchor", "middle")
        			.text("Adolescent Fertility Rate(per 1000 person)")
        			.attr("transform", "rotate(-90)")
        			.attr("dy", "1em");

 				d3.selectAll("g.lines")
 					.on("mouseover",mouseoverFunc)
 					.on("mouseout",mouseoutFunc)
 					.on("mousemove",mousemoveFunc);

 				d3.selectAll("g.lines")
 					.attr("stroke", function(d) { 
 						return colorScale(d.region); 
 					});

 				d3.selectAll("circle")
 					.attr("fill", function(d) { 
 						return colorScale(d.region); 
 					});



 				function mouseoverFunc(d) {
 					d3.selectAll("path.line").classed("unfocused", true);
 					d3.select(this).select("path.line").classed("unfocused", false).classed("focused", true);
 					}

 				function mouseover2Func(d) {
 					d3.selectAll("path.line").classed("unfocused", true);
 					d3.select(this).select("path.line").classed("unfocused", false).classed("focused", true);
 					d3.select(this)
 						.transition()
 						.style("opacity", 0.8)
 						.attr("r", 6);
 					tooltip
 						.style("display", null) 
 						.html("<p>Country: " + d.country +
 							"</br>Region:" + d.region + 
 									"<br>Year: " + d.year +
 								  "<br>Adolescent Fertility Rate: " + d.amount + "‰</p>");
 					}

 				function mouseoutFunc() {
 					d3.selectAll("path.line").classed("unfocused", false).classed("focused", false);
 					tooltip.style("display", "none"); 
 					}

 				function mouseout2Func() {
 					d3.select(this)
 						.transition()
 						.duration(1000)
 						.style("opacity", 0)
 						.attr("r", 3);
 			   		 tooltip.style("display", "none"); 
 					}
 			
 				function mousemoveFunc(d) {
 					tooltip
 						.style("top", (d3.event.pageY - 10) + "px" )
 						.style("left", (d3.event.pageX + 10) + "px");
 						}

 			});

 			</script>

 		</div>
 	</body>
 </html>
	<!DOCTYPE html>
	<hmtl lang="en">
	<head>
	<meta charset="utf-8">
	<title>Adolescent Fertility Rate</title>
	<style type="text/css">
	body{
	background-color: white;
	font-family: Helvetica,Arial,sans-serif;
	width:1020px;
	margin:auto;
	}
	h1 {
	font-size:40px;
	margin:0;
	color: black;
	margin-left:100px;
	margin-top:10px;
	padding-bottom:20px;
	}
	p{
	font-size:15px;
	margin:10px 0 0 0;
	}
	svg{
	background-color: white;
	}
	.axis path,
	.axis line{
	fill:none;
	stroke: black;
	stroke-width: 1px;
	}
	.line{
	fill:none;

	stroke-width:1px;
	stroke-opacity:30%;
	}
	.line.unfocused{
	stroke-opacity:10%;
	}
	.line.focused{
	fill:none;
	stroke-width:2px;
	stroke-opacity:80%;
	}
	.axis text{
	font-family: sans-serif;
	font-size:11px;
	}
	.tooltip{
	position:absolute;
	z-index:10;
	}
	.tooltip p{
	background-color: white;
	border:none;
	padding:3px;
	}
	#intro {
	float:right;
	margin-right: 100px;
	margin-top: 150px;
	width:200px;
	background-color: rgba(0,153,255,0.2);
	padding:10px;
	text-align:justify;
	border-radius:10px;
	}
	#chart {
	float:left;
	margin-left:100px;
	}
	circle{

	stroke: lightgrey;
	}
	</style>
	</head>

	<body>
	<h1>Adolescent Fertility Rate by Country(‰)</h1>
	<div id="intro">
	<p><strong>Introduction: </strong>The adolescent fertility has been an issue worldwide since long, belows shows how it varies from year 1960 to year 2014 by country. Althought the world average rate is declining, most developing areas are still suffering from the issue. Another interesting finding is that many asian countries such as Japan and China have always have the relatively lower rate, whether this is a problem of culture can be discussed further.</p>
	<p> Different colors represent different regions.</p>
	<p><strong>Source: </strong><a href="http://data.worldbank.org/">World Bank</a></p>
	</div>
	<div id="chart">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script type="text/javascript">

	var width = 700;
	var height = 700;
	var margin = {top:20, right:0, bottom:40, left:45};

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

	var xScale = d3.time.scale()
	.range([margin.left,width-margin.left - margin.right]);
	var yScale = d3.scale.linear()
	.range([margin.top, height- margin.bottom]);

	var colorScale = d3.scale.category10();

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(15)
	.tickFormat(function(d){
	return dateFormat(d);
	})
	.innerTickSize([0]);
	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.innerTickSize([0]);

	var line = d3.svg.line()
	.x(function(d){
	return xScale(dateFormat.parse(d.year));
	})
	.y(function(d){
	return yScale(+d.amount);
	});

	var tooltip = d3.select("body")
	.append("div")
	.attr("class","tooltip");

	var svg = d3.select("body")
	.append("svg")
	.attr("width",width)
	.attr("height",height);

	d3.csv("data2.csv",function(data){
	var years = ["1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010","2011","2012","2013","2014"];

	var dataSet = [];

	data.forEach(function(d,i){
	var fertilityRate = [];

	years.forEach(function(y){
	if (d[y]){
	fertilityRate.push({
	country: d.country,
	region: d.Region,
	year: y,
	amount:d[y]
	});
	}
	});
	dataSet.push({
	country: d.country,
	region: d.Region,
	rates: fertilityRate
	});

	});

	//console.log(data);
	console.log(dataSet);
	//console.log(dataSet[0]);
	//console.log(dataSet[0].country);
	//console.log(dataSet[0].rates);
	//console.log(dataSet[0].rates.length)
	//console.log(dataSet[0].rates[dataSet[0].rates.length-1]);
	//console.log(dataSet[0].rates[dataSet[0].rates.length-1].amount);
	//console.log((height - (+dataSet[0].rates[dataSet[0].rates.length-1].amount) - margin.top - margin.bottom))


	xScale.domain(
	d3.extent(years,function(d){
	return dateFormat.parse(d);
	}));
	yScale.domain([
	d3.max(dataSet,function(d){
	return d3.max(d.rates,function(d){
	return +d.amount;
	});
	}),
	0
	]);
	var groups = svg.selectAll("g.lines")
	.data(dataSet)
	.enter()
	.append("g")
	.attr("class","lines");

	groups.selectAll("path")
	.data(function(d){
	return [d.rates];
	})
	.enter()
	.append("path")
	.attr("class","line")
	.attr("d",line);

	var circles = groups.selectAll("circle")
	.data(function(d) {
	return d.rates; // NOT an array here.
	})
	.enter()
	.append("circle");

	circles.attr("cx", function(d) {
	return xScale(dateFormat.parse(d.year));
	})
	.attr("cy", function(d) {
	return yScale(d.amount);
	})
	.attr("r", 3)
	.style("opacity", 0); // this is optional - if you want visible dots or not!

	circles
	.on("mouseover", mouseover2Func)
	.on("mousemove", mousemoveFunc)
	.on("mouseout", mouseout2Func);

	svg.append("g")
	.attr("class","x axis")
	.attr("transform","translate(0," + (height - margin.bottom) + ")")
	.call(xAxis);
	svg.append("g")
	.attr("class","y axis")
	.attr("transform","translate(" + margin.left + ",0)")
	.call(yAxis);

	svg.append("text")
	.attr("x", width/2 )
	.attr("y", height - 10 )
	.style("text-anchor", "middle")
	.text("Year");

	svg.append("text")
	.attr("y", 0 )
	.attr("x", - height/2)
	.style("text-anchor", "middle")
	.text("Adolescent Fertility Rate(per 1000 person)")
	.attr("transform", "rotate(-90)")
	.attr("dy", "1em");

	d3.selectAll("g.lines")
	.on("mouseover",mouseoverFunc)
	.on("mouseout",mouseoutFunc)
	.on("mousemove",mousemoveFunc);

	d3.selectAll("g.lines")
	.attr("stroke", function(d) {
	return colorScale(d.region);
	});

	d3.selectAll("circle")
	.attr("fill", function(d) {
	return colorScale(d.region);
	});



	function mouseoverFunc(d) {
	d3.selectAll("path.line").classed("unfocused", true);
	d3.select(this).select("path.line").classed("unfocused", false).classed("focused", true);
	}

	function mouseover2Func(d) {
	d3.selectAll("path.line").classed("unfocused", true);
	d3.select(this).select("path.line").classed("unfocused", false).classed("focused", true);
	d3.select(this)
	.transition()
	.style("opacity", 0.8)
	.attr("r", 6);
	tooltip
	.style("display", null)
	.html("<p>Country: " + d.country +
	"</br>Region:" + d.region +
	"<br>Year: " + d.year +
	"<br>Adolescent Fertility Rate: " + d.amount + "‰</p>");
	}

	function mouseoutFunc() {
	d3.selectAll("path.line").classed("unfocused", false).classed("focused", false);
	tooltip.style("display", "none");
	}

	function mouseout2Func() {
	d3.select(this)
	.transition()
	.duration(1000)
	.style("opacity", 0)
	.attr("r", 3);
	tooltip.style("display", "none");
	}

	function mousemoveFunc(d) {
	tooltip
	.style("top", (d3.event.pageY - 10) + "px" )
	.style("left", (d3.event.pageX + 10) + "px");
	}

	});

	</script>

	</div>
	</body>
	</html>