D3 Examples - First bar chart: monthly unemployment rate

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content=type" content="text/html"; charset="utf-8">
        <title>Creating HTML Elements from Data</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js" charset="utf-8"></script>
        <style type="text/css">
            body {
                background-color: white;
            }
​
            svg {
                background-color: #999999;
            }
​
        </style>
    </head>
    <body>
        <h2>Unemployment rate in Europe, December 2014</h2>
        <script type="text/javascript"> 
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 500)
                        .attr("height", 600);
​
​
            d3.csv("unemployment.csv", function(data) {
​
                data.sort(function(a, b) {
                    return d3.descending(+a.n2014M12, +b.n2014M12);
                }); 
​
                var rect = svg.selectAll("rect")
                    .data(data)
                    .enter()
                    .append("rect")
​
                rect.attr("x", 0)
                    .attr("y", function(d, i) {
                        // console.log(i);
                        return i * 20;
                    })
                    .attr("width", function(d) {
                        return d.n2014M12 * 17;
                    })
                    .attr("height", 18)
                    .attr("fill", "#333333")
                    .append("title")
                    .text(function(d) {
                        return d.country + "'s unemployment rate: " + d.n2014M12;
                    });
            });
​
​
        </script>
    </body>
</html>
    