D3 Examples - Module 3 exercise - Global refugee data

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Adding Tooltips</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            body {
                background-color: white;
                font-family: Book Antiqua;
                font-weight: bold;
                margin-left: 50px;
            }
            svg {
                background-color: #c0c0c0;
            }
            rect {
                fill: #800000;
            }
            h1 {
                font-family: Book Antiqua;
            }
​
        </style>
    </head>
    <body>
​
        <script type="text/javascript">
            var body = d3.select('body');
            body.append('h1').text('Global refugee intake pattern')
​
            body.append('p').text('Average annual refugees (2009-2013) per GDP at PPP 2013 by country')
​
            var svg = body.append("svg").attr("width", 510).attr("height", 1450);
​
            d3.csv("RefugeeData.csv", function(data) {
​
                data.sort(function(a, b) {
                    return d3.descending(+a.ref_p_gdp, +b.ref_p_gdp);
                });
​
                var rects = svg.selectAll("rect").data(data).enter().append("rect");
​
                rects.attr("x", 15).attr("y", function(d, i) {
                    if (d.ref_p_gdp >1) {
                        return i * 20+10;
                    }
                }).attr("width", function(d) {
                    if (d.ref_p_gdp >1) {
                        return d.ref_p_gdp;
                    }
                }).attr("height", 15);
                var c_name = svg.selectAll("text").data(data).enter().append("text");
​
                c_name.attr("x", function(d) {
                    if (d.ref_p_gdp >1) {
                        return Number(d.ref_p_gdp)+25;
                    } 
                }).attr("y", function(d, i) {
                    if (d.ref_p_gdp >1) {
                        return i * 20+20;
                    }
                }).attr("font-family", "Book Antiqua").attr("font-size", "10px").attr("fill", "black").attr("text-anchor", "start").text(function(d) {
                    if (d.ref_p_gdp >1) {
                    return d.country+" ("+Math.round(d.ref_p_gdp)+")";
                    }
                });
​
            });
​
        </script>
​
    </body>
</html>
    