mirror of
https://github.com/medialab-prado/poblados-colonizacion-colonias-penitenciarias.git
synced 2024-12-26 12:31:22 +01:00
pages
This commit is contained in:
abe-
parent
4515cc39f2
commit
f32fc6db66
1 changed files with 202 additions and 0 deletions
202
test-gis/mapa-timeline.html
Normal file
202
test-gis/mapa-timeline.html
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
body {
|
||||
background-color: #ccc;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
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></body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue