Abril.csv

-colore
-9
-8
-7
-6
-5
-4
-3
-2
-1
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
-5
\ No newline at end of file

Agosto.csv

-colore
-1
-2
-3
-4
-5

Informe Precios/Abril.csv

+provincia,pvpG95,pvpGOA
+Álava,182.4,184.8
+Ávila,183.4,184.9
+Albacete,180,184.3
+Alicante,180.7,183.7
+Almería,178.7,180.1
+Asturias,181.9,185.4
+Badajoz,180,184.3
+Illes Balears,185.3,189.1
+Barcelona,181.3,184.1
+Burgos,182.7,183.6
+Córdoba,179.5,182
+Cáceres,179.6,183.5
+Cádiz,178.6,180.6
+Cantabria,182.2,183.5
+Castellón,179.7,181.7
+Ciudad Real,179.1,183.4
+A Coruña,182.6,184
+Cuenca,182.1,184
+Girona,180.7,182.9
+Granada,179,181.8
+Guadalajara,180.9,183.8
+Guipúzcoa,182.7,186.8
+Huelva,179.6,183.8
+Huesca,178.2,181.2
+Jaén,179.4,185.1
+León,182.4,184.8
+Lleida,177.9,180.7
+Lugo,182.1,184.9
+Málaga,181.9,183.8
+Madrid,181.5,184.9
+Murcia,178.6,181.2
+Navarra,180.2,181.8
+Ourense,181.6,184.5
+Palencia,180.3,182.5
+Pontevedra,181.3,183.8
+La Rioja,180.4,181.9
+Salamanca,180.3,183.7
+Segovia,181.6,183.4
+Sevilla,180.2,182.3
+Soria,179.1,181.6
+Tarragona,179.3,181.2
+Teruel,179,180.1
+Toledo,182,185.7
+Valencia,180.2,181.4
+Valladolid,178.9,180.9
+Vizcaya,181.6,185.3
+Zamora,180.8,183.2
+Zaragoza,179.7,180.9

Informe Precios/Agosto.csv

+provincia,pvpG95,pvpGOA
+Álava,183.3,186.9
+Ávila,184.9,186.9
+Albacete,181.8,186.3
+Alicante,180.4,184.5
+Almería,179.4,182.5
+Asturias,183.8,185.6
+Badajoz,180.7,186
+Illes Balears,185.5,192
+Barcelona,180.7,184
+Burgos,184.1,185.1
+Córdoba,179.4,183.3
+Cáceres,179.7,186
+Cádiz,179.7,183.5
+Cantabria,184.1,186
+Castellón,181,184.6
+Ciudad Real,179,185
+A Coruña,184.3,185.3
+Cuenca,182.7,187.4
+Girona,181.5,185.4
+Granada,180.3,183.2
+Guadalajara,178.6,185.1
+Guipúzcoa,183.9,188.8
+Huelva,180.7,185.8
+Huesca,179.4,184
+Jaén,180.8,186.4
+León,182.5,185.4
+Lleida,178.3,181.5
+Lugo,182,186.2
+Málaga,181.9,185.8
+Madrid,180.4,186.2
+Murcia,178.8,182.4
+Navarra,183.7,182.9
+Ourense,184.1,187.2
+Palencia,181.8,185.1
+Pontevedra,182.8,186.5
+La Rioja,185,185.9
+Salamanca,181.4,186.6
+Segovia,182,184.2
+Sevilla,180.6,185.1
+Soria,180,182.7
+Tarragona,178,181.7
+Teruel,180.2,183.7
+Toledo,181.2,186.7
+Valencia,12,184.2
+Valladolid,179.9,183.3
+Vizcaya,181.8,187
+Zamora,182.3,185.8
+Zaragoza,179,183.7

Informe Precios/Enero.csv

