update embalses, datos gis, test d3

2025-06-07 22:11:29 +02:00 · 2017-04-24 14:12:52 +02:00 · 2017-04-24 14:12:52 +02:00 · e5677c2063
commit e5677c2063
parent cbdc342ada
53 changed files with 3353 additions and 384 deletions
--- a/test-gis/index.html
+++ b/test-gis/index.html
@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title></title>
+</head>
+<body>
+
+  <!-- nuestro mapa se dibujará en este contenedor -->
+  <div class="map"></div>
+
+  <!-- cargamos las dos librerías que necesitamos-->
+  <script src="https://d3js.org/d3.v4.min.js"></script>
+  <script src="https://d3js.org/topojson.v1.min.js"></script>
+  <script>
+
+  // añadimos un elemento canvas a nuestro contenedor
+  var canvas = d3.select(".map").append("canvas");
+
+  // parametros necesarios poder referenciar al conenedor
+  context = canvas.node().getContext("2d"),
+
+  // función de d3 para poder crear mapas
+  path = d3.geoPath().projection(null).context(context);
+
+  // variables sobre el tamaño de nuestro mapa
+  var width = 960,
+  height = 500;
+
+  // las añadimos al canvas
+  canvas
+  .attr("width", width)
+  .attr("height", height)
+  .style("width", width + "px")
+  .style("height", height + "px");
+
+  context.lineJoin = 'round';
+  context.lineCap = 'round';
+
+
+  // con este método cargamos el json (!)
+  // d3 tiene métodos específicos como d3.csv, de.json, d3.tsv
+  // Con d3.queue podemos cargar varios archivos (csv's, mapas, jsons...)
+  // una vez cargado llamará a la función ready
+  d3.queue()
+  .defer(d3.json, "./map.json")
+  .await(ready);
+
+  // esta función recibe como parametro nuestro mapa
+  // para aclararnos la hemos llamado 'map' (podríamos llamarla como quisieramos)
+  function ready(error, map) {
+    if (error) throw error;
+
+    // variable que almacena todos los polígonos del mapa con topojson
+    var penales = topojson.feature(map, map.objects.penales).features
+
+    //vamos a utilizar un bucle for para iterar por todas las unidades del mapa, un bucle por cada municipio
+    // queremos conocer exactamente el valo de la tasa de paro en cada iteración
+    for (var i = 0; i < penales.length; i++) {
+
+      context.fillStyle = "black"
+
+      context.beginPath()
+      // pasamos al método de d3 (path()) arriba definido la unidad espacial correspondiente
+      path(penales[i]);
+
+      // la coloreamos
+      context.fill()
+    }
+
+    // estos pasos son similares para el dibujo
+    // de los contornos de los municipios
+    // esta vez no iteramos sino que los dibujamos todos de una vez
+
+    // color del contorno
+    context.strokeStyle = "white"
+
+    // una línea discontínua
+    context.setLineDash([1,3])
+
+    // grosor de línea
+    context.lineWidth = .9;
+
+    // pasamos a la función TODOS los polígonos
+    path(topojson.feature(map, map.objects.penales));
+
+    // dibujamos el contorno
+    context.stroke()
+
+    // reseteamos la línea discontínua
+    context.setLineDash([0])
+    // a partir de este momento cualquier línea será continua
+
+    // variable que almacena todos los entidades del mapa con topojson
+    var entidades = topojson.feature(map, map.objects.entidades).features
+    for (var i = 0; i < entidades.length; i++) {
+
+      context.beginPath()
+      // pasamos al método de d3 (path()) arriba definido la unidad espacial correspondiente
+      xy = entidades[i].geometry
+
+      path(entidades[i],path.pointRadius(1))
+
+      // la coloreamos
+      context.fillStyle = "green"
+      context.fill()
+    }
+
+  };
+  </script>
+
+</body>
+</html>