D3 Examples - Module 5 exercise - Global refugee data

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Global Refugee Data</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;
            }
            h1 {
                font-family: Book Antiqua;
                font-size: 24px;
                margin: 0;
                color: #323232;
            }
​
            p {
                font-family: Book Antiqua;
                font-size: 14px;
                color: #323232;
                margin: 10px 0 0 0;
            }
            svg {
                background-color: #323232;
            }
            circle:hover {
                fill: #ff9900;
            }
            .axis path, .axis line {
                fill: none;
                stroke: white;
                shape-rendering: crispEdges;
            }
​
            .axis text {
                font-family: Book Antiqua;
                fill: white;
                font-size: 10px;
            }
​
            .y.axis path, .y.axis line {
                fill: none;
                stroke: white;
                shape-rendering: crispEdges;
            }
​
            .countryName {
                font-weight: bold;
                font-size: 14px;
                color: white;
            }
            .dataVal {
                font-weight: bold;
                color: white;
            }
            .toolTip {
                padding: 6px;
                background-color: #323232;
                border-radius: 4px;
                position: absolute;
                font-size: 12px;
                color: #ff9900;
                line-height: 18px;
                visibility: hidden;
            }
            .subhead {
                fill: white;
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <div class="toolTip"></div>
        <h1>Global Refugee Data</h1>
​
        <p>
            Average annual refugees (2009-2013) and GDP at PPP 2013 for selected countries. Source: <a href="https://popstats.unhcr.org/#_ga=1.152203577.1033056182.1429126874">UNHCR</a> and <a href="https://data.worldbank.org/indicator/NY.GDP.PCAP.PP.CD">World Bank</a>
        </p>
        <br/>
        <script type="text/javascript">
            var w = 900;
            var h = 750;
            var tt;
            var padding = [50, 10, 75, 100];
            //Top, right, bottom, left
​
            var xScale = d3.scale.linear().range([padding[3], w - padding[1] - padding[3]]);
​
            var yScale = d3.scale.linear().range([padding[0], h - padding[2]]);
​
            var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(10);
​
            var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(15);
​
            var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
            svg.append('text').text('GDP per capita at PPP 2013 in USD').attr('transform', function(d) {
                return "rotate(-90 0, 360)"
            }).attr('x', 0).attr('y', h / 2 + 15).attr('text-anchor', 'middle').attr('class', 'y subhead').attr('opacity', 1)
​
            svg.append('text').text('Average annual refugees 2009-2013').attr('x', w / 2).attr('y', h - 15).attr('text-anchor', 'middle').attr('class', 'x subhead').attr('opacity', 1)
​
            d3.csv("RefugeeData.csv", function(data) {
​
                xScale.domain([d3.min(data, function(d) {
                    if (d.ref_p_gdp > 10) {
                        return +d.avg_refugees;
                    }
                }), d3.max(data, function(d) {
                    if (d.ref_p_gdp > 10) {
                        return +d.avg_refugees;
                    }
                })]);
​
                yScale.domain([d3.max(data, function(d) {
                    if (d.ref_p_gdp > 10) {
                        return +d.gdp_ppp_13;
                    }
                }), d3.min(data, function(d) {
                    if (d.ref_p_gdp > 10) {
                        return +d.gdp_ppp_13;
                    }
                })]);
​
                var circlesData = svg.selectAll("circle").data(data).enter().append("circle");
                circlesData.attr("cx", function(d) {
                    if (d.ref_p_gdp > 10) {
                        return xScale(d.avg_refugees);
                    }
                }).attr("cy", function(d) {
                    if (d.ref_p_gdp > 10) {
                        return yScale(d.gdp_ppp_13);
                    }
                }).attr("r", function(d) {
                    if (d.ref_p_gdp > 10) {
                        return 0.2;
                    }
                }).attr("fill", "#ffc04c");
​
                circlesData.sort(function(a, b) {
                    return d3.descending(+a.ref_p_gdp, +b.ref_p_gdp);
                }).transition().delay(function(d, i) {
                    if (d.ref_p_gdp > 10) {
                        return i * 25;
                    }
                }).duration(1000).attr("cx", function(d) {
                    if (d.ref_p_gdp > 10) {
                        return xScale(d.avg_refugees);
                    }
                }).attr("cy", function(d) {
                    if (d.ref_p_gdp > 10) {
                        return yScale(d.gdp_ppp_13);
                    }
                }).attr("r", function(d) {
                    if (d.ref_p_gdp > 10) {
                        return 5;
                    }
                }).attr("fill", "#ffc04c");
​
                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);
​
                circlesData.style('cursor', 'pointer')
​
                circlesData.on('mouseover', function(d) {
                    d3.select(this).classed('hover', true).transition().attr('r', 10)
                    tt = d3.select('.toolTip');
​
                    tt.html('<span class="countryName">' + d.country + '</span><br/>' + 'Average annual refugees : <span class="dataVal">' + Math.floor(Math.round(d.avg_refugees)) + '</span><br/>GDP per capita at PPP : <span class="dataVal">USD ' + Math.floor(Math.round(d.gdp_ppp_13)) + '</span>').style('left', d3.event.pageX + 10 + 'px').style('top', d3.event.pageY + 10 + 'px').style('visibility', 'visible')
​
                })
                circlesData.on('mouseout', function() {
                    d3.select(this).classed('hover', false).transition().attr('r', 5)
                    tt.style('visibility', 'hidden')
​
                })
            });
​
        </script>
​
    </body>
</html>
    