Belarus population - module 4

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

svg {background-color: white;}
            
            .axis path,
			.axis line {stroke-width: 1; fill: none;	stroke: lightgray; shape-rendering: crispEdges;}
			.x.axis text {color: lightgray; font-size: 10px;}
		    .y.axis path,
			.y.axis line {opacity: 0;}
            .y.axis text {font-size: 14px;}
            
            rect {fill: lightslategray;}
            
            rect:hover {opacity: 0.6;}
                    
            
            
        </style>
	</head>
	<body>
        <h1>Belarus population by region</h1>
		<script type="text/javascript">

var w = 300;
			var h = 200;
            var padding = [ 20, 5, 20, 110 ];  //Top, right, bottom, left
			
            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);

var xAxis = d3.svg.axis()
                            .scale(widthScale)
                            .orient("top")
                            .ticks(5)
                            .tickSize(-h + padding[0] + padding[2], -h + padding[0] + padding[2]) ;
            
            var yAxis = d3.svg.axis().scale(heightScale).orient("left");
            
            var svg = d3.select("body").append("svg").attr("width", w+100).attr("height", h);

d3.csv("Belarus-population-xlsx.csv", function(data) {
				
                data.sort(function(a, b) {return d3.descending(+a.population, +b.population);});
               
                widthScale.domain([ 0, d3.max(data, function(d) {return +d.population;}) ]); 
                heightScale.domain(data.map(function(d) {return d.region; }));
            
                 var rects = svg.selectAll("rect")
					.data(data)
					.enter()
				    .append("rect");
                    
              
                rects.attr("x", padding[3])
					.attr("y", function(d) {return heightScale(d.region);})
					.attr("width", function(d) {return widthScale(d.population);})
					.attr("height", heightScale.rangeBand())
					.append("title")
					.text(function(d) {return d.region + "'s population is " + d.population;});
                  
                 svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (padding[2]) + ")")
					.call(xAxis);
                 
                svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
					.call(yAxis);});

</script>
        <p></p><em><b>Source:   </b><a href="https://belstat.gov.by/ssrd-mvf/ssrd-mvf_2/natsionalnaya-stranitsa-svodnyh-dannyh/chislennost-naseleniya-na-1-yanvarya-po-oblastyam-respubliki-belarus/">National statistics committee of the Republic of Belarus</a> </em></p>
	</body>
</html>

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

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