D3 Examples - 2050 World Total Dependency Ratio

2050 World Total Dependency Ratio

This graph shows the Total Dependency Ratio of the world by 2050. The dependency ratio is a measure showing the number of dependents, aged 0 to 24 and over the age of 65, to the total population aged 25 to 64. This indicator gives insight into the amount of people of nonworking age compared to the number of those of working age.

This data is from United Nations: World Population Prospects 2017.This dataset is total dependency ratio (<25 & 65+)/(25-64) by region, subregion and country, 1950-2100 (ratio of population 0-24 and 65+ per 100 population 25-64).

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Choropleth with auto-calculated color (Highmaps)</title>
    <style>
    #container1 { border:1px dotted blue; width: 700px; height: 475px; position: relative; }
    </style>
</head>
<body>  
<div id="container1"></div>
​
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.all.js"></script>
​
<script>
​
    var countryCode = {};
    var series = [];
  
    function row(d) {
        series.push([countryCode[d.Country_code], d["2050"]]);
    }
  
    function render() {
        var dataset = {};
        // We need to colorize every country based on "numberOfWhatever"
        // colors should be uniq for every value.
        // For this purpose we create palette(using min/max series-value)
        var onlyValues = series.map(function (obj) {
            return obj[1];
        });
        var minValue = Math.min.apply(null, onlyValues),
            maxValue = Math.max.apply(null, onlyValues);
​
        // create color palette function
        // color can be whatever you wish
        var paletteScale = d3.scale.linear()
            .domain([minValue, maxValue])
            .range(["#FFEFEF", "#3E000F"]); // blue color
​
        // fill dataset in appropriate format
        series.forEach(function (item) { //
            // item example value ["USA", 70]
            var iso = item[0],
                value = item[1];
            dataset[iso] = {numberOfThings: value, fillColor: paletteScale(value)};
        });
​
        // render map
        new Datamap({
            element: document.getElementById('container1'),
            projection: 'mercator', // big world map
            // countries don't listed in dataset will be painted with this color
            fills: {defaultFill: '#F5F5F5'},
            data: dataset,
            geographyConfig: {
                borderColor: '#DEDEDE',
                highlightBorderWidth: 2,
                // don't change color on mouse hover
                highlightFillColor: function (geo) {
                    return geo['fillColor'] || '#F5F5F5';
                },
                // only change border
                highlightBorderColor: '#B7B7B7',
                // show desired information in tooltip
                popupTemplate: function (geo, data) {
                    // don't show tooltip if country don't present in dataset
                    if (!data) {
                        return;
                    }
                    // tooltip content
                    return ['<div class="hoverinfo">',
                        '<strong>', geo.properties.name, '</strong>',
                        '<br>Total Dependency Ratio: <strong>', data.numberOfThings, '</strong>',
                        '</div>'].join('');
                }
            }
        });
​
    }
  
    function countryCodeRow(d) {
        countryCode[d.Numeric_code] = d.Alpha_3_code;
    }
  
    d3.csv("CountryCode.csv", countryCodeRow, {});
    d3.csv("2015 to 2100 Dependency Ratio.csv", row, render);
​
</script>
​
</body>
</html>
    