O Êxodo Português (1994-2014)

<!DOCTYPE html>
<html>
<head>
	<title>O Êxodo Português (1994-2014) </title>
	<meta charset="UTF-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
	<style type="text/css">

body {
			text-align: left;
			font-family: Helvetica, Arial, Sans-serif;
			margin-left: 30px;
		}

h1 {
			font-size: 2em;
			margin-bottom:4px;
		}

h2 {
			font-style: italic;
			font-weight: normal;
			font-size: 1,5em;
			margin-top: 0px;
		}

rect:hover {
			fill:rgb(201,84,74)!important;
		}

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

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

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

.y.axis text {
			font-size: 18px;
		}

</style>

</head>
<body>

<h1>O Êxodo Português (1994-2014)</h1>
	<h2>Retrato de uma crise demográfica</h2>

var w = 900;
	var h = 600;
	var padding = [20,10,20,50];

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);

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

var xAxis = d3.svg.axis()
					.scale(widthScale)
					.orient("bottom");

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

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

console.log(data);

data.sort(function(a,b){
			return d3.descending(+a.ano , +b.ano);
		});

widthScale.domain([0,d3.max(data, function(d){
				return +d.n_emigrantes;
		})]);

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

//var points = [50,100,150,200,250,300,350,400,450,500,550]
		var i;

for (i = 0; i < 11; i++) {

svg.append("line")
				.attr("x1", padding[3] + widthScale(i * 5000))
				.attr("y1", padding[0]+8)
				.attr("x2", padding[3] + widthScale(i * 5000))
				.attr("y2", h - padding[2])
				.attr("style", "stroke:rgb(187,196,196);stroke-width:1");
			
		};

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

rect .attr("x",padding[3])
			.attr("y",function(d){
				return heightScale(d.ano);
			})
			.attr("width",function(d){
				return widthScale(d.n_emigrantes);
			})
			.attr("height",heightScale.rangeBand())
			.attr("style","stroke: gray; fill:rgb(4,91,114);")

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>

<p>Source: <a href="https://www.pordata.pt">Pordata</a><br>
Autoria: <a href="https://www.ruimgbarros.com"><em>Rui Barros</em></p>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js