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 (4)
Expand all Hide whitespace changes
Inline Side-by-side
Abril.csv 0 → 100644
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 0 → 100644
View file @ 8c8da6d7
colore
1
2
3
4
5
Practica0.2.html 0 → 100644
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
spain-provinces.json 0 → 100644
View file @ 8c8da6d7
This diff is collapsed.