D3 Examples - Ranking the 36 countries that spend on aid (2010, MUSD, AidData.org)

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Aid Spending</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: #ffffff;
                font-family: Helvetica, Arial, sans-serif;
                padding: 50px;
            }
​
            svg {
                background-color: #f7efea;
            }
            
            rect {
                fill: #03cbbe;
            }
        </style>
    </head>
    
    <body>
​
        <p>36 countries that spend on aid (2010, MUSD, AidData.org).</p>
        
        <script type="text/javascript">     
        
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 905)
                        .attr("height", 600);
            
            //Load in contents of CSV file
            d3.csv("ElemOfNationalPower_2010.csv", function(data) {
                //Log 'data' to the console, for verification.
                //console.log(data);
                
                data.sort(function(a, b) {
                    return d3.descending(+a.Aid_MUSD, +b.Aid_MUSD);
​
                });
                
                data = data.slice(0,36);
                console.log(data);
                
                var rects = svg.selectAll("rect")
                                .data(data)
                                .enter()
                                .append("rect");
​
                rects.attr("x", 105)
                    .attr("y", function(d, i) {
                        return i * 15;
                    })
                    .attr("width", function(d) {
                        return +d.Aid_MUSD * 800/35000 ;
                    })
                    .attr("height", 13)
                    .append("title")
                    .text(function(d) {
                        return d.Country_Name + "'s aid spending is " + d.Aid_MUSD + " million USD";
                    });
                
                var countries = svg.selectAll("text")
                                    .data(data)
                                    .enter()
                                    .append("text");
​
​
                                countries.attr("x", 100)
                                    .attr("y", function(d,i) {
                                        return i * 15 + 11; })
                                    .attr("fill", "black")
                                    .attr("font-size", "10px")
                                    .attr("font-weight", "normal")
                                    .attr("font-family", "sans-serif")
                                    .attr("text-anchor", "end")
                                    .text(function(d) {
                                        return d.Country_Name});
            });
​
        </script>
​
    </body>
</html>
    