Merge branch '2_filtrado' of https://github.com/numeroteca/contratosm…

…enores into 2_filtrado
montera34 · Jun 16, 2017 · 144268b · 144268b
2 parents 0d2ec27 + b9028c2
commit 144268b
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 16 deletions.
diff --git a/css/style.css b/css/style.css
@@ -188,3 +188,7 @@ mark {
 	font-size: 25px;
 	font-weight: bold;
 }
+
+#select {
+	margin-bottom: 10px;
+}
diff --git a/index.html b/index.html
@@ -67,18 +67,42 @@ <h2>Contratos menores | Ayuntamiento de Valencia 2015</h2>
 			<p>Datos: <a href="http://www.valencia.es/ayuntamiento/ayuntamiento.nsf/vDocumentosTituloAux/EFF174B8AF93B148C1258075004465D7?OpenDocument&bdOrigen=ayuntamiento%2Fayuntamiento.nsf&idapoyo=&lang=1>Descargados de Ayuntamiento de Valencia</a>.</p>
 			<p>Se listan las 27 primeras empresas (de 957) con mayor importe contratado en 2015 (seg&uacute;n <a href="https://twitter.com/enrikuspf/status/768139411955605508">@enrikuspf</a>). Datos limpiados con <a href="http://openrefine.org/">OpenRefine</a>.</p>
 		</div>
-		<div class="dropdown"> 
-			<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Contratos por suministrador<span class="caret"></span></button>
-			<ul id="legend" class="dropdown-menu">
-			</ul>
-		</div><small>
-		<small><div id="legendcentros">Centros de gasto que emite contrato: </div></small>
-		<div id="legendcosas">Descripci&oacute;n del contrato: </div></small>
-		<div id="filters">Filtros
-			<div id="filterlayout1"></div>
-			<div id="filterlayout2"></div>
-			<div id="filterlayout3"></div>
+		<div class="row" id="select">
+			<div class="col-md-3">
+				<h5>Proveedor</h5>
+				<div class="dropdown"> 
+					<button class="btn btn-primary dropdown-toggle btn-sm" type="button" data-toggle="dropdown">Selecciona proveedor<span class="caret"></span></button>
+					<ul id="legend" class="dropdown-menu">
+					</ul>
+				</div>
+			</div>
+			<div class="col-md-7">
+				<h5>Política</h5>
+				<div id="legendcentros"></div>
+			</div>
+			<div class="col-md-2">
+				<h5>Descripci&oacute;n del contrato</h5>
+				<div id="legendcosas"></div></small>
+			</div>
+		</div>
+		<div id="filters" class="row">
+			<div class="col-md-3">
+				<div class="well well-sm">
+					<div id="filterlayout1" class="filtro "></div>
+				</div>
+			</div>
+			<div class="col-md-7">
+				<div class="well well-sm">
+					<div id="filterlayout2" class="filtro"></div>
+				</div>
+			</div>
+			<div class="col-md-2">
+				<div class="well well-sm">
+					<div id="filterlayout3" class="filtro"></div>
+				</div>
+			</div>
 		</div>
+		<div id="randomselect"></div>
 		<div id="vis"></div>
 		<div class="page-footer">
 			<p>Visualizaci&oacute;n realizada por <a href="http://twitter.com/numeroteca">@numeroteca</a>. Colaboran: <a href="https://twitter.com/elctrodnd21">@elctrodnd21</a> +  <a href="https://twitter.com/martgnz">@martgnz</a> | <a href="http://numeroteca.org">numeroteca.org</a>.<br>

diff --git a/js/dataviz.js b/js/dataviz.js
@@ -94,6 +94,7 @@ var legend = d3.select("#legend");
 var legendcosas = d3.select("#legendcosas").attr("class", "legendcosas");
 var legendcentros = d3.select("#legendcentros").attr("class", "legendcentros");
 var filtros = d3.select("#filters");
+var randomselect = d3.select("#randomselect");
 
 //Class filters
 var filters = [];
@@ -126,7 +127,7 @@ d3.tsv("data/viplist_val2015.tsv", function(error, data) {//reads the viplist.ts
 				d3.select(this).transition().duration(0).attr("class","btn-success"); //adds class success to button
 				//svg.selectAll('.personatable text').remove(	);
 			//	svg.selectAll('.persontable>text').remove();
-				filtros.select('#filterlayout1').html(d.people + " (contratos: " + d.ncontratos + ", importe: " + d.importe + "€)").style('opacity','1.0'); //write in description
+				filtros.select('#filterlayout1').html("<strong>" + d.people + "</strong> <br>Importe: <strong>" + d.importe + "€</strong><br>nº de contratos: " + d.ncontratos + "").style('opacity','1.0'); //write in description
 				//svg.selectAll('.description').text("");
 				// if (d.ncontratos == '-') { //don't show  ( ) if the field entidad is empty
 				// 		svg.select('.persontable').append('text').text(d.people).attr("class","vipname")
@@ -182,7 +183,7 @@ d3.tsv("data/thinglist_val2015.tsv", function(error, data) {//reads the thinglis
 				d3.select(this).transition().duration(0).attr("class","btn-success btn btn-default btn-xs thing"); //adds class success to button
 				//svg.selectAll('.personatable text').remove(	);
 		//		svg.selectAll('.persontable>text').remove()
-				filtros.select('#filterlayout3').html(d.cosa).style('opacity','1.0');
+				filtros.select('#filterlayout3').html("<strong>" + d.cosa + "</strong>").style('opacity','1.0');
 				//svg.selectAll('.description').text("");
 			// 	svg.select('.persontable').append('text').text(d.cosa).attr("class","vipname")
 			// 		.attr("x", function() { return (randomvar == 0) ? 40 : 0;})
@@ -223,7 +224,7 @@ d3.tsv("data/centroslist_val2015.tsv", function(error, data) {//reads the centro
 				svg.selectAll('svg .bar'+ filtersText).style("opacity",activeopacity).style("visibility","visible");
 				d3.select(this).transition().duration(0).attr("class","btn-success btn btn-default btn-xs centro"); //adds class success to button
 				//svg.selectAll('.personatable text').remove(	);
-				filtros.select('#filterlayout2').html(d.descripEs).style('opacity','1.0');
+				filtros.select('#filterlayout2').html("<strong>" + d.descripEs + "</strong>").style('opacity','1.0');
 		//		svg.selectAll('.persontable>text').remove()
 				//svg.selectAll('.description').text("");
 				// svg.select('.persontable').append('text').text(d.descripEs).attr("class","vipname")
@@ -246,7 +247,7 @@ d3.tsv("data/centroslist_val2015.tsv", function(error, data) {//reads the centro
 }); //end read thinglist.tsv file
 
 //On load write "Todos" in the selection description
-filtros.selectAll('div').html("Todos").style('opacity','0.3');
+filtros.selectAll('.filtro').html("Todos").style('opacity','0.3');
 
 //Enters data.tsv and starts the graph-----------------------------------------
 d3.tsv("data/data_val2015.tsv", type, function(error, data) {//reads the data.tsv file
@@ -344,7 +345,7 @@ topline.append('line')
 		});
 
 	//Random button: posiciona las barras aleatoriamente en el eje vertical, manteniendo su posición horizontal por fecha
-	legendcosas.append("div").attr("class","inactive btn btn-default btn-xs pull-right")
+	randomselect.append("div").attr("class","inactive btn btn-default btn-xs pull-right")
 		.text("Posición vertical aleatoria")
 		.attr("title","Posiciona las barras que representan los gastos aleatoriamente, manteniendo la posición por fecha")
 		.attr("id","random")