<!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>