poblados-colonizacion-colon.../test-gis/index-svg.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background-color: #aaa;
}

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>
  <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>

  <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>
    <span style="color:#0a0">Punto verde: </span>Poblado de colonizaci&oacute;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>