D3 Examples - Renewable energy, styled

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: #563734;
                font-family: arial, sans-serif;
            }
h1{
    font-size:24px;
    color:#b9bc79;
    margin-bottom: 0px;
}
h3{
    font-size:14px;
    font-weight:normal;
    color:#fff;
    margin-top: 5px;
    margin-bottom: 5px;
}
h1,
h3{
    margin-left:17px;
}
h3 a{
    color:#9bf;
    text-decoration: none;
}
h3 a:hover{
    color:#fff;
}
svg {
    background-color: #563734;
    font-size: 11px;
}
            .axis path,
            .axis line {
            fill:none;
            stroke: #b9bc79;
            shape-rendering:crispEdges;
            }
            .axis text{
                font-family: sans-serif;
                font-size: 11px;
                fill: #b9bc79;
            }
            .y.axis path,
            .y.axis line{
                opacity: 0;
            }
            rect {
                fill: #fff;
                stroke:none;
            }
            rect:hover {
                fill: #9bf;
                stroke:none;
            }
        </style>
    </head>
    <body>
        <h1>Use of renewable energy in various countries for 2012</h1>
        <h3>Percentage of total energy generation. Source: <a href="https://data.oecd.org/energy/renewable-energy.htm#indicator-chart" target="_blank">OECD</a>, 2014</h3>
​
        <script type="text/javascript"> 
        var dataset;
        var h = 600;
        var w = 600;
        var padding = [ 20, 10,20,120]; //Top, right, bottom, left
// scale width
var widthScale = d3.scale.linear()
    .range([0,w-padding[1]-padding[3]]);
​
var heightScale = d3.scale.ordinal()
    .rangeRoundBands([ padding[0], h-padding[2] ], 0.2);
​
//generate axis
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); 
//load data
    d3.csv("renewable-energy-perc-of-total-energy-generation.csv", function(data){
        data.sort(function(a,b){
//+a and +b because probably some values are written as text instead of numbers
return d3.descending(+a.y2012, +b.y2012)
        });
dataset=data;
​
widthScale.domain([0, d3.max(dataset, function(d){
    return +d.y2012;
}) ]);
heightScale.domain(dataset.map(function(d){ return d.Country; }));
​
​
//alle rectangles in vari
var rects= svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect");
​
rects.attr("x", padding[3])
    .attr("y", function(d){
        return heightScale(d.Country);
    })
    .attr("width", function(d){
​
        return widthScale(d.y2012);
    })
    .attr("height", heightScale.rangeBand())
    .append("title")
    .text(function(d){
    return "energy generation " + d.Country + " 2012: " + d.y2012 +"%";
    })
​
    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>
    