US Military Aid, 1970 - 2012

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Where does US military aid go?</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
                
				margin: 0;
				background-color: #ccb1b1;
				font-family: Helvetica, Arial, sans-serif;
/*                padding-top:10px;
                padding-left:20px;
*/			}

#container {
				width: 1000px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 20px;
				padding: 20px;
				background-color: white;
				box-shadow: 3px 3px 5px 6px #ccb1b1;
			}

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

p {
				font-size: 16px;
				margin: 10px 0 0 0;
			}
            
            ul {
                font-size: 14px;
            }
            
            li {
                font-size: 12px;
            }

svg {
				background-color: #eaeaea;
                line-height: normal;
			}

circle:hover {
				fill: orange;
			}
			
            circle {
                fill: none;
                stroke: #5c5c5c;
                stroke-opacity: 0.9;
                r: 1;
            }
            
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
                stroke-width: 1px;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
                opacity: 0.7;
			}
			.legend text {
				fill: #575757;
			}
            
            #main {
                position: absolute;
                width: 350px;
                height: 600px;      
                float:left;
            }
            
            #chart {
                width: 1000px;
                height: 500px;
                position:relative;
                right: -400px;
                top: 10px;
            }
            
            #notes {
                width:auto;
                height:auto;
                position:relative;
                top:100px;
            }
                
		</style>
	</head>
	<body>
    <div id="container">
		<h1>Misdirected military aid?</h1>

<p>Since 1970, the US has provided close to <b>half a trillion USD in military aid</b> to a large number of countries.<br></p>
            <p>While of 50% of it went to authoritarian or hybrid regimes over the complete period, based on the 2014 Democracy Index, this figure is higher for recent years.  In 2012, 78% of US military aid went to governments with little regard for democratic norms and personal liberty.<br> <br>
                </p>
		<svg class="chart"></svg>
		<p><i>Constant 2011 USD</i>
			<ul> Sources:
                    <li><a href="https://explorer.usaid.gov/prepared/us_foreign_aid_complete.csv">US Government</a>, 2012</li>
                    <li><a href="https://en.wikipedia.org/wiki/Democracy_Index">The 2014 Democracy Index by the Economist Intelligence Unit.</a> 
            </ul>
		</p>
	</div>       
		<script type="text/javascript">

//govt_colors = d3.scale.category10();
			govt_colors = d3.scale.ordinal()
								.domain(["Full democracy","Flawed democracy","Hybrid regime","Authoritarian regime"])
								.range(["blue","purple","orange","red"])
			
			var margin = {top: 80, right: 20, bottom: 50, left: 60},
			width = 1000 - margin.left - margin.right,
			height = 450 - margin.top - margin.bottom;
			
			//Set up stack method
			var stack = d3.layout.stack()
							.values(function(d) {
								return d.military_aid;
							});
										
			//Set up scales
			var xScale = d3.scale.ordinal()
				.rangeRoundBands([0, width], 0.05);
		
			var yScale = d3.scale.linear()
				.range([0, height]);
						
			var chart = d3.select(".chart")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)
			  .append("g")
				.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
			
			var dataset = [];

