US Aid by Year (1970 - 2012, Constant 2011 USD)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>US Aid - 2012</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <script type= "text/javascript" src="https://d3js.org/queue.v1.min.js"></script>
		<style type="text/css">
			
			body {
                
				background-color: white;
				font-family: Helvetica, Arial, sans-serif;
                padding-top:10px;
                padding-left:20px;
			}

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: white;
			}*/
            
            svg {
				background-color: rgb(253, 248, 245);
                line-height: normal;
			}

circle:hover {
				fill: orange;
			}
			
            circle {
                fill: #6f5858;
                stroke: #999999;
                stroke-opacity: 0.8;
                r: 4;
            }
            
			.axis path,
			.axis line {
				fill: none;
				stroke: #6a6a6a;
                opacity: 0.7;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
                opacity: 0.7;
			}
            
            path {
				stroke: gray;
				stroke-width: 1;
                stroke-opacity: 0.9;
			}

g.gray path {
				stroke: gray;
				stroke-width: 1;
                stroke-opacity: 0.4;
            }
            
            g.blue path {
				stroke: blue;
				stroke-width: 2;
                stroke-opacity: 0.5;
            }
            
            g.pink path {
				stroke: pink;
				stroke-width: 2;
                stroke-opacity: 0.5;
            }
            
            #main {
                position: absolute;
                width: 350px;
                height: 600px;      
                float:left;
            }
            
            #viz {
                width: 600px;
                height: 500px;
                position:relative;
                right: -400px;
                top: 10px;
            }
            
            #notes {
                width:auto;
                height:auto;
                position:relative;
                top:10px;
            }
                
		</style>
	</head>
	<body>
        <div id="main">
		<h1>Where does US Aid go?</h1>

<p>The US is the largest provider of foreign aid, disbursing over one trillion USD from 1970 till 2012, to specific countries<br>
            <strong>Where did the money go?</strong>
                <ul> Sources:
                    <li><a href="https://eads.usaid.gov/gbk/data/prepared.cfm">US Government</a>, 2012</li>
                    <li><a href="https://en.wikipedia.org/wiki/Democracy_Index">The Democracy Index by the Economist Intelligence Unit</a>,
                        2014</li>
                    </ul></p>
        <p>This chart show US aid disbursment by country form 1970 to 2012.  Israel and Egypt are the 
            only countries to have received over 100 billion USD during this period. Afghanistan and Iraq are catching up.  
            Vietnam, at 59 billion USD, rounds out the top five.  Pakistan, at half that amount is number six.  
            Turkey, South Korea, Russia and Jordan are the other countries that make up the top ten.
        </p>
        </div>
        
        <div id="div_small"></div>
        <div id="viz">
		  <svg class="chart"></svg>
        </div>  
        <div id="notes"><p style="font-size:12px"><strong>Note: </strong>Contains only countries that recived a total of
            more than 200 million USD in aid during the period (1970 - 2012).</p></div>
    
		<script type="text/javascript">

