scotthmurray/emigrantes.csv

## emigrantes.csv

          
            ano
            n_emigrantes

            
              1994
              7845

            
              1995
              8109

            
              1996
              9598

            
              1997
              7254

            
              1998
              7935

            
              1999
              4077

            
              2000
              4692

            
              2001
              5396

            
              2002
              8813

            
              2003
              6687

            
              2004
              6757

            
              2005
              6360

            
              2006
              5600

            
              2007
              7890

            
              2008
              20357

            
              2009
              16899

            
              2010
              23760

            
              2011
              43998

            
              2012
              51958

            
              2013
              53786

            
              2014
              49572

## index.html
<!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>

<script type="text/javascript">

	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="http://www.pordata.pt">Pordata</a><br>
Autoria: <a href="http://www.ruimgbarros.com"><em>Rui Barros</em></p>


</body>
</html>
	ano	n_emigrantes
	1994	7845
	1995	8109
	1996	9598
	1997	7254
	1998	7935
	1999	4077
	2000	4692
	2001	5396
	2002	8813
	2003	6687
	2004	6757
	2005	6360
	2006	5600
	2007	7890
	2008	20357
	2009	16899
	2010	23760
	2011	43998
	2012	51958
	2013	53786
	2014	49572
	<!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>

	<script type="text/javascript">

	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="http://www.pordata.pt">Pordata</a><br>
	Autoria: <a href="http://www.ruimgbarros.com"><em>Rui Barros</em></p>



	</body>
	</html>