D3 Examples - Belarus Population 2001-2015

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Belarus population by region</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        
        <style type="text/css">
            
            body {background-color: white; font-family: segoe ui; font-size: 10px;color: lightslategray}
            h1 {font-size: 24px;margin: 0;}
            p {font-size: 14px;margin: 10px 0 0 0;}
            
            svg {background-color: white;}
            g path:hover {stroke: lightcoral;stroke-width: 1.5;} 
            
            .axis path,
            .axis line {fill: none; stroke: rgb(200, 200, 200);shape-rendering: crispEdges; opacity: 0.5;}
            .axis text {font-family: segoe ui;font-size: 8px;}
            
        </style>
    </head>
    <body>
​
        <h1>Belarus population by region</h1>
​
        <script type="text/javascript">     
​
            var w = 600;
            var h = 500;
            var padding = [ 40, 40, 40, 40 ];  //Top, right, bottom, left
​
            var dateFormat = d3.time.format("%Y");
​
            var xScale = d3.time.scale().range([ padding[3], w - padding[1] - padding[3] ]);
            var yScale = d3.scale.linear().range([ padding[0], h - padding[2] ]);
​
            var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                          //.tickSize(-(h-padding[0]-padding[2]))               
                            .ticks(15)
                            .tickFormat(function(d) {
                                return dateFormat(d);
                            });
​
            var yAxis = d3.svg.axis()
                            .scale(yScale)
                          //.tickSize(-(w-padding[3]-padding[1]))                
                            .ticks(5)
                            .orient("left");
​
            var line = d3.svg.line().x(function(d) {return xScale(dateFormat.parse(d.year));}).y(function(d) {return yScale(+d.amount);});
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
​
            d3.csv("Belarus-population.csv", function(data) {
            var years = ["2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015"];
            
            var dataset = [];
                for (var i = 0; i < data.length; i++) {dataset[i] = {region: data[i].region,emissions: []};
                    for (var j = 0; j < years.length; j++) {if (data[i][years[j]]) {
                            dataset[i].emissions.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.emissions, function(d) {return +d.amount;});})+62,0]);
                
                var groups = svg.selectAll("g")
                    .data(dataset)
                    .enter()
                    .append("g")
                
                groups.append("title")
                    .text(function(d) {return d.region;});
​
                groups.selectAll("path").data(function(d) {return [ d.emissions ];})
                    .enter()
                    .append("path")
                    .attr("class", "line")
                    .attr("d", line)
                    .attr("fill", "none")
                    .attr("stroke", "darkslategrey")
                    .attr("stroke-width", 1);
​
                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + (h - padding[2]) + ")")
                    .call(xAxis);
​
                svg.append("g")
                    .attr("class", "y axis")
                    .attr("transform", "translate(" + (padding[3]) + ",0)")
                    .call(yAxis);
                
​
            });
            
​
        </script>
<p>
<em><b>Source: </b>National statistics committee of the Republic of Belarus - <a href="https://belstat.gov.by/ofitsialnaya-statistika/otrasli-statistiki/naselenie/demografiya_2/g/chislennost-naseleniya-po-oblastyam-i-g-minsku/"><b> Population</b></a></em></p>
    </body>
</html>
    