<!DOCTYPE html> <meta charset="utf-8"> <style> body { background-color: #ccc; } svg { background-color: #eee; margin: 10px auto; } .overlay { fill: none; pointer-events: all; } .penal { fill: #a00; } .scpm { fill: #a00; } .zona { fill: #ccc; } .adm { fill:#fff; stroke:#ddd; } .poblado { fill: #0a0; } .embalse { fill: #00a; } </style> <body> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/topojson.v1.min.js"></script> <script> var width = 960, height = 450; var path = d3.geoPath() .projection(null); var zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", zoomed); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var g = svg.append("g"); var zoomrect = svg.append("rect") .attr("class", "overlay") .attr("width", width) .attr("height", height) .on("mousemove", mousemove) .call(zoom); 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; var adm = topojson.feature(map, map.objects.adm) g.append("path") .datum(adm) .attr("class", "adm") .attr("d", path); var zonas = topojson.feature(map, map.objects.zonas2) g.append("path") .datum(zonas) .attr("class", "zona") .attr("d", path); path.pointRadius(2); var penales = topojson.feature(map, map.objects.penales2); g.selectAll(".penal") .data(penales.features) .enter() .append("path") .attr("class", "penal") .attr("d", path); path.pointRadius(3); var scpm = topojson.feature(map, map.objects.scpm); g.selectAll(".scpm") .data(scpm.features) .enter() .append("path") .attr("class", "scpm") .attr("d", path); path.pointRadius(2); var embalses = topojson.feature(map, map.objects.embalses2); g.selectAll(".embalse") .data(embalses.features) .enter() .append("path") .attr("class", "embalse") .attr("d", path); var poblados = topojson.feature(map, map.objects.poblados2); g.selectAll(".poblado") .data(poblados.features) .enter() .append("path") .attr("class", "poblado") .attr("d", path) }; function update(yr) { var g = d3.select("body").transition(); // update poblados g.selectAll(".poblado").style("visibility", "hidden") .filter(function(d){ return parseInt(d.properties.ANYO) < yr; }) .style("visibility", "visible"); // update embalses g.selectAll(".embalse").style("visibility", "hidden") .filter(function(d){ return parseInt(d.properties.Anyo) < yr; }) .style("visibility", "visible"); // update penales g.selectAll(".penal").style("visibility", "hidden") .filter(function(d){ var info = d.properties.PENALES_10; var anyos = info.split("-"); if (anyos.length > 0) { var a1 = parseInt(anyos[0]); if (anyos.length == 2) var a2 = anyos[1]; else var a2 = a1+5; return a1 < yr && a2 > yr; } }) .style("visibility", "visible"); // update penales g.selectAll(".scpm").style("visibility", "hidden") .filter(function(d){ var a1_ = d.properties.ANYOINICI; var a2 = parseInt(d.properties.ANYOFINAL); var a1 = parseInt(a1_); if (a1_ == "?") a1 = a2 - 6; return a1 < yr && a2 > yr; }) .style("visibility", "visible"); } function zoomed() { var transform = d3.event.transform; g.attr("transform", transform); g.select(".state-border").style("stroke-width", 1.5 / d3.event.scale + "px"); g.select(".county-border").style("stroke-width", .5 / d3.event.scale + "px"); } function mousemove() { var mouseX = d3.mouse(this)[0]; var yr = 1936 + (1975-1936)*mouseX/960; update(yr); } d3.select(self.frameElement).style("height", height + "px"); </script> <div> <p> <b>Interacción:</b></br> <ul> <li>Si se mueve el ratón en el rectángulo del mapa, de izquierda a derecha, se recorren los años del tramo 1936 a 1975. </li> <li>Con la rueda del mouse se hace zoom. Arrastrando el mouse, se arrastra el plano.</li> </ul> </p> </div> <div> <p> <span style="color:#0a0">Punto verde: </span>Poblado de colonización</br> <span style="color:#00a">Punto azul: </span>Embalse dedicado a riego</br> <span style="color:#a00">Punto rojo: </span>Colonia penitenciaria militarizada (SCPM)</br> <span style="color:#a00">Zona roja: </span>Municipio con destacamento penal</br> <span style="color:#444">Zona gris: </span>Zona regable</br> </p> </div> </body> </html>