D3 Examples - scatterplot 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: #99BBFF;
                font-family: arial, sans-serif;
            }
h1{
    font-size:24px;
    color:#000;
    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:#ff0;
    text-decoration: none;
}
h3 a:hover{
    color:#f90;
}
svg {
    background-color: #99BBFF;
    font-size: 11px;
}
line{
    stroke:#f00;
stroke-width:1px;
}
            .axis path,
            .axis line {
            fill:none;
            stroke: #fff;
            shape-rendering:crispEdges;
            }
            .axis text{
                font-family: sans-serif;
                font-size: 11px;
                fill: #fff;
            }
            .y.axis path,
            .y.axis line{
                opacity: 1;
            }
            circle {
                fill: #ff0;
                stroke:none;
            }
            circle:hover {
                fill: #f90;
                stroke:none;
            }
        </style>
    </head>
    <body>
        <h1>Use of renewable energy in various countries 2002-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,40,120]; //Top, right, bottom, left
// scale width
var xScale = d3.scale.linear()
    .range([0,w-padding[1]-padding[3]]);
​
var yScale = d3.scale.linear()
    .range([ padding[0], h-padding[2] ]);
​
//generate axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickFormat(function(d){
        return d +"%";
    });
​
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(15)
    .tickFormat(function(d){
        return d +"%";
    });
​
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.ascending(+a.y2002, +b.y2002)
        });
dataset=data;
​
xScale.domain([0, d3.max(dataset, function(d){
    return +d.y2002;
}) ]);
yScale.domain([d3.max(dataset, function(d){
    return +d.y2012}), d3.min(dataset, function(d){
    return +d.y2012;
}) ]);
​
svg.append("polygon")
//.attr("points", padding[3]+","+(h-padding[2])+", 10,"+(h-padding[2])+", 568,500")
​
.attr("points", padding[3]+","+(h-padding[2])+", "+(padding[3]+d3.max(dataset, function(d){return xScale(d.y2012);}))+","+(h-padding[2])+", "+(padding[3]+d3.max(dataset, function(d){return xScale(d.y2012);}))+","+(h-d3.max(dataset, function(d){return xScale(d.y2012);})-padding[0]))
.attr("fill","rgba(255,0,0,0.8)")
​
;
​
​
//alle circles in vari
var circs= svg.selectAll("circle")
    .data(dataset)
    .enter()
    .append("circle");
​
​
circs.attr("cx",padding[3])
​
    .attr("cy",h-padding[2])
    .attr("r", 0,1) 
    .append("title")
    .text(function(d){
    return "energy generation " + d.Country + " 2002: " + d.y2002 +"%"+ " 2012: " + d.y2012 +"%";
​
    });
​
//transition
circs.transition()
    .duration(500)
    //dynamical delay  index/legte dataset*1sec. max =1sec+delay
    .delay(function(d,i){
        return(i/dataset.length*2000);
    })
    .attr("cx",function(d){
    return padding[3]+xScale(d.y2002);
})
    .attr("cy", function(d){
        return yScale(d.y2012);
    })
    .attr("r",5)
;
​
//axes
    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);
​
//axes labels
svg.append("text")
.attr("class", "xText")
.attr("x",w/2)
.attr("y",(h-padding[2])+40)
.text("use of renewable energy in 2002");
​
svg.append("text")
.attr("class", "yText")
.attr("transform","rotate(-90 10 10)")
.attr("x",-250)
.attr("y",padding[3]/2)
​
.text("use of renewable energy in 2012");
​
//increase decrease
​
svg.append("text")
.attr("class", "xText")
.attr("x",250)
.attr("y",250)
.attr("fill","#ddf")
.text("increase");
​
svg.append("text")
.attr("class", "yText")
.attr("x",400)
.attr("y",400)
.attr("fill","#fdd")
.text("decrease");
​
    });
​
</script>
​
    </body>
</html>
    