knwin/Total_Humanitarian_Funding_per_Donor_in_2015.csv

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Adding Labels</title>
		<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
		<style type="text/css">

			body {
				background-color: #ddddff;
			}

			svg {
				background-color: white;
			}

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

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

		</style>
	</head>
	<body>
<h1>Total Humanitarian Fuding per Donor in Pakistan - 2015</h1>
<p>units - Million USD</p>
		<script type="text/javascript">


			var w = 500;
			var h = 400;
			var padding = [ 20, 10, 20, 100 ];  //Top, right, bottom, left


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

			var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);


			var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom");

			var yAxis = d3.svg.axis()
							.scale(heightScale)
							.orient("left");


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


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


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

				heightScale.domain(data.map(function(d) { return d.Donor; } ));

				var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");

				rects.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.Donor);
					})
					.attr("width", function(d) {
						return widthScale(d.Funding_USD_M);
					})
					.attr("height", heightScale.rangeBand())
					.append("title")
					.text(function(d) {
						return d.Donor + "' has funded: " + d.Funding_USD_M;
					});

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

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

			});


		</script>

	</body>
</html>

## Total_Humanitarian_Funding_per_Donor_in_2015.csv

          
            Donor
            Funding_USD
            Funding_USD_M

            
              Pakistan
              95742134
              95.74

            
              United States
              77839789
              77.84

            
              European Commission
              29216495
              29.22

            
              United Kingdom
              20551625
              20.55

            
              Carry-over (donors not specified)
              19125098
              19.13

            
              Japan
              18873196
              18.87

            
              Germany
              12709603
              12.71

            
              Allocation of funds by UN agencies
              11763602
              11.76

            
              Canada
              9524536
              9.52

            
              Sweden
              8225569
              8.23

            
              Australia
              3567439
              3.57

            
              Central Emergency Response Fund (CERF)
              2794145
              2.79

            
              Switzerland
              2466675
              2.47

            
              Norway
              1493279
              1.49

            
              Various (details not yet provided)
              859757
              0.86

            
              Allocation of funds by NGOs
              625000
              0.63

            
              Luxembourg
              544662
              0.54

            
              Qatar
              247149
              0.25

            
              Denmark
              163455
              0.16
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Adding Labels</title>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<style type="text/css">

	body {
	background-color: #ddddff;
	}

	svg {
	background-color: white;
	}

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

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

	</style>
	</head>
	<body>
	<h1>Total Humanitarian Fuding per Donor in Pakistan - 2015</h1>
	<p>units - Million USD</p>
	<script type="text/javascript">


	var w = 500;
	var h = 400;
	var padding = [ 20, 10, 20, 100 ]; //Top, right, bottom, left



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

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);



	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");



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



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



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

	heightScale.domain(data.map(function(d) { return d.Donor; } ));

	var rects = svg.selectAll("rect")
	.data(data)
	.enter()
	.append("rect");

	rects.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.Donor);
	})
	.attr("width", function(d) {
	return widthScale(d.Funding_USD_M);
	})
	.attr("height", heightScale.rangeBand())
	.append("title")
	.text(function(d) {
	return d.Donor + "' has funded: " + d.Funding_USD_M;
	});

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

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

	});


	</script>

	</body>
	</html>
Donor	Funding_USD	Funding_USD_M
Pakistan	95742134	95.74
United States	77839789	77.84
European Commission	29216495	29.22
United Kingdom	20551625	20.55
Carry-over (donors not specified)	19125098	19.13
Japan	18873196	18.87
Germany	12709603	12.71
Allocation of funds by UN agencies	11763602	11.76
Canada	9524536	9.52
Sweden	8225569	8.23
Australia	3567439	3.57
Central Emergency Response Fund (CERF)	2794145	2.79
Switzerland	2466675	2.47
Norway	1493279	1.49
Various (details not yet provided)	859757	0.86
Allocation of funds by NGOs	625000	0.63
Luxembourg	544662	0.54
Qatar	247149	0.25
Denmark	163455	0.16