d3.csv("us_foreign_assistance_yearly.csv", function(data) {
				
				dataset = create_dataset(data);
				//console.log(dataset);
				
				stack(dataset);

//Set up scales
				var xScale = d3.scale.ordinal()
					//.domain(d3.range(dataset[0].military_aid.length))
					.domain(dataset[0].military_aid.map(function(d) {return d.x;}))
					.rangeRoundBands([0, width], 0.05);
		
				var yScale = d3.scale.linear()
						.domain([0,				
							d3.max(dataset, function(d) {
								//console.log(d);
								return d3.max(d.military_aid, function(d) {
									return d.y0 + d.y;
								});
							})
						])
						.range([0, height]);

var yScale = d3.scale.linear()
						.domain([0,25])
						.range([height,0]);

// Transition the different categories			
				d3.selectAll("rect.Authoritarian")
					.transition().delay(function(d,i) {return i*10;})
					.duration(1000)
					.attr("y",function(d) {return  yScale(d.y0) + yScale(d.y)- height ;})
					.attr("height", function(d) {return height - yScale(d.y); });
				d3.selectAll("rect.Hybrid")
					.transition().delay(function(d,i) {return 1000+i*10;})
					.duration(1000)
					.attr("width",xScale.rangeBand())
					.attr("y",function(d) {return  yScale(d.y0) + yScale(d.y)- height ;})
					.attr("height", function(d) {return height - yScale(d.y); });
				d3.selectAll("rect.Flawed")
					.transition()
					.delay(function(d,i) {return 2000+i*10;})
					.duration(1000)
					.attr("width",xScale.rangeBand())
					.attr("y",function(d) {return  yScale(d.y0) + yScale(d.y)- height ;})
					.attr("height", function(d) {return height - yScale(d.y); });				
				d3.selectAll("rect.Full")
					.transition()
					.delay(function(d,i) {return 3000+i*10;})
					.duration(1000)
					.attr("width",xScale.rangeBand())
					.attr("y",function(d) {return  yScale(d.y0) + yScale(d.y)- height ;})
					.attr("height", function(d) {return height - yScale(d.y); });

chart.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + height + ")")
					.call(xAxis)
  				  .selectAll("text")
					.attr("y",0)
					.attr("x",-10)
					.attr("dy","0.35em")
					.attr("transform","rotate(-90)")
					.style("text-anchor","end");

chart.append("g")
					.attr("class", "y axis")
					.call(yAxis)
					.append("text")
					.attr("transform", "translate(-50,100) rotate(-90)")
					.attr("y", 6)
					.attr("dy", ".71em")
					.style("text-anchor", "end")
				 	.style("font-size","12px")
				 	.style("font-weight","bold")
					.text("Military Aid in USD (Billions)");

chart.append("text")
					.text("Type of Govt.")
					.attr("x",width - 100)
					.attr("y",-40)
					.attr("font-size","12px")
					.attr("font-weight","bold")
					.attr("text-anchor","start")
					.attr("fill","#777777");
				
				var legend = chart.selectAll(".legend")
				  	.data(govt_colors.domain())
					.enter().append("g")
					.attr("class", "legend")
					.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
				
				legend.append("rect")
					.attr("x", width - 25)
					.attr("y",-30)
					.attr("width", 18)
					.attr("height", 18)
					.style("fill", function(d) { return govt_colors(d)});
				
				legend.append("text")
					.attr("x", width - 30)
					.attr("y", 9-30)
					.attr("dy", ".35em")
					.style("text-anchor", "end")
					.attr("font-size","12px")
					.text(function(d) {return d; });
				
				
					
			});
			
			// Function to arrange the data
			
			function create_dataset(data) {
				var arranged_data = [];
				
				data_length = data.length;
				dataset = d3.nest()
						.key(function(d) {
							return d.govt_category
						})
						.key(function(d) {
							return d.year
						})
						.rollup(function(d) {
							return d3.sum(d,function(e) {
								return +e.military_aid;
							})
						})
						.entries(data);
							
				dataset.forEach(function(d,k) {
					index= 0;
					//console.log(d);
					switch(d.key) {
							case "Authoritarian regime":
								index = 0;
								break;
							case "Hybrid regime":
								index = 1;
								break;
							case "Flawed democracy":
								index = 2;
								break;
							case "Full democracy":
								index = 3;
								break;
							case "No Data":
								index = 4;
								break;
					};
					//console.log(index);	
					t1 = d.values;
					temp = [];
					t1.forEach(function(e,i) { 
						temp[i] = {govt_type: d.key, x: e.key, y: +e.values/1000000000}
					});
					//console.log(d)
					arranged_data[index] = {govt_type:d.key, military_aid:temp};	
				});
				
				return arranged_data.slice(0,4);
			}

</script>
	</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js