Belarus Population 2001-2015

<!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>

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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js