Percentage of perfect students at Russian "SAT" subjects test in 2013

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3 scales and axes + beauty</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">
			
			body {
				background-color: white;
				font-family: helvetica, calibri, arial, sans-serif;
				font-size: 11px;
			}

svg {
				background-color: #cccccc;
			}
			
			h1 {
        		font-family: Helvetica, Calibri, Arial, sans-serif;
        		font-size: 24px;
           		color: #666666;
           		margin:0;
       		}

h3 {
        		font-family: Helvetica, Calibri, Arial, sans-serif;
        		font-size: 16px;
           		color: #666666;
           		margin:0;
       		}

line:hover {
				stroke: #666666;
				}

.axis path,
       		.axis line {
       			fill: none;
       			stroke: black;
       			shape-rendering: crispEdges;
       		}

.axis text {
       			font-family: sans-serif;
       			font-size: 11px;
       		}

.y.axis path,
       		.y.axis line{opacity: 0;}

#container {
			width: 660px;
			height: 1500px;
			margin: 0;
			padding: 0;
			border: 1px solid #7f8c8d;
			}
			
			#wrapper {
			width: 650px;
			height: 1460px;		
			margin: 0;
			padding: 10px;
			}
			
			#gr {
				width:500px;
				padding: none;
				margin: none;
				margin-top: 0px;
				margin-right: 10px;
				margin-bottom: 10px;
				height: 1400px;
				float: left;
				}
					
			#rightdiv{
				width: 140px;
				padding-top: 0px;
				padding-left: 0px;
				/*padding-right: 10px;*/
				padding-bottom: 0px;
				margin: none;
				margin-top: 0px;
				margin-bottom: 0px;
				height: 100px;
				float: right;
				text-align: left;
				}
			
			#header {
				text-align: left;
				font-family: helvetica, calibri, arial, sans-serif;
				text-decoration: bold;
				padding-left: 10px;
				padding-bottom: 0px;
				padding-top: 10px;
				width: 500px;
				background-color: #ffffff;
				color: #000000;
				}
			#source {
			width: 500px;
			height: 50px;
			padding-left: 0px;
			font-family: helvetica, calibri, arial, sans-serif;
			font-size:10px;
			color: #95a5a6
			float: right;
			}

.arrow {
  			stroke: #000;
  			stroke-width: 1px;
  			shape-rendering: geometricPrecision;
			}

.regsel {
  			stroke: yellow;
  			stroke-width: 2px;
  			shape-rendering: geometricPrecision;
			}

</style>
	</head>
	<body>
		<div id="container">
		<div id="header">
		<h1>RUSSIAN "SAT" RESULTS BY REGION</h1>
		<h3>The percentage of students who scored maximum points in 2013</h3>
		</div>
		<div id="wrapper">
		<div id="gr">
		<script type="text/javascript">
			var margin = {top: 10, right: 20, bottom: 10, left:180}; //Margin convention https://bl.ocks.org/mbostock/3019563

var w = 500 - margin.left - margin.right;
			var	h = 1400 - margin.top - margin.bottom;

var svg = d3.select("#gr")
						.append("svg")
						.attr("width", w + margin.left + margin.right)
						.attr("height", h + margin.top + margin.bottom)
						.append("g")
						.attr("transform", "translate("+margin.left+","+margin.top+")");

var xScaleAllP = d3.scale.linear()
							.range([0,w]);

var yScale = d3.scale.ordinal()
							.rangeRoundBands([0,h],0.1);

var xAxis = d3.svg.axis()
							.scale(xScaleAllP)
							.orient("top");

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left");

d3.csv("EGE2013_SUM_SHORT.csv", function(data) {
									
				data.sort(function(a, b) {
					return d3.descending(+a.StoBallPercent, +b.StoBallPercent);})
			
				xScaleAllP.domain([d3.min(data,function(d){return +d.StoBallPercent;}),d3.max(data, function(d){return +d.StoBallPercent;})]);
			
				yScale.domain(data.map(function(d){return d.Reg_name_eng;}));

svg.append("rect")
    				.attr("fill","yellow")
    				.attr("x", 0)
					.attr("y", 0) 
					.attr("width",w)				
					.attr("height",h/data.length*7)
					.attr("fill-opacity", 0.25)
					.attr("transform","translate(0,"+margin.top+")");

svg.selectAll("line")
					.data(data)
					.enter()
					.append("g")
					.attr("transform","translate("+0+","+7+")")
					.append("line")
					.attr("x1", 0)
					.attr("y1",function(d) {return yScale(d.Reg_name_eng);}) 				
					.attr("x2",function(d) {return xScaleAllP(d.StoBallPercent);})
					.attr("y2",function(d) {return yScale(d.Reg_name_eng);}) 
					
					
					.attr("stroke","#999999") 
					.attr("stroke-width",14)
					.append("title")
					.text(function(d) {
						return d.Reg_name_eng + "'s percent of students with maximun ball is " + d.StoBallPercent +"%";});
            		
                 	svg.append("g")
             		.attr("class", "x axis")
             		.attr("transform","translate(0,"+margin.top+")")
             		.call(xAxis);

svg.append("g")
             		.attr("class", "y axis")
             		.call(yAxis);

svg.append("line")
    				.attr("class", "arrow")
    				.attr("stroke-opacity", 0.5)
    				.attr("x1", 0)
    				.attr("x2", -margin.right-25)
    				.attr("y1", margin.top)
    				.attr("y2", h/data.length*7/2)
    				.attr("transform","translate("+(w+margin.right) + "," + (margin.top)+")");

});
	
				
		</script>
		</div>
		<div id="rightdiv">
		<p></br><b>To investigate:</b></br>
		Why these so different Russian regions are leaders in making perfect students?</p>
		</div>
		<div id="source">
		<p>SOURCE: <a href="https://www.ege.edu.ru/ru/main/satistics-ege/"> Unified State Examination official website </a> (in Russian), 2013</p>
		</div>
		</div>

</body>
</html>

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

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