Numero de persones rebent una pensio no contributiva cada 10 mil persones de mes de 65 anys en les comarques de Catalunya

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Showing the non contributive pensions</title>
	<style type="text/css">
	</style>
	<script tpye="text/javascript" src="https://d3js.org/d3.v3.js"></script>
</head>

<body>

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

d3.csv("noncontrib2.csv", function(dataset) {
			//console.log(data);

//Here we create a new variable within the dataset
			dataset.forEach(function(d) {d.noncp65 = d.Njubilacio/(d.Poblacio*d.Poblacio65/100);});

//Here we sort the data
			dataset.sort(function(a,b) {return d3.descending(+a.noncp65, +b.noncp65);});

//Here we sort the data with an alternative function
			//dataset.sort(function(a,b) {return b.Njubilacio - a.Njubilacio;});

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

rects.attr("x",0)
				.attr("y", function(d,i) {
					return i*10;
				})
				.attr("width", function(d) {
					//return d.Njubilacio/(d.Poblacio65/100*d.Poblacio)*10000;
					return d.noncp65*10000;
					//return d.Njubilacio/10
				})
				.attr("height",8)
				.attr("fill", function(d) {return "rgb(0, 0, " + (d.Njubilacio) + ")";})
				.append("title")
				.text(function(d) {
					//return d.Comarca + "'s number of non contrib pensionist is " + d.Njubilacio;
					return d.Comarca + "'s number of non contrib pensionist per 10 000 hab over 65 year is " + d.noncp65*10000;
				});

});

</script>

</body>
</html>

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

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