+provincia,pvpG95,pvpGOA
+Álava,153.8,141.7
+Ávila,153,141.7
+Albacete,149.2,139.2
+Alicante,150.7,138.3
+Almería,147.5,135.5
+Asturias,152.1,140.2
+Badajoz,149.5,139.2
+Illes Balears,158.4,146.7
+Barcelona,151.5,138.7
+Burgos,152.6,139.9
+Córdoba,149.3,137.6
+Cáceres,150.3,139.3
+Cádiz,149.7,136.5
+Cantabria,151.8,139.5
+Castellón,150.3,138.1
+Ciudad Real,148.5,137.7
+A Coruña,152.2,140.2
+Cuenca,151.9,139.6
+Girona,151.9,137.6
+Granada,150.7,137.3
+Guadalajara,153.5,141.1
+Guipúzcoa,155.3,143.4
+Huelva,148.9,138.7
+Huesca,150,137
+Jaén,149,139.2
+León,152.6,142
+Lleida,148.3,135.4
+Lugo,152.3,141.2
+Málaga,153.1,140.1
+Madrid,153.8,141.8
+Murcia,148,135.6
+Navarra,149.7,137.2
+Ourense,152.4,141.6
+Palencia,151.8,140.5
+Pontevedra,151.5,140.3
+La Rioja,150.9,139.3
+Salamanca,150.5,139.5
+Segovia,152.8,140.3
+Sevilla,150.9,138.1
+Soria,150.3,138.3
+Tarragona,150.9,138.4
+Teruel,148.5,134.9
+Toledo,151.9,141
+Valencia,148.5,135.1
+Valladolid,150.8,138.8
+Vizcaya,153.9,142.4
+Zamora,150.1,139.3
+Zaragoza,150.4,136.9

Informe Precios/Febrero.csv

+provincia,pvpG95,pvpGOA
+Álava,161.7,149.9
+Ávila,160.9,150.1
+Albacete,157.1,147.6
+Alicante,158.8,147.2
+Almería,154.9,143.7
+Asturias,160,148.9
+Badajoz,156.7,147
+Illes Balears,166.1,155.1
+Barcelona,159,147.7
+Burgos,160,148
+Córdoba,155.8,145.4
+Cáceres,157.1,147
+Cádiz,156.8,144.7
+Cantabria,159.6,147.8
+Castellón,158.3,146
+Ciudad Real,155.8,146
+A Coruña,159.7,148.1
+Cuenca,159.7,148
+Girona,158.8,146.5
+Granada,157.5,146.1
+Guadalajara,160.5,149.1
+Guipúzcoa,161.7,151.3
+Huelva,156.6,147
+Huesca,157,145.3
+Jaén,156.1,147.8
+León,160.4,150.2
+Lleida,155.7,144.1
+Lugo,160.4,149.7
+Málaga,160.1,148.1
+Madrid,160.9,149.8
+Murcia,156,144.5
+Navarra,156.6,145.5
+Ourense,160,149.3
+Palencia,160.1,148.9
+Pontevedra,159.6,148.5
+La Rioja,158,147
+Salamanca,159.1,148.4
+Segovia,159.7,148.2
+Sevilla,157.6,145.9
+Soria,157.8,146.4
+Tarragona,159,146.6
+Teruel,155.9,142.8
+Toledo,159.2,149.2
+Valencia,155.9,143.4
+Valladolid,157.9,147.3
+Vizcaya,161.1,151
+Zamora,157.9,147.7
+Zaragoza,158.3,145.1

Informe Precios/Julio.csv

+provincia,pvpG95,pvpGOA
+Álava,198.1,193.9
+Ávila,198.1,194.1
+Albacete,198.1,194.3
+Alicante,198.4,194.6
+Almería,198.5,194.7
+Asturias,198.6,195.3
+Badajoz,198.6,195.3
+Illes Balears,198.6,195.3
+Barcelona,198.7,195.4
+Burgos,198.8,195.5
+Córdoba,199.1,195.6
+Cáceres,199.1,195.8
+Cádiz,199.2,196
+Cantabria,199.6,196.1
+Castellón,199.6,196.1
+Ciudad Real,199.8,196.3
+A Coruña,199.9,196.4
+Cuenca,200,196.5
+Girona,200,196.5
+Granada,200.1,196.5
+Guadalajara,200.1,197
+Guipúzcoa,200.1,197
+Huelva,200.3,197.2
+Huesca,200.3,197.2
+Jaén,200.3,197.4
+León,200.8,197.4
+Lleida,200.8,197.5
+Lugo,200.9,197.6
+Málaga,201.1,197.7
+Madrid,201.2,197.7
+Murcia,201.2,197.7
+Navarra,201.3,197.8
+Ourense,201.3,197.9
+Palencia,201.4,198
+Pontevedra,201.6,198
+La Rioja,201.7,198.1
+Salamanca,201.9,198.1
+Segovia,201.9,198.1
+Sevilla,202.2,198.1
+Soria,202.4,198.2
+Tarragona,202.6,198.6
+Teruel,202.9,198.8
+Toledo,203.1,198.9
+Valencia,203.3,199
+Valladolid,203.4,199
+Vizcaya,203.7,199.1
+Zamora,203.8,199.8
+Zaragoza,204.8,203.1

