pfloh/Refugees_time_AsylumSeekers.csv

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Refugees and Asylumseekers worldwide (1998 - 2014)</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
		<style type="text/css">

			body {
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-size: 24px;
				margin: 0;
			}

			p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}

			svg {
				background-color: white;
			}

			circle:hover {
				fill: orange;
			}

			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

		</style>
	</head>
	<body>

		<h1>Refugees and Asylumseekers worldwide (1998 - 2014)</h1>

		<p>Absolute <strong style="color: rgb(255,102,0);">refugee</strong> and <strong style="color: rgb(80,112,255);">asylumseeker</strong> (pending cases) numbers worldwide, 1997-2014. Source: <a href="http://unhcr.org/54aa91d89.html">UNHCR</a>, 2014</p>

		<script type="text/javascript">


			//Dimensions and padding
			var w = 700;
			var h = 600;
			//var padding = [ 20, 10, 50, 100 ];  //Top, right, bottom, left
			var margin = {top: 20, right: 10, bottom: 50, left: 100},


    		width = w - margin.left - margin.right,
    		height = h - margin.top - margin.bottom;

			//Set up date formatting and years
			var dateFormat = d3.time.format("%Y");


			//Set up scales
			var xScale = d3.time.scale()
								.range([ margin.left, w - margin.right - margin.left ]);
								//.range([ padding[3], w - padding[1] - padding[3] ]);

			var yScale = d3.scale.linear()
								//.range([ padding[0], h - padding[2] ]);
								.range([ margin.top, h - margin.bottom ]);


			//Configure axis generators
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(20)
							.tickFormat(function(d) {
								return dateFormat(d);
							});

			var yAxis = d3.svg.axis()
							.scale(yScale)
							.ticks(20)
							.orient("left");


			//Configure line generator
			var line = d3.svg.line()
				.x(function(d) {
					return xScale(dateFormat.parse(d.Endyear));
				})
				.y(function(d) {
					return yScale(d.people);
				});


			//Create the empty SVG image
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h);


			//Load Refugee data
			d3.csv("Refugees_time_Refugees.csv", function(refugeeData) {

				//Load Asylumseeker data
				d3.csv("Refugees_time_AsylumSeekers.csv", function(asylumData) {

					//Create a new array that contains both the
					//data, merged into one
					var mergedData = refugeeData.concat(asylumData);
					//console.log(mergedData);

					//Use the newly merged data to determine the
					//min and max values, for setting scale domains
					xScale.domain([
						d3.min(mergedData, function(d) {
							return dateFormat.parse(d.Endyear);
						}),
						d3.max(mergedData, function(d) {
							return dateFormat.parse(d.Endyear);
						})
					]);

					yScale.domain([
						d3.max(mergedData, function(d) {
							return +d.people;
						}),
						0
					]);


					//Lines
					//
					// Note data is wrapped in another array, so all its
					// values are bound to a single element (the line!)
					//
					svg.data([ refugeeData ])
						.append("path")
						.attr("class", "line usa")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke", "rgb(255,102,0)")
						.attr("stroke-width", 2);

					svg.data([ asylumData ])
						.append("path")
						.attr("class", "line china")
						.attr("d", line)
						.attr("fill", "none")
						.attr("stroke", "rgb(80,112,255)")
						.attr("stroke-width", 2);


					//Axes
					svg.append("g")
						.attr("class", "x axis")
						.attr("transform", "translate(0," + (h - margin.bottom) + ")")
						//.attr("transform", "translate(0," + (h - padding[2]) + ")")
						.call(xAxis);

					svg.append("g")
						.attr("class", "y axis")
						//.attr("transform", "translate(" + (padding[3]) + ",0)")
						.attr("transform", "translate(" + (margin.left) + ",0)")
						.call(yAxis);


					svg.append("text")
				        .attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom + 8) + ")")
				        .style("text-anchor", "middle")
				        //.attr("stroke", "red")
				        .attr("dx", "2em")
				        .text("Year (end of)");


					    // Add the text label for the Y axis
				    svg.append("text")
				        .attr("transform", "rotate(-90)")
				        .attr("y", 0 - margin.left)
				        .attr("x",0 - (height / 2))
				        .attr("dy", "7.5em")
				        .style("text-anchor", "middle")
				        //.attr("stroke", "red")
				        .text("Number of asylumseeker / refugees");


				});
				//End Asylumseeker data load function

			});
			//End Refugee data load function


		</script>

	</body>
</html>

## Refugees_time_AsylumSeekers.csv

          
            Endyear
            people

            
              1997
              1028200

            
              1998
              977800

            
              1999
              1027400

            
              2000
              1087500

            
              2001
              1072700

            
              2002
              1093500

            
              2003
              997600

            
              2004
              885200

            
              2005
              802100

            
              2006
              743900

            
              2007
              740100

            
              2008
              825800

            
              2009
              983900

            
              2010
              837500

            
              2011
              895300

            
              2012
              942800

            
              2013
              1164400

            
              2014
              1796200

## Refugees_time_Refugees.csv

          
            Endyear
            people

            
              1997
              12015400

            
              1998
              11480900

            
              1999
              11687200

            
              2000
              12129600

            
              2001
              12116800

            
              2002
              10594100

            
              2003
              9592800

            
              2004
              9574800

            
              2005
              8662000

            
              2006
              9877700

            
              2007
              11391000

            
              2008
              10489800

            
              2009
              10396500

            
              2010
              10549700

            
              2011
              10404800

            
              2012
              10498000

            
              2013
              11699300

            
              2014
              14380100
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Refugees and Asylumseekers worldwide (1998 - 2014)</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
	<style type="text/css">

	body {
	background-color: white;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	font-size: 24px;
	margin: 0;
	}

	p {
	font-size: 14px;
	margin: 10px 0 0 0;
	}

	svg {
	background-color: white;
	}

	circle:hover {
	fill: orange;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}

	</style>
	</head>
	<body>

	<h1>Refugees and Asylumseekers worldwide (1998 - 2014)</h1>

	<p>Absolute <strong style="color: rgb(255,102,0);">refugee</strong> and <strong style="color: rgb(80,112,255);">asylumseeker</strong> (pending cases) numbers worldwide, 1997-2014. Source: <a href="http://unhcr.org/54aa91d89.html">UNHCR</a>, 2014</p>

	<script type="text/javascript">


	//Dimensions and padding
	var w = 700;
	var h = 600;
	//var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left
	var margin = {top: 20, right: 10, bottom: 50, left: 100},


	width = w - margin.left - margin.right,
	height = h - margin.top - margin.bottom;

	//Set up date formatting and years
	var dateFormat = d3.time.format("%Y");



	//Set up scales
	var xScale = d3.time.scale()
	.range([ margin.left, w - margin.right - margin.left ]);
	//.range([ padding[3], w - padding[1] - padding[3] ]);

	var yScale = d3.scale.linear()
	//.range([ padding[0], h - padding[2] ]);
	.range([ margin.top, h - margin.bottom ]);



	//Configure axis generators
	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(20)
	.tickFormat(function(d) {
	return dateFormat(d);
	});

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.ticks(20)
	.orient("left");



	//Configure line generator
	var line = d3.svg.line()
	.x(function(d) {
	return xScale(dateFormat.parse(d.Endyear));
	})
	.y(function(d) {
	return yScale(d.people);
	});



	//Create the empty SVG image
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);



	//Load Refugee data
	d3.csv("Refugees_time_Refugees.csv", function(refugeeData) {

	//Load Asylumseeker data
	d3.csv("Refugees_time_AsylumSeekers.csv", function(asylumData) {

	//Create a new array that contains both the
	//data, merged into one
	var mergedData = refugeeData.concat(asylumData);
	//console.log(mergedData);

	//Use the newly merged data to determine the
	//min and max values, for setting scale domains
	xScale.domain([
	d3.min(mergedData, function(d) {
	return dateFormat.parse(d.Endyear);
	}),
	d3.max(mergedData, function(d) {
	return dateFormat.parse(d.Endyear);
	})
	]);

	yScale.domain([
	d3.max(mergedData, function(d) {
	return +d.people;
	}),
	0
	]);



	//Lines
	//
	// Note data is wrapped in another array, so all its
	// values are bound to a single element (the line!)
	//
	svg.data([ refugeeData ])
	.append("path")
	.attr("class", "line usa")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "rgb(255,102,0)")
	.attr("stroke-width", 2);

	svg.data([ asylumData ])
	.append("path")
	.attr("class", "line china")
	.attr("d", line)
	.attr("fill", "none")
	.attr("stroke", "rgb(80,112,255)")
	.attr("stroke-width", 2);


	//Axes
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + (h - margin.bottom) + ")")
	//.attr("transform", "translate(0," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	//.attr("transform", "translate(" + (padding[3]) + ",0)")
	.attr("transform", "translate(" + (margin.left) + ",0)")
	.call(yAxis);


	svg.append("text")
	.attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom + 8) + ")")
	.style("text-anchor", "middle")
	//.attr("stroke", "red")
	.attr("dx", "2em")
	.text("Year (end of)");


	// Add the text label for the Y axis
	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 0 - margin.left)
	.attr("x",0 - (height / 2))
	.attr("dy", "7.5em")
	.style("text-anchor", "middle")
	//.attr("stroke", "red")
	.text("Number of asylumseeker / refugees");


	});
	//End Asylumseeker data load function

	});
	//End Refugee data load function


	</script>

	</body>
	</html>
	Endyear	people
	1997	1028200
	1998	977800
	1999	1027400
	2000	1087500
	2001	1072700
	2002	1093500
	2003	997600
	2004	885200
	2005	802100
	2006	743900
	2007	740100
	2008	825800
	2009	983900
	2010	837500
	2011	895300
	2012	942800
	2013	1164400
	2014	1796200