emamut · December 25, 2015 05:34 · harryRichardIzquierdo · Dec 25, 2015
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Conventional telephony users in Ecuador by province</title>

 	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 	<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: steelblue;
 			}

 			.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>Conventional telephony users in Ecuador by province</h1>
 	<p>TTUP conventional telephony users by province. Source: <a href="http://datosabiertos.gob.ec/catalogo/es/dataset/total-de-abonados-suscriptores-de-telefonia-fija-por-provincia">Datos Abiertos</a>, Julio 2015</p>

 	<script>
 		var width = 600;
 		var height = 400;
 		var padding = [ 20, 10, 20, 130 ];

 		var widthScale = d3.scale.linear()
 			.range([0, width - padding[1] - padding[3]]);

 		var heightScale = d3.scale.ordinal()
 			.rangeRoundBands([padding[0], height - padding[2]], 0.3);

 		var x_axis = d3.svg.axis()
 			.scale(widthScale)
 			.orient('bottom');

 		var y_axis = d3.svg.axis()
 			.scale(heightScale)
 			.orient('left');

 		var svg = d3.select('body')
 			.append('svg')
 			.attr('width', width)
 			.attr('height', height);

 		d3.csv('Total de Abonados (Suscriptores) de Telefonía Fija por Provincia.csv', function(response) {
 			response.sort(function (a, b) {
 				return d3.descending(+a.TTUP, +b.TTUP);
 			});

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

 			heightScale.domain(response.map(function(d){ return d.provincia; }));

 			var rects = svg.selectAll('rect')
 				.data(response)
 				.enter()
 				.append('rect')

 			rects.attr('x', padding[3])
 				.attr('y', function (value) {
 					return heightScale(value.provincia);
 				})
 				.attr('width', function (value) {
 					return widthScale(value.TTUP);
 				})
 				.attr('height', heightScale.rangeBand())
 				.attr("fill", "red")
 				.append('title')
 				.text(function (value) {
 					return 'Abonados TTUP ' + value.TTUP
 				});

 			svg.append('g')
 				.attr('class', 'x axis')
 				.attr('transform', "translate(" + padding[3] + "," + (height - padding[2]) + ")")
 				.call(x_axis);

 			svg.append('g')
 				.attr('class', 'y axis')
 				.attr('transform', "translate(" + (padding[3] - 5) + ",0)")
 				.call(y_axis);
 		});
 	</script>
 </body>
 </html>
diff --git a/Total de Abonados (Suscriptores) de Telefonía Fija por Provincia.csv b/Total de Abonados (Suscriptores) de Telefonía Fija por Provincia.csv
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Conventional telephony users in Ecuador by province</title>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<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: steelblue;
	}

	.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>Conventional telephony users in Ecuador by province</h1>
	<p>TTUP conventional telephony users by province. Source: <a href="http://datosabiertos.gob.ec/catalogo/es/dataset/total-de-abonados-suscriptores-de-telefonia-fija-por-provincia">Datos Abiertos</a>, Julio 2015</p>

	<script>
	var width = 600;
	var height = 400;
	var padding = [ 20, 10, 20, 130 ];

	var widthScale = d3.scale.linear()
	.range([0, width - padding[1] - padding[3]]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([padding[0], height - padding[2]], 0.3);

	var x_axis = d3.svg.axis()
	.scale(widthScale)
	.orient('bottom');

	var y_axis = d3.svg.axis()
	.scale(heightScale)
	.orient('left');

	var svg = d3.select('body')
	.append('svg')
	.attr('width', width)
	.attr('height', height);

	d3.csv('Total de Abonados (Suscriptores) de Telefonía Fija por Provincia.csv', function(response) {
	response.sort(function (a, b) {
	return d3.descending(+a.TTUP, +b.TTUP);
	});

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

	heightScale.domain(response.map(function(d){ return d.provincia; }));

	var rects = svg.selectAll('rect')
	.data(response)
	.enter()
	.append('rect')

	rects.attr('x', padding[3])
	.attr('y', function (value) {
	return heightScale(value.provincia);
	})
	.attr('width', function (value) {
	return widthScale(value.TTUP);
	})
	.attr('height', heightScale.rangeBand())
	.attr("fill", "red")
	.append('title')
	.text(function (value) {
	return 'Abonados TTUP ' + value.TTUP
	});

	svg.append('g')
	.attr('class', 'x axis')
	.attr('transform', "translate(" + padding[3] + "," + (height - padding[2]) + ")")
	.call(x_axis);

	svg.append('g')
	.attr('class', 'y axis')
	.attr('transform', "translate(" + (padding[3] - 5) + ",0)")
	.call(y_axis);
	});
	</script>
	</body>
	</html>
anho	mes	provincia	convencional	CDMA	TTUP
2015	Julio	AZUAY	153133	25617	691
2015	Julio	BOLIVAR	16054	5025	175
2015	Julio	CANAR	24413	5711	11
2015	Julio	CARCHI	21383	3057	203
2015	Julio	CHIMBORAZO	56245	5743	536
2015	Julio	COTOPAXI	44158	2024	242
2015	Julio	EL ORO	78584	2716	200
2015	Julio	ESMERALDAS	39202	3765	300
2015	Julio	GALAPAGOS	5125	2886	2
2015	Julio	GUAYAS	600702	2191	3209
2015	Julio	IMBABURA	63712	4363	935
2015	Julio	LOJA	55848	10167	202
2015	Julio	LOS RIOS	45210	643	28
2015	Julio	MANABI	103623	5998	179
2015	Julio	MORONA SANTIAGO	14513	5965	144
2015	Julio	NAPO	10593	1707	153
2015	Julio	ORELLANA	10546	1642	104
2015	Julio	PASTAZA	12695	1513	147
2015	Julio	PICHINCHA	818165	3841	9874
2015	Julio	SANTA ELENA	27926	705	27
2015	Julio	SANTO DOMINGO	55479	3941	301
2015	Julio	SUCUMBIOS	15895	1876	168
2015	Julio	TUNGURAHUA	86466	3175	1033
2015	Julio	ZAMORA CHINCHIPE	7725	5492	95