Informe Precios/Junio.csv

+provincia,pvpG95,pvpGOA
+Álava,215.4,205.6
+Ávila,213.5,204.3
+Albacete,210.4,204.2
+Alicante,210.8,203.7
+Almería,207.3,200.6
+Asturias,214.9,205.3
+Badajoz,209,203.9
+Illes Balears,217,210.9
+Barcelona,211.3,203.9
+Burgos,214.2,204
+Córdoba,209.3,202.6
+Cáceres,209.8,204
+Cádiz,210.2,202.1
+Cantabria,214.4,204.2
+Castellón,210.5,202.9
+Ciudad Real,208.7,203.2
+A Coruña,215.6,204.9
+Cuenca,212,204.5
+Girona,211.2,204.2
+Granada,210.2,202.8
+Guadalajara,210,203.7
+Guipúzcoa,216.5,207.1
+Huelva,209.7,203.7
+Huesca,208.5,202
+Jaén,208.8,204.5
+León,214.5,205.1
+Lleida,207.1,199.7
+Lugo,214.3,205.3
+Málaga,212.6,204.6
+Madrid,212.4,205.6
+Murcia,208.3,201.4
+Navarra,212.2,201.2
+Ourense,215.2,205.8
+Palencia,212.6,203.1
+Pontevedra,214.7,204.9
+La Rioja,212.8,202.5
+Salamanca,213.4,204.9
+Segovia,212.7,203.4
+Sevilla,209.6,202.4
+Soria,211,202.1
+Tarragona,209.8,201.8
+Teruel,207.2,200.1
+Toledo,211.2,205.1
+Valencia,209.8,202.2
+Valladolid,210.5,201.6
+Vizcaya,213.9,205.8
+Zamora,212.4,205.1
+Zaragoza,210.2,201.7

Informe Precios/Marzo.csv

+provincia,pvpG95,pvpGOA
+Álava,181.6,179.5
+Ávila,181.7,178.7
+Albacete,178.2,177.3
+Alicante,179.5,177
+Almería,177.5,174.6
+Asturias,180.2,178.4
+Badajoz,177.9,177.3
+Illes Balears,184.3,182.4
+Barcelona,179.6,178
+Burgos,180.9,176.6
+Córdoba,177.4,174.5
+Cáceres,177.6,176.7
+Cádiz,177.7,174.7
+Cantabria,181.1,178.2
+Castellón,178.4,175.5
+Ciudad Real,177,176.5
+A Coruña,181.5,178.9
+Cuenca,179.8,177
+Girona,178.9,177.1
+Granada,178.1,175.7
+Guadalajara,179.8,177.3
+Guipúzcoa,181.5,180.8
+Huelva,177.4,176.5
+Huesca,176.2,174.3
+Jaén,177.2,177.6
+León,181.3,179
+Lleida,175.1,173.5
+Lugo,181.1,179.3
+Málaga,180.6,177.7
+Madrid,181,179.3
+Murcia,177.6,175.2
+Navarra,178.5,175.6
+Ourense,180.5,178.3
+Palencia,179.2,176.1
+Pontevedra,180.1,178.2
+La Rioja,178.2,175.5
+Salamanca,179.4,178.1
+Segovia,180.2,176.9
+Sevilla,179.2,176.4
+Soria,178,175.6
+Tarragona,177.9,175.1
+Teruel,175.1,171.1
+Toledo,180.2,179.2
+Valencia,178.5,174.8
+Valladolid,178.3,176
+Vizcaya,180.8,179.8
+Zamora,179.1,177.6
+Zaragoza,178.2,173.9

