D3 Examples - bar chart renewable energy

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Use of renewable energy</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js">></script>
        <style type="text/css">     
            body {
                background-color: #561704;
                font-family: arial, sans-serif;
            }
            h1{
                color:#b9bc79;
            }
            h3{
                color:#fff;
            }
            svg {
                background-color: #561704;
                margin: 20px;
                padding: 10px;
                font-size: 11px;
            }
            rect {
                fill:#fff;
            }
        </style>
    </head>
    <body>
        <h1>Use of renewable energy in various countries for 2012</h1>
        <h3>percentage of total energy generation</h3>
​
        <script type="text/javascript"> 
        var dataset;
        var h = 800;
        var w = 600;
​
        var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h); 
​
//load data
    d3.csv("renewable-energy-perc-of-total-energy-generation.csv", function(data){
​
        data.sort(function(a,b){
//+a and +b :  probably some values are written as text instead of numbers
return d3.descending(+a.y2012, +b.y2012)
        });
        dataset=data;
//country
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d){
    return d.Country;
})
.attr("x", 140)
.attr("y", function(d,i){
    return i*15+10;
})
.attr("fill","#b9bc79")
.attr("text-anchor", "end")
;
​
//alle rectangles in var
var rects= svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect");
​
rects.attr("x", 150)
    .attr("y", function(d,i){
        return i*15;
    })
    .attr("width", function(d){
        return d.y2012*4;
    })
    .attr("height", 12)
    .append("title")
    .text(function(d){
    return "energy generation " + d.Country + " 2012: " + d.y2012 +"%";
    })
​
    });
</script>
​
    </body>
</html>
    