US Aid - 2012

<!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>
		<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;
			}
            
            #main {
                position: absolute;
                width: 350px;
                height: 600px;      
                float:left;
            }
            
            #chart {
                width: 600px;
                height: 500px;
                position:relative;
                right: -400px;
                top: 10px;
            }
            
            #notes {
                width:auto;
                height:auto;
                position:relative;
                top:100px;
            }
                
		</style>
	</head>
	<body>
        <div id="main">
		<h1>Where does US Aid go?</h1>

<p>The US is the largest provider of foreign aid, disbursing 48.4 billion USD in 2012.<br>
            34.8 billion USD was identified as delivered 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 byt the Economist Intelligence Unit</a>,
                        2014</li>
                    </ul></p>
        <p>The two axes show the two types of aid provided by the US government, economic aid on the X axis, and military aid on the Y axis. 
            Afghanistan clearly receives the most aid.  Click on the box to group the aid by the type of government that receives it, 
            based on the Democracy Index (the Economic Intelligence Unit).</p><p>Of the six countries that break the billion dollar mark, 
        Afghanistan, Egypt and Jordan are categorized as "authoritarian" regimes, while Pakistan and Iraq are classified as "hybrid" regimes, 
        somewhere between democracy and totalitarian.  Israel is classfied as a "flawed" democracy.</p>
        </div>
        
        <div id="chart"></div>
        <div id="notes"><p style="font-size:12px"><strong>Note: </strong>Contains only countries that recived 
            less more than 5 million USD in aid.</p></div>
    
		<script type="text/javascript">

govt_colors = d3.scale.category10();
            govt_types = [];
			var w = 700;
			var h = 500;
			var padding = [ 130, 10, 60, 80 ];  //Top, right, bottom, left
            var data1 =[];
            grouped = true;

var xScale = d3.scale.linear()
								.range([ padding[3], w - padding[1] - padding[3] ]);
			
			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);
            
            xScale.domain([0, 9000]);
            yScale.domain([12000, 0]);

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

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

