D3 Examples - multiple line chart renewable energy

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Use of renewable energy European Countries</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
            
            body {
                background-color: #ccb;
                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:#887;
    text-decoration: none;
}
h3 a:hover{
    color:#000;
}
svg {
    background-color: #ccb;
    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;
}
path {
    stroke: #555;
    stroke-width: 1;
}
g path:hover{
    cursor:pointer;
}
g.green path{
    stroke: #f90;
    stroke-width:1
}
g.highlight path{
    stroke: #f00;
    stroke-width:2;
}
​
.text1,
.text2,
.text3{
    font-weight: bold;
    font-family: sans-serif;
    font-size: 13px;
}
.text1{ 
    fill:#f00;
}
.text2{
    fill:#f90;
}
.text3{
    fill:#555;
}
            
        </style>
    </head>
    <body>
        <h1>Renewable energy in various countries</h1>
        <h3>% use of renewable energy 2002 - 2012 <em>Source:</em> <a href="https://data.oecd.org/energy/renewable-energy.htm#indicator-chart" target="_blank">OECD</a>, 2015</h3>
​
 
        <script type="text/javascript"> 
        var dataset;
        var h = 600;
        var w = 600;
        var padding = [ 40,15,60,100]; //Top, right, bottom, left
​
//format date
var dateFormat = d3.time.format("%Y");
​
​
// scale width
var xScale = d3.time.scale()
    .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")
    .ticks(15)
    .tickFormat(function(d){
        return dateFormat(d);
    });
​
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .ticks(10);
//line
var line = d3.svg.line()
    .x(function(d){
        return xScale(dateFormat.parse(d.year))+padding[3];
    })
    .y(function(d){
        return yScale(+d.amount);
    })
​
var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h); 
​
//load data
    d3.csv("renewable-energy-perc-of-total-energy-generation2.csv", function(data){
​
//these correlate with keys array data
var years = ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012" ];
console.log(years);
// restructure dataset, groups with country name, year and energy values
// new dataset
var dataset = [];
// loop all rows once
for (var i =0; i < data.length; i++){
//create new object: country name and empty array (energy)
dataset[i] = {
country: data[i].Country,
energy: []
};
//loop through all the years
​
for (var j=0; j<years.length; j++){
    // if value not empty
    //console.log(data[i][years[j]]);
    if( data[i][years[j]]) {
        dataset[i].energy.push({
            year: years[j],
            amount: data[i][years[j]]
            });
​
    }
}
​
}
​
xScale.domain([d3.min(years, function(d){
    return dateFormat.parse(d)
}), 
    d3.max(years, function(d){
    return dateFormat.parse(d);
}) ]);
yScale.domain([
    d3.max(dataset, function(d) {
        return d3.max(d.energy, function(d){
            return +d.amount;
        });
}), 
    0 
    ]);
​
//make a group for each country//bind dataset to the group
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g")
.classed("green", function(d) {
    if (d.country == "Austria" ||
        d.country == "Belgium" ||
        d.country == "Czech Republic" ||
        d.country == "Denmark" ||
        d.country == "Estonia" ||
        d.country == "Finland" ||
        d.country == "France" ||
        d.country == "Germany" ||
        d.country == "Greece" ||
        d.country == "Hungary" ||
        d.country == "Ireland" ||
        d.country == "Iceland" ||
        d.country == "Italy" ||
        d.country == "Luxembourg" ||
        d.country == "Netherlands" ||
        d.country == "Norway" ||
        d.country == "Poland" ||
        d.country == "Portugal" ||
        d.country == "Russia" ||
        d.country == "Slovak Republic" ||
        d.country == "Slovenia" ||
        d.country == "Spain" ||
        d.country == "Switzerland" ||
        d.country == "Sweden"
        ){
        return true;
    } else {
        return false;
    }
})
.classed("highlight", function(d) {
    if (d.country == "Norway"){
        return true;
    } else {
        return false;
    }
});
groups.append("title")
.text(function(d){
    return d.country;
});
​
//within each group, create a new line
//bind only the energy data to the path
groups.selectAll("path")
.data(function(d) {
    return [ d.energy ];
})
.enter()
.append("path")
.attr("class","line")
.attr("d", line)
.attr("fill", "none");
​
//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])+35)
.text("year");
​
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");
​
​
svg.append("text")
.attr("x",padding[3]+20)
.attr("y",padding[2]-20)
.text("Norway")
.attr("class","text1");
​
svg.append("text")
.attr("x",padding[3]+100)
.attr("y",padding[2]-20)
.text("European countries")
.attr("class","text2");
svg.append("text")
​
.attr("x",padding[3]+240)
.attr("y",padding[2]-20)
.text("Non-European Countries")
.attr("class","text3");
​
//end data
    });
​
</script>
 
    </body>
</html>
    