Scatterplot

<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8">
		<title>D3 Project Template</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<link rel="stylesheet" href="style.css">
		<style type="text/css">
		
		body {
			background-color: white;
			font-family: Helvetica, Arial, sans-serif;
		}	
		h1 {
			font-size: 24px;
			margin:0;
		}

p {
			font-size:14px;
			margin:10px 0 0 0 ;
		}

svg {
			background-color: white;
		}

circle:hover {
			fill:orange;
		}

.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;
		}
*/
		</style>
	</head>
	<body>

<h1>Russian airport rankings 2012</h1>

<p> X axis - dom '000 pax, <br>
		Y axis - int '000 pax, <br>
		Values - 2012 year total <br>
		Source: <a href="https://ru.wikipedia.org/wiki/%D0%A1%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_%D0%BD%D0%B0%D0%B8%D0%B1%D0%BE%D0%BB%D0%B5%D0%B5_%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B6%D0%B5%D0%BD%D0%BD%D1%8B%D1%85_%D0%B0%D1%8D%D1%80%D0%BE%D0%BF%D0%BE%D1%80%D1%82%D0%BE%D0%B2_%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D0%B8">Wikipedia.org</a></p>

var w=320;
		var h=300;
		var padding = [20,10,20,50];

var svg = d3.select("body")
					.append("svg")
					.attr("width",w)
					.attr("height",h);

var xScale = d3.scale.linear().range([0,w - padding[1] - padding[3]]);
		var yScale = d3.scale.linear().range([padding[0],h - padding[2]]);

d3.csv("data.csv", function(data) {

// REMOVE SPACES d.v.replace(/\s+/g, '');

/*data.sort(function(a,b) {
				return d3.descending(a.v.replace(/\s+/g, ''),b.v.replace(/\s+/g, ''));
			});
	`		*/

var filtered = data.filter(function(d) {
					return (d.year=="2012");
				});

xScale.domain([0, d3.max(filtered, function(d) {
				return +d.paxint;
			})]);

yScale.domain([d3.max(filtered,function(d) {
				return +d.paxint;
				}),0]);

/*
			*/
			var circles = svg.selectAll("circle")
				.data(filtered)
				.enter()
				.append("circle");

circles
				.attr("cx",function(d) {
					return -100;
				})
				.attr("cy", function(d) {
					return -100;
				})
				.attr("fill", "steelblue")
				.attr("r",0.1)
				.append("title")
				.text(function(d) {
					return d.airport + " " + d.paxtotal;
				});

var xAxis = d3.svg.axis ()
						.scale(xScale)
						.orient("bottom")
						.tickFormat(function(d) {
							return d/1000;
						})
						.ticks(6);
			var yAxis = d3.svg.axis ()
						.scale(yScale)
						.orient("left")
						.tickFormat(function(d) {
							return d/1000;
						})
						.ticks(6);
			
			svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(" + padding[3]+","+(h-padding[2])
					+ ")")
				.call(xAxis);

//Create X axis label

//Create X axis label   
		svg.append("text")
		.attr("x", w / 2 )
        .attr("y",  h + padding[2])
        .style("text-anchor", "middle")
        .text("dom, '000 pax");

svg.append("g")
				.attr("class", "y axis")
				.attr("transform", "translate(" + (padding[3])+",0)")
				.call(yAxis);
			
			svg.append("text")
	        .attr("transform", "rotate(-90)")
	        .attr("y", 0-padding[3])
	        .attr("x",0 - (h / 2))
	        .attr("dy", "1em")
	        .style("text-anchor", "middle")
	        .text("int, 000 pax");

circles.sort(function(a,b) {
						return d3.ascending(+a.paxtotal,+b.paxtotal);
					})
					.transition()
					.delay(function(d,i) {
						return i*50;
					})
					.duration(2000)
					.attr("r",4)
					.attr("cx",function(d) {
										return xScale(d.paxdom)+padding[1]+padding[3];
									})
					.attr("cy", function(d) {
										return yScale(+d.paxint);
									})					;				
		});
		</script>
	</body>
</html>

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

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