Practica0.2.html

-<!DOCTYPE html>
-<html>
-    <head>
-        <!-- Load D3 from site -->
-        <!-- <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> -->
-        <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>-->
-        <script src="http://d3js.org/d3.v7.min.js" charset="utf-8"></script>
-        <title>EsTiempo EsTiempo</title>
-    </head>
-<body>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
-  <script src="https://unpkg.com/topojson-client@3"></script>
-
-  <style>
-    #body{
-      background-color: skyblue;
-    }
-
-    #map-1 {
-      background-color: skyblue;
-    }
-    .province {
-      stroke: yellow;
-      stroke-width: .5px;
-      stroke-dasharray: 3 3;
-    }
-    
-    .province:hover {
-      fill: crimson;
-      stroke: orange;
-      stroke-width: 2px;
-      stroke-dasharray: none;
-    
-    }
-
-    .province:active {
-      fill: black;
-      stroke: orange;
-      stroke-width: 2px;
-      stroke-dasharray: none;
-    }
-
-  .province:checked {
-      fill: rgb(118, 16, 116);
-      stroke: orange;
-      stroke-width: 2px;
-      stroke-dasharray: none;
-    }
-    
-    .graticule {
-      fill: none;
-      stroke: #FFF;
-      stroke-width: .6px;
-      stroke-opacity: 0.5;
-    }
-
-    #titulo{
-      font-size-adjust: 1;
-      font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
-      color: purple;
-      background-color: skyblue;
-    }
-    </style>
-    
-    <div id="titulo"><center>Proyección de prueba</div>
-
-      <center>
-    <select id="dropMeses">
-      <option disable selected value="nulo" >-Seleccione un mes-</option>
-      <option value="Informes Precios/Abril.csv">Abril</option>
-      <option value="Informes Precios/Agosto.csv">Agosto</option>
-      <option value="multi">manos en el aire todo el mundo</option>
-      <option value="pin">Esto es</option>
-      <option value="pinnoborders">creeper</option>
-      <option value="pinhard">VS</option>
-      <option value="pinhardnoborders">zombie</option>
-      <option value="placelabels">Tu no lo sabes te estoy vigilando</option>
-      <option value="typeeasy">Desde la distancia me estoy acercando</option>
-      <option value="typeauto">Soy una sombra y tu no te das cuenta</option>
-      <option value="type">Hola que tal, date la vuelta</option>
-    </select>
-
-    <center><svg id="map-1" width="700" height="500"></svg></center>
-
-
-    <script>
-    
-    var svg = d3.select("#map-1"),
-      width = +svg.attr("width"),
-      height = +svg.attr("height");
-
-    // Creamos la proyección  (ver Proyecciones abajo)
-    var projection = d3.geoMercator()
-      .scale(2200)
-      .center([0, 40])
-      .translate([width / 1.7, height / 2]);
-
-    // Creamos el path añadiendo la proyección
-    var path = d3.geoPath(projection);
-
-    var select = document.getElementById('dropMeses');
-    select.addEventListener('change',
-      function(){
-          var selectedOption = this.options[select.selectedIndex];
-
-
-      // Obtenemos las provincias de España en formato geojson
-      var españa = "spain-provinces.json";
-      d3.json(españa, function(error, spain){
-        if (error) throw error;  // Manejamos cualquier posible error
-
-        d3.csv(selectedOption.value, function(data){
-
-          data.forEach(el => {
-            console.log("data")
-            console.log(el)
-          });
-          
-          
-          var duro=String(data[2].colore*111);  //TODO HACER MATES BIEN
-          var color="#"+duro;
-
-          console.log("svg ANTES")
-          console.log(svg)
-
-          console.log("group ANTES")
-          console.log(group);
-          console.log("areas ANTES")
-          console.log(areas);
-          console.log("json españa")
-          var provincia = spain.features;
-          console.log(provincia)
-          
-          var group = svg.selectAll("g")  // Creamos un grupo para cada provincia
-            .data(spain.features)
-            .enter()
-            .append("g")
-            .attr("fill", color);
-
-            console.log("group DESPUES")
-            console.log(group)
-            console.log("svg DESPUES")
-            console.log(svg)
-
-            svg.select("g").attr("fill", "#111");
-          
-          // Para cada grupo añadimos el path correspondiente
-          var areas = group.append("path")
-            .attr("d", path)
-            .attr("class", "province");
-
-            console.log("svg TARDE")
-            console.log(svg)
-
-        });
-      });
-    });
-    </script>
-    </body>
-    
-</html>
\ No newline at end of file

