Skip to content
Snippets Groups Projects
Commit d089781e authored by jorvill's avatar jorvill :speech_balloon:
Browse files

Upload New File

parent 6a141a58
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 161 additions and 0 deletions
Practica0.2.html 0 → 100644
+ 161
− 0
View file @ d089781e
<!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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment