knwin/Fund_2015.csv

## Fund_2015.csv

          
            Donor
            Funding_USD
            Funding_USD_M
            Ben

            
              Pakistan
              95742134
              95.74
              663708

            
              United States
              77839789
              77.84
              563966

            
              European Commission
              29216495
              29.22
              463953

            
              United Kingdom
              20551625
              20.55
              129208

            
              Carry-over (donors not specified)
              19125098
              19.13
              235505

            
              Japan
              18873196
              18.87
              82367

            
              Germany
              12709603
              12.71
              457447

            
              Allocation of funds by UN agencies
              11763602
              11.76
              972083

            
              Canada
              9524536
              9.52
              157802

            
              Sweden
              8225569
              8.23
              412601

            
              Australia
              3567439
              3.57
              654607

            
              Central Emergency Response Fund (CERF)
              2794145
              2.79
              145231

            
              Switzerland
              2466675
              2.47
              834319

            
              Norway
              1493279
              1.49
              981674

            
              Various (details not yet provided)
              859757
              0.86
              358152

            
              Allocation of funds by NGOs
              625000
              0.63
              379367

            
              Luxembourg
              544662
              0.54
              690427

            
              Qatar
              247149
              0.25
              344493

            
              Denmark
              163455
              0.16
              944586

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Transition Delays</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.min.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>Fund vs Beneficiaries</h1>

		<p>Total funding per Donor vs number of beneficiaries</p>

		<script type="text/javascript">


			var w = 700;
			var h = 600;
			var padding = [ 20, 10, 50, 150 ];  //Top, right, bottom, left


			var xScale = d3.scale.linear()
								.range([ padding[3], w - padding[1] - padding[3] ]);

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


			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(15);

			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.tickFormat(function(d) {
								return d + " persons";
							});


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


			d3.csv("Fund_2015.csv", function(data) {

				xScale.domain([
					d3.min(data, function(d) {
						return +d.Funding_USD_M;
					}),
					d3.max(data, function(d) {
						return +d.Funding_USD_M;
					})
				]);

				yScale.domain([
					d3.max(data, function(d) {
						return +d.Ben;
					}),
					d3.min(data, function(d) {
						return +d.Ben;
					})
				]);

				var circles = svg.selectAll("circle")
								.data(data)
								.enter()
								.append("circle");

				circles.attr("cx", function(d) {
						return xScale(d.Funding_USD_M);
					})
					.attr("cy", function(d) {
						return yScale(d.Ben);
					})
					.attr("r", 0.1)
					.attr("fill", "steelblue")
					.append("title")
					.text(function(d) {
						return d.Donor + " has funded " + d.Funding_USD_M + " million USD for " + d.Ben + " number of people";
					});

				circles.sort(function(a, b) {
						return d3.ascending(+a.Funding_USD_M, +b.Funding_USD_M);
					})
					.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(2000)
					.attr("r", 4);

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

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

			});


		</script>

	</body>
</html>
Donor	Funding_USD	Funding_USD_M	Ben
Pakistan	95742134	95.74	663708
United States	77839789	77.84	563966
European Commission	29216495	29.22	463953
United Kingdom	20551625	20.55	129208
Carry-over (donors not specified)	19125098	19.13	235505
Japan	18873196	18.87	82367
Germany	12709603	12.71	457447
Allocation of funds by UN agencies	11763602	11.76	972083
Canada	9524536	9.52	157802
Sweden	8225569	8.23	412601
Australia	3567439	3.57	654607
Central Emergency Response Fund (CERF)	2794145	2.79	145231
Switzerland	2466675	2.47	834319
Norway	1493279	1.49	981674
Various (details not yet provided)	859757	0.86	358152
Allocation of funds by NGOs	625000	0.63	379367
Luxembourg	544662	0.54	690427
Qatar	247149	0.25	344493
Denmark	163455	0.16	944586
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Transition Delays</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.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>Fund vs Beneficiaries</h1>

	<p>Total funding per Donor vs number of beneficiaries</p>

	<script type="text/javascript">


	var w = 700;
	var h = 600;
	var padding = [ 20, 10, 50, 150 ]; //Top, right, bottom, left



	var xScale = d3.scale.linear()
	.range([ padding[3], w - padding[1] - padding[3] ]);

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



	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(15);

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.tickFormat(function(d) {
	return d + " persons";
	});



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



	d3.csv("Fund_2015.csv", function(data) {

	xScale.domain([
	d3.min(data, function(d) {
	return +d.Funding_USD_M;
	}),
	d3.max(data, function(d) {
	return +d.Funding_USD_M;
	})
	]);

	yScale.domain([
	d3.max(data, function(d) {
	return +d.Ben;
	}),
	d3.min(data, function(d) {
	return +d.Ben;
	})
	]);

	var circles = svg.selectAll("circle")
	.data(data)
	.enter()
	.append("circle");

	circles.attr("cx", function(d) {
	return xScale(d.Funding_USD_M);
	})
	.attr("cy", function(d) {
	return yScale(d.Ben);
	})
	.attr("r", 0.1)
	.attr("fill", "steelblue")
	.append("title")
	.text(function(d) {
	return d.Donor + " has funded " + d.Funding_USD_M + " million USD for " + d.Ben + " number of people";
	});

	circles.sort(function(a, b) {
	return d3.ascending(+a.Funding_USD_M, +b.Funding_USD_M);
	})
	.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(2000)
	.attr("r", 4);

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

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

	});


	</script>

	</body>
	</html>