D3 Examples - Do people die younger in more unequal societies?

Do people die younger in more unequal societies?

This scatter plot shows an inequality index for a number of countries, versus the life expectancy at birth for each country.

The inequality index is the average of the 20:20 income inequality published in the United Nations Development Program reports for 2003, 2004, 2005, and 2006.

The higher the inequality index is, the less equal the country is considered to be

20:20 income inequality means that the index compares how much richer the top 20% of people are, compared to the bottom 20%.

Inequality can be measured using income or assets, but data on income inequality is usually much more readily available as it is collected by tax authorities.

This data was used in the popular book "The Spirit Level" which postulates that inequality is positively correlated with indicators of societal problems and negatively correlated with indicators of quality of life.

Do you think there is a significant correlation shown hear between life expectancy and inequality?

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>International Inequality</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: black;
                font-family: "Trebuchet MS", Helvetica, sans-serif;
                color: white;
            }
​
            h1 {
                font-size: 24px;
                margin: 0;
            }
            
            p {
                font-size: 14px;
                margin: 10px 0 0 0;
            }
​
            svg {
                background-color: black;
            }
            
            circle:hover {
                fill: brown;
            }
            
            .axis path,
            .axis line {
                fill: none;
                stroke: white;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: "Trebuchet MS", Helvetica, sans-serif;
                font-size: 12px;
                fill: white;
                shape-rendering: crispEdges;
            }
​
            
        </style>
    </head>
    <body>
​
        <h1>Do people die younger in more unequal societies?</h1>
        
        <p>International Inequality Index by Country. Source: <a href="https://www.equalitytrust.org.uk/civicrm/contribute/transact?reset=1&id=5">United Nations Development Programme Human Development Indicators, 2003-6</a></p>
        
        <script type="text/javascript">     
​
            var w = 500;
            var h = 500;
            var padding = [ 20, 10, 30, 120 ];  //Top, right, bottom, left
            
            var xscale = d3.scale.linear()
                                .range([ padding[3], w - padding[1] ]);
            
            var yscale = d3.scale.linear()
                                .range([ h - padding[2],padding[0]  ]);
​
​
​
            var xAxis = d3.svg.axis()
                            .scale(xscale)
                            .orient("bottom");
​
            var yAxis = d3.svg.axis()
                            .scale(yscale)
                            .orient("left")
                            .ticks(6)
                            .tickFormat(function(d) {
                                return d + " years";
                            });
            
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
            d3.csv("international_inequality.csv", function(data) {
​
                data.sort(function(a, b) {
                    return d3.descending(a.Inequality, b.Inequality);
​
                });
                
                xscale.domain([
                    d3.min(data, function(d) {
                        return +d.Inequality;
                    }),
                    d3.max(data, function(d) {
                    return +d.Inequality;
                }) ]);
​
                yscale.domain([
                    d3.min(data, function(d) {
                        return +d.Life_expectancy;
                    }),
                    d3.max(data, function(d) {
                    return +d.Life_expectancy;
                }) ]);
​
                var circles = svg.selectAll("circle")
                                .data(data)
                                .enter()
                                .append("circle");
​
                circles.attr("cx", -100)
                    .attr("cy", function(d) {
                        return yscale(d.Life_expectancy);
                    })
                    .attr("r",0.1)
                    .attr("fill", "yellow")
                    .append("title")
                    .text(function(d) {
                        return d.Country + "'s inequality index is " + d.Inequality + " and the average life expectancy is " + d.Life_expectancy + " years";
                    });
                
                circles.sort(function(a,b){
                             return d3.descending(+a.Life_expectancy, +b.Life_expectancy);
                })
                .transition()
                .delay(function(d,i) {
                    return i * 50;
                })
                .duration(4000)
                .attr("r",6)
                .attr("cx", function(d) {
                    return xscale(d.Inequality);
                });
​
            svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0, "+ (h - padding[2]) + ")")
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + padding[3] + ",0)")
                    .call(yAxis);
​
            });
    
​
​
        </script>
​
    </body>
</html>
    