Russian airports 2000-2012 pax line chart

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

path:hover,
		g.highlight path:hover {
			stroke:orange;
			stroke-width: 2;
		}
		
		text.show
		{
			opacity: 0;
		}
		text.highlight
		{
			opacity:1;
			font-size: 10px;
		}

g.highlight path {
			stroke:steelblue;
			stroke-width: 2;
		}
		text {
			font-size:10px;
			font-family: Helvetica, Arial, sans-serif;
		}
		.axis path,
		.axis line {
			fill:none;
			stroke:black;
			shape-rendering: crispEdges;
		}

path {
			stroke:gray;
			stroke-width: 0.5;
		}

.axis text {
			font-family: sans-serif;
			font-size: 11px;
		}
/*
		.y.axis path,
		.y.axis line {
			opacity: 0;
		}
*/
		</style>
	</head>
	<body>

<h1>Russian airport rankings 2000-2012</h1>

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=620;
		var h=300;
		var padding = [20,120,40,50];

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

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 dateFormat = d3.time.format("%Y");
		
		d3.csv("columnised3.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 line = d3.svg.line()
				.x(function(d){
					return xScale(dateFormat.parse(d.year));
				})
				.y(function(d){
					return yScale(d.paxtotal);
				});

var filtered = data.filter(function(d) {
					return (d.airport=="Калининград(Храброво)");
				});

var filtered = d3.nest()
							.key(function(d) {
								return d.airport;
							})
							.entries(data);

var dateFormat = d3.time.format("%Y");

xScale.domain([
				d3.min(data, function(d) {
					return dateFormat.parse(d.year);
				}), 
				d3.max(data, function(d) {
				return dateFormat.parse(d.year);
				})
			]);

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

/*
			*/

groups.append("title")
				.text(function(d) {
					return d.key;
				});
			groups.selectAll("path")
				.data(function(d) {
					return	[d.values];
				})
				.enter()
				.append("path")
				.attr("class","line KGD")
				.attr("d",line)
				.attr("fill","none")
				.attr("stroke","steelblue")
				.attr("stroke-width",2)
			
			var labels = svg.selectAll("text")
				.data(filtered)
				.enter()
				.append("text")
				.attr("y", function(d){
					return yScale(d3.max(d.values, function(d2) {
						return +d2.paxtotal;
					}));
					
				})
        		.attr("x",w-160)
				.text(function(d){
					return d.key;
				})
				.classed("show",true)
				.classed("highlight", function(d) {
					return (d.key=="Москва(Домодедово)"||d.key=="Екатеринбург(Кольцово)"
							||d.key=="Калининград(Храброво)");
				});

svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(0," +(h-padding[2] +10)
					+ ")")
				.call(xAxis);

//Create Y axis

svg.append("g")
				.attr("class", "y axis")
				.attr("transform", "translate(" + (padding[3]-10)+",0)")
				.call(yAxis);

/*
			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