PracticaFinal.html

+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01">
+<html>
+<head>
+  <meta charset="utf-8">
+
+  <script src="https://d3js.org/d3.v6.min.js" charset="utf-8"></script>
+  
+  <script type="text/javascript" src="./elMapa.js"></script>  
+
+  
+  <script type="text/javascript" src="./handlers.js"></script>
+
+  <link rel="stylesheet" type="text/css" href="./style.css">
+
+  <title>Precio de los carburantes</title>
+
+</head>
+
+<body>
+  <h1>Precios carburantes en España</h1>
+
+
+    <div id = 'selectYear'>
+      <select id="dropMeses" oninput="handlerSelectMes()">
+        <option value="./Informes Precios/Enero.csv">Enero</option>
+        <option value="./Informes Precios/Febrero.csv">Febrero</option>
+        <option value="./Informes Precios/Marzo.csv">Marzo</option>
+        <option value="./Informes Precios/Abril.csv">Abril</option>
+        <option value="./Informes Precios/Mayo.csv">Mayo</option>
+        <option value="./Informes Precios/Junio.csv">Junio</option>
+        <option value="./Informes Precios/Julio.csv">Julio</option>
+        <option value="./Informes Precios/Agosto.csv">Agosto</option>
+        <option value="./Informes Precios/Septiembre.csv">Septiembre</option>
+      </select>
+    </div>
+
+    <div id="contenedorPrincipal">
+      <div id= 'mapa'></div>
+      <div id = "infoResumen"></div>
+
+      <div id="variablesLeyenda">
+        <div id = 'selectVar'>
+          <select name="selectVarList" id="vars" onchange="handlerListaCarb()" value="gasolina">
+            <option value="gasolina">Gasolina 95</option>
+            <option value="gasoil">Gasóleo A</option>
+              
+          </select>
+        </div>
+
+        <div id ='leyenda'></div>
+      </div>
+
+    </div>
+              
+
+  
+    <script>
+      // Rutas de datos
+      const MAP_DATA = "./spain-provinces.json";
+      var data_mes = "./Informes Precios/Enero.csv";
+      // Estado inicial
+      plotCyL("./Informes Precios/Enero.csv", "gasolina");
+    </script>
+
+    <footer id="footer">
+      
+      <p> Proyecto de Jorge Villanueva Sanz · 2022/2023 · Diseño y Evaluación de Sistemas Interactivos<p>
+
+      <p><a
+              href="https://gitlab.inf.uva.es/jorvill/preciocarburantes">Gitlab con el Proyecto</a>
+    </footer>
+
+</body>
+</html>

elMapa.js

