Week4: Russian airports 2012 rankings

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

rect: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> Pax volumes year total,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=1000;
		var h=1000;
		var padding = [20,10,20,160];

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

var widthScale = d3.scale.linear().range([0,w - padding[1] - padding[3]]);
		var heightScale = d3.scale.ordinal().rangeRoundBands([padding[0],h-padding[2]],0.1);

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

/*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" & d.category=="pax" & d.subcategory=="total");
				});

widthScale.domain([0, d3.max(data, function(d) {
							return +d.v.replace(/\s+/g, '');
						})]);

heightScale.domain(data.map(function(d) {
					return d.airport;
			}));

/*
			*/
			var airports = svg.selectAll("rect")
				.data(data)
				.enter()
				.append("rect");

airports.filter(function(d) {
					return (d.year=="2012" & d.category=="pax" & d.subcategory=="total");
				})
				.attr("x",padding[3])
				.attr("y", function(d) {
					return heightScale(d.airport);
				})
				.attr("width",function(d) {
					return widthScale(+d.v.replace(/\s+/g, ''));
				})
				.attr("fill", "steelblue")
				.attr("height",heightScale.rangeBand())
				.append("title")
				.text(function(d) {
					return d.airport + " " + d.v;
				});

var xAxis = d3.svg.axis ()
						.scale(widthScale)
						.orient("bottom");
			var yAxis = d3.svg.axis ()
						.scale(heightScale)
						.orient("left");
			
			svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(" + padding[3]+","+(h-padding[2])
					+ ")")
				.call(xAxis);

svg.append("g")
				.attr("class", "y axis")
				.attr("transform", "translate(" + (padding[3])+",0)")
				.call(yAxis);				
		});
		</script>
	</body>
</html>

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

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