govt_colors = d3.scale.category10();
            govt_types = [];
			//var w = 700;
			//var h = 500;
			
            var aid_data, president_data, aid_data1, president_data1,dataset;
        	
            var clientWidth = document.documentElement.clientWidth;
			var clientHeight = document.documentElement.clientHeight;
			
			chartWidth = 700;
			chartHeight = 500;
			
			console.log(clientHeight);
			console.log(clientWidth);
			
			var margin = {top: 80, right: 20, bottom: 50, left: 100},
			width = chartWidth - margin.left - margin.right,
			height = chartHeight  - margin.top - margin.bottom;
			
			var xScaleOrd = d3.scale.ordinal()
				.rangeRoundBands([0, width], .1);
            
			//Set up scales
			var xScaleTime = d3.time.scale()
								.range([ 0 , width ]);
            
            var yScaleLin = d3.scale.linear()
				.range([height, 0]);
			
            //Set up date formatting and years
			var dateFormat = d3.time.format("%Y");
            
			var xAxis = d3.svg.axis()
							.scale(xScaleTime)
							.orient("bottom")
							.ticks(7 )
							.tickFormat(function(d) {
								return dateFormat(d);
							});
			
			var yAxis = d3.svg.axis()
				.scale(yScaleLin)
				.orient("left")
				.ticks(5);
            
			//Configure line generator
			var line_total = d3.svg.line()
				.x(function(d) {
					return xScaleTime(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScaleLin(+d.total_aid);
				});
            
            var line_military = d3.svg.line()
				.x(function(d) {
					return xScaleTime(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScaleLin(+d.military_aid);
				});
            
            var line_economic = d3.svg.line()
				.x(function(d) {
					return xScaleTime(dateFormat.parse(d.year));
				})
				.y(function(d) {
					return yScaleLin(+d.economic_aid);
				});

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 + ")");
            
            chart.append("text")
                .attr("x",0)
                .attr("y",-55)
                .style("text-anchor","left")
                .style("font-size","16px")
                .style("font-weight","bold")
                .text("US Aid Disbursement by Country for from 1970 till 2012");
            
            group_box = chart.append("g")
                .attr("id","group_box")
                .attr("onclick","redrawChart(dataset)");

group_box.append("rect")
                .attr("x",5)
                .attr("y",margin.top/2 - 85)
                .attr("width",550)
                .attr("height",30)
                .style("stroke","#6a6a6a")
                .style("fill","#eaeaea")
                .attr("id","group_rect");
            
            group_box.append("text")
                .text("Total Aid in USD (Billions)")
                .attr("x",5 + 10)
                .attr("y",margin.top/2-65)
                .attr("text-anchor","left")
                .attr("font-size","14px")
                .attr("font-weight","normal")
                .attr("id","group_text");
            
            legend = chart.selectAll(".legend")
                        .data([{title:"> 20", text: "More than 20 Billion USD", color: "blue", stroke_width:2},
                               {title:"10 - 20", text: "Between 10 and 20 Billion USD", color:"pink", stroke_width:2},
                               {title:"< 10 ", text: "Less than 10 Billion USD",color:"gray",stroke_width:1},
                        ])
                        .enter()
                        .append("g")
                        .attr("class","legend");
            
            var i = 0;
            var legend_mouseover = function(d) {
                    console.log("test",d);
                    myColor = "." + d.color;
                    var mySelection = d3.selectAll(myColor);
                    mySelection.selectAll("path").style("stroke-width",4);
            }
            
            var legend_mouseout = function(d) {
                    //console.log("test",d);
                    myColor = "." + d.color;
                    var mySelection = d3.selectAll(myColor);
                    mySelection.selectAll("path").style("stroke-width",d.stroke_width);
            }
            
            legend.each(function(d) {
                var e = d3.select(this);
                
                e.append("rect")
                    .attr("x", 5 + 80 + 120 + i*120 )
                    .attr("y", margin.top/2 - 80)
                    .attr("width", 90)
                    .attr("height", 20)
                    .style("fill",function(d) { return d.color;})
                    .on("mouseover",legend_mouseover)
                    .on("mouseout",legend_mouseout);
                
                e.append("text")
                    .attr("x", 85 + 90 + i*120 + 75)
                    .attr("y",margin.top/2 - 65)
                    .attr("text-anchor","middle")
                    .attr("font-size","12px")
                    .text(d.title)
                    .style("fill","white");
                i = i +1;
                
             });
            
            
            queue()
				.defer(function(callback) {
					d3.csv("us_foreign_assistance_yearly.csv",function(aid_data1) { callback(null,aid_data1);})
				})
                .defer(function(callback) {
					d3.csv("us_presidents_yearly.csv",function(president_data1) { callback(null,president_data1);})
				})
				.await(drawChart);
            
            
            function redrawChart(dataset) {
                }
            
            function drawChart(error,aid_data1,president_data1) {
                
                console.log(aid_data1);
                aid_data = aid_data1;
                president_data = president_data1;
                
                xScaleTime.domain([ 
					d3.min(aid_data, function(d) {
                        return dateFormat.parse(d.year);
					}),
					d3.max(aid_data, function(d) {
						return dateFormat.parse(d.year);
					})
				]);

yScaleLin.domain([ 0, 
					d3.max(aid_data, function(d) {
						return +d.total_aid/1000000;
					})
					
				]);
                
                
                //This is an array of objects. Each object
				//contains a number of values, 'country' and 'military_aid, economic_aid, total_aid'.

//New array with all the years, for referencing later
				var years = ["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", "2012"];

//Create a new, empty array to hold our restructured dataset
				dataset = [];

//Loop once for each row in data
                country = "";
                j = -1;
				for (var i = 0; i < aid_data.length; i++) {
                                            
                    if (country != aid_data[i].country) {
                        country = aid_data[i].country;
                        j = j + 1;
					//Create new object with this country's name and empty array
					   dataset[j] = {
                            country: aid_data[i].country,
                            iso2: aid_data[i].iso2,
                            iso3: aid_data[i].iso3,
                            govt_category: aid_data[i].govt_category,
                            aid_all_years : 0,
                            aid: []
					   
				        };
                        
                    }
                    
                    //Add all the aid data to the new object
					// If value is not empty
						if (aid_data[i].year > 0) {
							//Add a new object to the aid data array
							//for this country
                            //console.log(dataset[j].aid_all_years);
                            
							
                                dataset[j].aid.push({
                                            year: aid_data[i].year,
                                            military_aid: +aid_data[i].military_aid/1000000,
                                            economic_aid: +aid_data[i].economic_aid/1000000,
                                            total_aid: +aid_data[i].total_aid/1000000
                                });
                                dataset[j].aid.sort(function(a,b) {
                                    return d3.ascending(+a.year, +b.year);
                                });
                                
                                //console.log(aid_data[i]);
                            
						}

}
                
                //dataset[j].aid_all_years = d3.sum(dataset[j].aid,function(d) {return d.total_aid;})
                dataset.forEach(function(d) {
                    d.aid_all_years = d3.sum(d.aid, function(e) {return e.total_aid;})
                });
                
                
                dataset = dataset.filter(isBigEnough);
				//Make a group for each country
				var groups = chart.selectAll(".country")
					.data(dataset)
					.enter()
					.append("g")
                    .classed("blue", function(d) {
						if (+d.aid_all_years >= 20000)  {
							return true;
						} else {
							return false;
						}
                    })
                    .classed("pink", function(d) {
						if (+d.aid_all_years >= 10000 && +d.aid_all_years < 20000)  {
							return true;
						} else {
							return false;
						}
                    })
                    .classed("gray", function(d) {
						if (+d.aid_all_years < 10000)  {
							return true;
						} else {
							return false;
						}
                    });
;

//Append a title with the country name (so we get easy tooltips)
                format = d3.format(",.0f");
				groups.append("title")
					.text(function(d) {
                        //console.log(d);
						return d.country + "\nTotal Aid: " + format(d.aid_all_years) + " Million USD";
					});

//Within each group, create a new line/path,
				//binding just the emissions data to each one
				groups.selectAll("path")
					.data(function(d) {
						return [ d.aid ];
					})
					.enter()
					.append("path")
					.attr("class", "line")
					.attr("d", line_total)
					.attr("fill", "none")
					.attr("stroke", "steelblue")
					.attr("stroke-width", 2);

//Axes
				chart.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (height) + ")")
					.call(xAxis);

chart.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + 0 + ",0)")
					.call(yAxis);
                
                chart.append("text")      // text label for the x axis
                    .attr("x", width/2 )
                    .attr("y", (height  + 40))
                    .style("text-anchor", "middle")
                    .style("font-size","12px")
                    .text("Year");
                
                chart.append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", -60)
                    .attr("x",-height/2)
                    .attr("dy", "1em")
                    .style("text-anchor", "middle")
                    .style("font-size","12px")
                    .text("Aid (USD, Million)");
                
                
                function isBigEnough(d, index, array) {
                          return (d.aid_all_years >= 200);
                }

}
                
		</script>

</body>
</html>

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

Modified http://d3js.org/queue.v1.min.js to a secure url

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

https://d3js.org/queue.v1.min.js