+/*******************************
+ ** By: Jorge Villanueva Sanz **
+ *******************************/
+/**
+ * Referencias utilizadas
+ *  Proyectos similares
+ *  https://gitlab.inf.uva.es/desi_22-23/icendiossequia
+ * 
+ *  Otras
+ *  - https://d3-graph-gallery.com/graph/choropleth_hover_effect.html
+ */
+
+// Definimos area de dibujo
+const WIDTH_MAP = 700;
+const HEIGHT_MAP = 400;
+
+// Paleta de colores en formato diccionario
+const paleta = {
+  "gasolina":   [ "rgb( 161, 161, 161)",
+                  "rgb( 138, 138, 138)",
+                  "rgb( 92,  92,  92)",
+                  "rgb( 69,  69,  69)",
+                  "rgb( 23,  23,  23)"],
+
+   "gasoil":    [ "rgb(  44, 207, 230)",
+                  "rgb(  56, 173, 190)",
+                  "rgb(  52, 145, 175)",
+                  "rgb(  44, 82, 156)",
+                  "rgb(  36,  56,  94)"]};
+
+// Limites de cada grupo
+
+const GASOLINA_MIN = 161;
+const GASOLINA_MEDMIN = 175;
+const GASOLINA_MEDMAX = 189;
+const GASOLINA_MAX = 203;
+
+const GASOIL_MIN = 148;
+const GASOIL_MEDMIN = 163;
+const GASOIL_MEDMAX = 177;
+const GASOIL_MAX = 192;
+
+
+// La utilizamos para obtener información sobre si es la primera o la segunda pulsación sobre la misma provincia
+var lastProv;
+
+
+/**
+ * Función principal.
+ * Muestra los datos para el año y variable seleccionada
+ * 
+ * @param {int} year Obtenido del slider
+ * @param {String} selectedVar Obtenido de la selectBox
+ */
+function plotCyL(mes, selectedVar){
+  
+  // Eliminamos todo lo que pudiera haber anteriormente
+  d3.select("#mapa").selectAll("svg").remove();
+
+  
+  // Abrimos el geoJson
+  d3.json(MAP_DATA).then((mapData)=>{
+
+    var svg = d3.select("#mapa")
+            .append("svg")
+            .attr("width", WIDTH_MAP)
+            .attr("height", HEIGHT_MAP);
+              
+    // Proyeccion
+    var projection = d3.geoMercator();
+    var geoPath = d3.geoPath(projection);
+              
+    // Calculo tamaño original, calculando los valores maximos y minimos de las coordenadas x e y del mapa
+    var Xmax = 0;
+    var Xmin = WIDTH_MAP;
+    var Ymax = 0;
+    var Ymin = HEIGHT_MAP;
+
+    numPaths = mapData.features.length;
+    
+    mapData.features.forEach(function(data2,i)
+    {
+      var bordeInfX = geoPath.bounds(data2)[0][0];
+      if (bordeInfX < Xmin) 
+      {
+        Xmin = bordeInfX;
+      }
+
+      var bordeInfY = geoPath.bounds(data2)[0][1];
+      if (bordeInfY < Ymin)
+      {
+        Ymin = bordeInfY;
+      }
+
+      var bordeSupX = geoPath.bounds(data2)[1][0];
+      if (bordeSupX > Xmax) 
+      {
+        Xmax = bordeSupX;
+      }
+
+      var bordeSupY = geoPath.bounds(data2)[1][1];
+      if (bordeSupY > Ymax)
+      {
+        Ymax = bordeSupY;
+      }
+                
+    });
+              
+
+    var porcentajeAjuste = 1.8 // se ajusta el grafico a este porcentaje de la ventana
+
+    var proporcionX = WIDTH_MAP / (Xmax - Xmin); // se ve cuantas veces puedo aumentar en esta dimension
+    var proporcionY = HEIGHT_MAP / (Ymax - Ymin); // idem para Y
+
+    if (proporcionX < proporcionY) // ajusto al porcentaje maximo en la dimension X
+    { 
+      var escala = Math.floor((WIDTH_MAP*porcentajeAjuste)/(Xmax-Xmin));
+    } else{  
+        var escala = Math.floor((HEIGHT_MAP*porcentajeAjuste)/(Ymax-Ymin));
+    }
+
+    // Multiplicador de escala
+    escala = escala*projection.scale();
+    
+    projection = d3.geoMercator().scale(escala);
+    geoPath = d3.geoPath(projection);
+              
+              
+              
+              
+    // Se calcula el centro de cada path (Provincia), y con estos el del centro del mapa,
+    // ajustando este al centro del elemento svg
+              
+    var centroX = 0;
+    var centroY = 0;
+    var numPaths = mapData.features.length;
+    mapData.features.forEach(function(data2,i)
+    {
+
+      centroX = centroX + geoPath.centroid(data2)[0];
+      centroY = centroY + geoPath.centroid(data2)[1];
+    
+    });
+
+    centroX = centroX / numPaths;
+    centroY = centroY / numPaths;
+
+    
+    var offsetX = projection.translate()[0];  
+    var offsetY = projection.translate()[1];
+      
+    var transX = Math.floor((WIDTH_MAP/2)-centroX)+offsetX;
+    var transY = Math.floor((HEIGHT_MAP/2)-centroY)+offsetY;
+    
+      
+    projection = projection.translate([transX,transY]);
+    geoPath = d3.geoPath(projection);
+          
+
+    d3.csv(mes).then(function(data) {
+  
+      data.forEach(function(data)
+      {
+        /*******************************
+         * AÑADIMOS LOS DATOS AL JSON **
+         *******************************/
+        var dataProvincia = data.provincia;
+
+        var dataGasolina = data.pvpG95;
+        var dataGasoleo = data.pvpGOA;
+
+        mapData.features.forEach(function(features)
+        {
+
+          var mapProvincia = features.properties.name;
+
+          if (dataProvincia == mapProvincia) {
+            // Añadimos los datos a cada provincia del año seleccionado
+            features.properties.pvpG95    = dataGasolina;
+            features.properties.pvpGOA    = dataGasoleo;
+
+
+            
+            // Colores
+            features.properties.colorGasolina   = coloresMapa(dataGasolina, 'gasolina');
+            features.properties.colorGasoil     = coloresMapa(dataGasoleo, 'gasoil');
+          }
+
+
+        });
+        
+      });
+
+      
+      //Dibujamos el mapa 
+      svg.selectAll("path")
+          .data(mapData.features)
+          .enter()
+          .append("path")
+        
+          // ATRIBUTOS
+          .attr("d", geoPath)
+          .attr("provincia",  function (d) { return d.properties.provincia;  })
+          .attr("pvpG95",   function (d) { return d.properties.pvpG95;   })
+          .attr("pvpGOA",     function (d) { return d.properties.pvpGOA;     })
+
+          // STYLE
+          .style("opacity", 0.95)
+          .style("stroke", "gold")
+          .style("fill", function(d) {
+                // Pintamos la variable seleccionada
+                var valor;
+
+                switch(selectedVar)
+                {
+                  case 'gasolina':
+                    valor = d.properties.pvpG95;
+                    if (valor) {  return d.properties.colorGasolina; } else { return "#FFF" /*No hay datos*/; }
+                  case 'gasoil':
+                    valor = d.properties.pvpGOA;
+                    if (valor) {  return d.properties.colorGasoil; } else { return "#FFF" /*No hay datos*/; }
+                
+                  }
+
+              })
+
+          // EVENTS
+          .on("click", function(d, prov){muestraLineChart(prov);})
+          .on("mousemove", handlerMouseOver)
+          .on("mouseout", handlerMouseOut);
+    });
+
+
+          
+  })
+};    
+
+
+/**
+ * Devuelve el color de la categoría del valor introducido según el indicador
+ * 
+ * @param {int} valor 
+ * @param {Sring} indicador 
+ * @returns 
+ */
+function coloresMapa(valor, indicador)
+{
+
+    var color;
+
+    console.log("Color")
+    console.log(indicador)
+
+    switch(indicador)
+    {
+      case 'gasolina':
+        color = paleta['gasolina'];
+
+        console.log(valor)
+
+        if(valor < GASOLINA_MIN ){ colorDato = color[0]}
+        else if (valor >= GASOLINA_MIN  && valor < GASOLINA_MEDMIN ){ colorDato = color[1]}
+        else if (valor >= GASOLINA_MEDMIN && valor < GASOLINA_MEDMAX  ){ colorDato= color[2]}
+        else if (valor >= GASOLINA_MEDMAX && valor < GASOLINA_MAX  ){ colorDato= color[3]}
+        else if (valor > GASOLINA_MAX  ){ colorDato= color[4]}
+
+      break;
+      
+      case 'gasoil':
+        color = paleta['gasoil'];
+
+        console.log(valor)
+
+        if(valor < GASOIL_MIN ){ colorDato = color[0]}
+        else if (valor >= GASOIL_MIN  && valor < GASOIL_MEDMIN ){ colorDato = color[1]}
+        else if (valor >= GASOIL_MEDMIN && valor < GASOIL_MEDMAX  ){ colorDato= color[2]}
+        else if (valor >= GASOIL_MEDMAX && valor < GASOIL_MAX  ){ colorDato= color[3]}
+        else if (valor > GASOIL_MAX  ){ colorDato= color[4]}
+
+      break;
+
+    }
+    
+  return colorDato;
+};
+
+
+
+
+/**
+ * Manejador del ratón cuando se sitúa sobre una provincia.
+ * Muestra la información resumida y resalta la provincia en cuestión.
+ * 
+ */
+function handlerMouseOver()
+{
+        
+  // borramos lo que pudiera haber en la etiqueta
+  document.getElementById("infoResumen").innerHTML="";
+
+  // Resalta la provincia seleccionada
+  d3.selectAll("path").style("opacity", .1);
+  d3.select(this).style("opacity", 1);
+
+  // Obtenemos la posición del ratón
+  function position(event)
+  {
+    var x = event.clientX;
+    var y = event.clientY;
+    return{x,y}
+  }
+
+  
+  // posRaton contiene las coordenadas {x, y} de la posicion del ratón en la pantalla
+  posRaton = position(event);
+
+  // colocamos la etiqueta en la posicion relativa al raton que queremos
+  posRaton.x = posRaton.x - 205;
+  posRaton.y = posRaton.y - 95;
+
+  // modificamos la posicion del div que contiene la etiqueta para que aparezca donde hemos establecido
+  d3.select("#infoResumen")
+                          .style("display","block") // cambiamos la visibilidad del div que inicialmente estaba oculto
+                          .style("left", posRaton.x+"px")
+                          .style("top" ,posRaton.y+"px");
+
+  // creamos un elemento svg para representar la etiqueta mediante un rectangulo con borde al que introducimos texto
+  var svg = d3.select("#infoResumen")
+                                    .append("svg")
+                                    .attr("width", 200)
+                                    .attr("height", 90);
+
+  var etiqueta = svg.append("g");
+
+  // Obtenemos los datos que vamos a mostrar
+  
+  var provincia = this.__data__.properties.name;
+  var g95 = this.__data__.properties.pvpG95;
+  var goa = this.__data__.properties.pvpGOA;
+            
+  // Nombre de la provincia
+  etiqueta.append("text")
+                        .style("font-size", "15px")
+                        .style("font-weight", "bold")
+                        .attr("x", 10)
+                        .attr("y", 20)
+                        .text(provincia);
+
+  // Precio gasolina  
+  etiqueta.append("text")
+                        .style("font-size", "15px")
+                        .attr("x", 10)
+                        .attr("y", 40)
+                        .text("Gasolina 95: "+g95);
+
+  // Precio gasoil
+  etiqueta.append("text")
+                        .style("font-size", "15px")
+                        .attr("x", 10)
+                        .attr("y", 60)
+                        .text("Gasóleo A: "+goa);
+}
+
+/**
+ * Devuelve el mapa a la situación normal
+ * 
+ */
+function handlerMouseOut()
+{
+  // Volvemos recuperar la misma tonalidad
+  d3.selectAll("path").style("opacity", 1);
+
+  // Vaciamos el contenido del div donde hemos creado la etiqueta y lo ocultamos
+  document.getElementById("infoResumen").innerHTML="";
+  d3.select("#infoResumen").style("display","none");
+
+}
+

handlers.js

+/*******************************
+ ** By: Jorge Villanueva Sanz **
+ *******************************/
+
+
+/**
+ * Manejador del slider selector de año
+ */
+function handlerSelectMes(){
+    data_mes = document.getElementById('dropMeses').value
+    d3.select("#mapa").selectAll("svg").remove();
+    plotCyL(document.getElementById('dropMeses').value, document.getElementById('vars').value);
+
+}
+
+/**
+ * Manejador del slider selector de variables del mapa.
+ */
+function handlerListaCarb(){
+
+    plotCyL(document.getElementById('dropMeses').value, document.getElementById('vars').value);
+}
\ No newline at end of file