d3.csv("usaid_2012.csv", function(data) {
                data1 = data;
				//data_nested = d3.nest(
                //xScale.domain([0,3500]);

//yScale.domain([10000,0]);

data.sort(function(a,b) {
                        return d3.descending(+a.Total_AidM, +b.Total_AidM);
                });
                
                legend_order = ["Full democracy","Flawed democracy","Hybrid regime","Authoritarian regime","No Data"];
                nested_data = d3.nest()
                            .key(function(d) {return d.Govt_Category;})
                            .sortKeys(function(a,b) {return legend_order.indexOf(a) - legend_order.indexOf(b);})
                            .rollup(function(govt_type) {
                                Military_Aid = d3.sum(govt_type,function(d) {
                                    return d.Military_AidM; });
                                Economic_Aid = d3.sum(govt_type,function(d) {
                                    return d.Economic_AidM;});
                                return {Military_Aid:Military_Aid, Economic_Aid:Economic_Aid};
                            })   
                            .entries(data);
                
                
                nested_data.forEach(function(d,i) {
                                govt_types[i]=d.key;});
               // console.log(nested_data);
                
                grouped = true;
                
                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);
                
                svg.append("text")      // text label for the x axis
                    .attr("x", (w - padding[1] - padding[3])/2 + padding[3] )
                    .attr("y", (h  - 10 ))
                    .style("text-anchor", "middle")
                    .style("font-size","12px")
                    .text("Economic Aid (USD, Million)");
                
                svg.append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 10)
                    .attr("x",(-(h - padding[0] - padding[2]) / 2)-padding[0])
                    .attr("dy", "1em")
                    .style("text-anchor", "middle")
                    .style("font-size","12px")
                    .text("Military Aid (USD, Million)");
                
                redrawChart(data,nested_data);

});
            
           function redrawChart(data, nested_data) {
              
               if (grouped) {
                    
                   grouped = false;
                    //Update scale domains
                   
                    var country_circles = svg.selectAll(".country_circles")
                                    .data(data)
                                    .enter()
                                    .append("circle")
                                    .attr("class","country_circles");

country_circles.attr("cx",function(d) {
                                        /*category = d.Govt_Category;
                                        value = -10;
                                        nested_data.forEach(function(d) {
                                                if (category==d.key) { value = d.values.Economic_Aid};
                                        })*/
                                        value = nested_data[govt_types.indexOf(d.Govt_Category)].values.Economic_Aid;
                                        //console.log(value,value1);
                                        return(xScale(value));
                                    })
                                    .attr("cy",function(d) {
                                        //category = d.Govt_Category;
                                        //value = -10;
                                        /*nested_data.forEach(function(d) {
                                                if (category==d.key) value = d.values.Military_Aid;
                                        })*/
                                        value = nested_data[govt_types.indexOf(d.Govt_Category)].values.Military_Aid;
                                        return(yScale(value));
                                    });

xScale.domain([0, 3500]);
					yScale.domain([10000, 0]);
                   
                   country_circles.attr("r", 3)
                        .attr("fill-opacity",0.15)
                        .attr("id",function(d) {return d.Country;})
                        .style("stroke",function(d) {return govt_colors(d.Govt_Category);})
                        .style("stroke-width",2)
                        .style("fill", function(d) {return govt_colors(d.Govt_Category);})
                        .append("title")
                        .text(function(d) {
                            return "Country: " + d.Country + "\nGov. Type: " + d.Govt_Category + "\nTotal Aid (Million USD): " + d.Total_AidM +
                                "\nMilitary Aid (Million USD): " + d.Military_AidM + 
                                "\nEconomic Aid (Million USD): " + d.Economic_AidM;
                        });

country_circles.sort(function(a, b) {
                            return d3.ascending(+a.Total_AidM, +b.Total_AidM);
                        })
                        .transition()
                        .delay(function(d, i) {
                            return i * 20;
                        })
                        .duration(3000)
                        .attr("cx", function(d) {
                            return xScale(d.Economic_AidM);
                        })
                        .attr("cy", function(d) {
                            return yScale(d.Military_AidM);
                        });
                   
                    d3.selectAll(".category_circles")
                        .transition()
                        .delay(500)
                        .duration(2500)
                        .attr("r",0.01)
                        //.style("fill-opacity",0.01)
                        //.style("stroke-opacity",0.05)
                        .remove();
                   
                   d3.select("#group_text").text("Group by Govt. Type")
  
                } else {
                    
                    grouped = true;
                    
                    xScale.domain([0, 9000]);
					yScale.domain([12000, 0]);
                    
                    var category_circles = svg.selectAll(".category_cirlces")
                                        .data(nested_data)
                                        .enter()
                                        .append("circle")
                                        .attr("class","category_circles");
                    
                    category_circles.attr("cx",function(d) {return xScale(d.values.Economic_Aid);})
                                    .attr("cy",function(d) {return yScale(d.values.Military_Aid);})
                                    .style("stroke",function(d) {return govt_colors(d.key);})
                                    .style("stroke-width",2)
                                    .style("fill", function(d) {return govt_colors(d.key);})
                                    .style("fill-opacity",0.8)
                                    .attr("r",0.1)
                                    .append("title")
                                    .text(function(d) {
                                        total_aid = d.values.Military_Aid + d.values.Economic_Aid;
                                        console.log(d,total_aid)
                                        return  "Gov. Type: " + d.key + 
                                            "\nTotal Aid (Million USD): " +  + total_aid +
                                            "\nMilitary Aid (Million USD): " + d.values.Military_Aid + 
                                            "\nEconomic Aid (Million USD): " + d.values.Economic_Aid;
                                    });
                    
                    
                    
                    d3.selectAll(".country_circles")
                        .transition()
                        .delay(function(d, i) {
                            return i * 10;
                        })
                        .duration(2000)
                        //.attr("r",0.01)
                        .attr("cx",function(d) {
                                        value = nested_data[govt_types.indexOf(d.Govt_Category)].values.Economic_Aid;
                                        return(xScale(value));
                            })
                        .attr("cy",function(d) {
                                        value = nested_data[govt_types.indexOf(d.Govt_Category)].values.Military_Aid;
                                        return(yScale(value));
                            })
                        .remove();
                    
                    category_circles.sort(function(a, b) {
                            return d3.ascending(+a.Military_Aid, +b.Military_Aid);
                        })
                        .transition()
                        .delay(1000)
                        .duration(3000)
                        .attr("r", function(d) 
                              { total_aid = d.values.Economic_Aid + d.values.Military_Aid;
                                r = Math.sqrt(total_aid/Math.PI)*75/Math.sqrt(20000/Math.PI); 
                               console.log("r:",r);
                                return r;});
                    
                    d3.select("#group_text").text("Split by Country");
                
                }
                    
                    //Update X axis
					svg.select(".x.axis")
				    	.transition()
                        .delay(3000)
				    	.duration(1000)
						.call(xAxis);
					
					//Update Y axis
					svg.select(".y.axis")
				    	.transition()
                        .delay(3000)
				    	.duration(1000)
						.call(yAxis);
           }
            
		</script>

</body>
</html>

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

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