Registered crime cases in Belarus vs. population by region (2013)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Registered crime cases in Belarus vs. population by region (2013)</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}
            
            .axis path {display: none;}
            .axis line {fill: none;	stroke: rgb(200, 200, 200);shape-rendering: crispEdges; opacity: 0.5;}
			.axis g:first-child line {stroke: rgba (10,20,50,0.75);}
            .axis text {font-family: segoe ui;font-size: 8px;}
            
            svg {background-color: white;}
            circle:hover {fill: lightcoral;}
			
        </style>
	</head>
	<body>

</style>
	</head>
	<body>
        <h1>Registered crime cases in Belarus vs. population by region (2013)</h1>
			<script type="text/javascript">

var padding = [ 20, 10, 50, 50 ];  //Top, right, bottom, left
			var w = 800;
			var h = 600;
			
			var xScale = d3.scale.linear().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").ticks(10).tickSize(-(h - padding[0] +11 - padding[2]));
            var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(12).tickSize(-(w - padding[3] - padding[1]));
                            
            var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);

d3.csv("Belarus-population-xlsx.csv", function(data) {

xScale.domain([0, d3.max(data, function(d) {return +d.population;})]);
				yScale.domain([d3.max(data, function(d) {return +d.registered_crime_cases+1000;}), 0]);

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2] + 5) + ")")
					.call(xAxis)
                    .append("text")
                    .attr("text-anchor", "start")
                    .attr({class: "xlabel",  y: 9, x: w-80,})
                    .text("population, 000")
                    .style({"font-size": 10,"font-family": "segoe ui"});

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3] - 5) + ",0)")
				    .call(yAxis)                       
                    .append("text")
                    .attr("text-anchor", "start")
                    .attr({class: "ylabel",  y: 7, x: -30,})
                    .text("registered crime cases")
                    .style({"font-size": 10,"font-family": "segoe ui"});
                    
            var circles = svg.selectAll("circle").data(data).enter().append("circle");

circles.attr("cx", function(d) {return xScale(d.population);})
                       .attr("cy", function(d) {return yScale(d.registered_crime_cases);})
					   .attr("r", 0.1)
					   .attr("fill", "lightslategray")
					   .append("title")
					   .text(function(d) {return d.registered_crime_cases + " registered crime cases in " + d.region + " (population: " + d.population + "K) in 2013";});

circles.transition().duration(2000).attr("r", 8);}); 
            
		</script>
<p>
<em><b>Source: </b>National statistics committee of the Republic of Belarus - <a href="https://belstat.gov.by/ssrd-mvf/ssrd-mvf_2/natsionalnaya-stranitsa-svodnyh-dannyh/chislennost-naseleniya-na-1-yanvarya-po-oblastyam-respubliki-belarus/"><b> Population</b></a> , </em> <em><a href="https://belstat.gov.by/ofitsialnaya-statistika/otrasli-statistiki/naselenie/pravonarusheniya/godovye-dannye_7/chislo-zaregistrirovannyh-prestuplenii-po-oblastyam-i-g-minsku/"><b>Registered crime cases</b></a> </em></p>
	</body>
</html>

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

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