D3 Examples - Unemployment ranked with horizontal bars

Unemployment ranked with horizontal bars

Here is a simple, mildly interactive visualisation of unemployment in the world. More specifically, a ranked list of the 20 countries with the highest unemployment rates. The design draws heavily from Mike Bostock's bar chart used in his explanation of object constancy.

The data was downloaded in Excel format from the World Bank. As the notes explain, unemployment is narrowly defined as people who are available to work and who have actively been engaged in looking for work. I say "narrow" because in many cases it is not quite clear how long this window should be, or to what extent it is relevant to the problem.

Lastly, the data is from 2010 and the world has changed quite rapidly since then. Anyways, this at least shows some interestng data in addition to how to make a graph like this. Enjoy :)

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.x-axis path {
    stroke:white;
    fill:none;
}
.x-axis line {
    fill: none;
    stroke: none;
    stroke-opacity:.8;
    shape-rendering: crispEdges;
}
.bars rect {
    fill:steelblue;
    fill-opacity:.9;
}
.title {
    font-weight: bold;
}
#precise-value {
    fill:white;
    font-size: 12px;
}
</style>
</head>
​
<body>
<script type="text/javascript">
​
(function(){
​
    var margin = {top: 50, bottom: 50, left:250, right: 40};
    var width = 900 - margin.left - margin.right;
    var height = 450 - margin.top - margin.bottom;
​
    var xScale = d3.scale.linear().range([0, width]);
    var yScale = d3.scale.ordinal().rangeRoundBands([0, height], 1.8,0);
​
    var numTicks = 5;
    var xAxis = d3.svg.axis().scale(xScale)
                    .orient("top")
                    .tickSize((-height))
                    .ticks(numTicks);
​
    var svg = d3.select("body").append("svg")
                .attr("width", width+margin.left+margin.right)
                .attr("height", height+margin.top+margin.bottom)
                .attr("class", "base-svg");
​
    var barSvg = svg.append("g")
                .attr("transform", "translate("+margin.left+","+margin.top+")")
                .attr("class", "bar-svg");
​
    var x = barSvg.append("g")
            .attr("class", "x-axis");
​
    var url = "data.json";
​
    d3.json(url, function(data) {
​
        var xMax = d3.max(data, function(d) { return d.rate; } );
        var xMin = 0;
        xScale.domain([xMin, xMax]);
        yScale.domain(data.map(function(d) { return d.country; }));
​
        d3.select(".base-svg").append("text")
            .attr("x", margin.left)
            .attr("y", (margin.top)/2)
            .attr("text-anchor", "start")
            .text("Narrowly defined unemployment rates: top 20 countries (2010)")
            .attr("class", "title");
​
        var groups = barSvg.append("g").attr("class", "labels")
                    .selectAll("text")
                    .data(data)
                    .enter()
                    .append("g");
​
        groups.append("text")
                .attr("x", "0")
                .attr("y", function(d) { return yScale(d.country); })
                .text(function(d) { return d.country; })
                .attr("text-anchor", "end")
                .attr("dy", ".9em")
                .attr("dx", "-.32em")
                .attr("id", function(d,i) { return "label"+i; });
​
        var bars = groups
                    .attr("class", "bars")
                    .append("rect")
                    .attr("width", function(d) { return xScale(d.rate); })
                    .attr("height", height/20)
                    .attr("x", xScale(xMin))
                    .attr("y", function(d) { return yScale(d.country); })
                    .attr("id", function(d,i) { return "bar"+i; });
​
        groups.append("text")
                .attr("x", function(d) { return xScale(d.rate); })
                .attr("y", function(d) { return yScale(d.country); })
                .text(function(d) { return d.rate; })
                .attr("text-anchor", "end")
                .attr("dy", "1.2em")
                .attr("dx", "-.32em")
                .attr("id", "precise-value");
​
        bars
            .on("mouseover", function() {
                var currentGroup = d3.select(this.parentNode);
                currentGroup.select("rect").style("fill", "brown");
                currentGroup.select("text").style("font-weight", "bold");
            })
            .on("mouseout", function() {
                var currentGroup = d3.select(this.parentNode);
                currentGroup.select("rect").style("fill", "steelblue");
                currentGroup.select("text").style("font-weight", "normal");
            });
​
        x.call(xAxis);
        var grid = xScale.ticks(numTicks);
        barSvg.append("g").attr("class", "grid")
            .selectAll("line")
            .data(grid, function(d) { return d; })
            .enter().append("line")
                .attr("y1", 0)
                .attr("y2", height+margin.bottom)
                .attr("x1", function(d) { return xScale(d); })
                .attr("x2", function(d) { return xScale(d); })
                .attr("stroke", "white");
​
    });
​
})();
​
</script>
</body>
​
</html>
    