International inequality - with axes

This bar chart shows an inequality index for a number of countries.

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.

I haven't read this book and am interested to see if, using the same data, I can reach any conclusions.

<!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: aliceblue;
                font-family: "Trebuchet MS", Helvetica, sans-serif;
                color: cadetblue;
			}

h1 {
				font-size: 24px;
				margin: 0;
			}
            
            p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}

svg {
				background-color: aliceblue;
			}
            
            rect:hover {
				fill: turquoise;
			}
            
            .axis path,
			.axis line {
				fill: none;
				stroke: cadetblue;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: "Trebuchet MS", Helvetica, sans-serif;
				font-size: 12px;
                fill: cadetblue;
                shape-rendering: crispEdges;
			}

.y.axis path,
			.y.axis line {
				opacity: 0;
			}

</style>
	</head>
	<body>

<h1>How do developed countries compare in equality of income?</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 = 700;
			var h = 600;
			var padding = [ 20, 10, 30, 120 ];  //Top, right, bottom, left
            
            var widthScale = d3.scale.linear()
								.range([ 0, w - padding[1] - padding[3] ]);
			
			var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);

var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom");

var yAxis = d3.svg.axis()
							.scale(heightScale)
							.orient("left");
            
            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);

});
                
                widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.Inequality;
				}) ]);

heightScale.domain(data.map(function(d) { return d.Country; } ));

var rects = svg.selectAll("rect")
								.data(data)
								.enter()
								.append("rect");

rects.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.Country);
					})
					.attr("width", function(d) {
						return widthScale(d.Inequality);
					})
					.attr("height", heightScale.rangeBand())
					.attr("fill", "cadetblue")
					.append("title")
					.text(function(d) {
						return d.Country + "'s inequality index is " + d.Inequality;
					});

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
					.call(xAxis);

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxis);

});

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js