Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • jorvill/preciocarburantes
  • desi_22-23/preciocarburantes
2 results
Show changes
Commits on Source (3)
Hide whitespace changes
Inline Side-by-side
Abril.csv deleted 100644 → 0
View file @ 8c8da6d7
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 deleted 100644 → 0
View file @ 8c8da6d7
colore
1
2
3
4
5
Practica0.2.html deleted 100644 → 0
View file @ 8c8da6d7
<!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