2017-04-24 14:12:52 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
background-color: #aaa;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
svg {
|
2017-04-27 13:19:45 +02:00
|
|
|
background-color: #eee;
|
|
|
|
|
margin: 10px auto;
|
2017-04-24 14:12:52 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.overlay {
|
|
|
|
|
fill: none;
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.penal {
|
2017-04-27 13:19:45 +02:00
|
|
|
fill: #a00;
|
2017-04-24 14:12:52 +02:00
|
|
|
}
|
|
|
|
|
|
2017-04-27 13:19:45 +02:00
|
|
|
.scpm {
|
|
|
|
|
fill: #a00;
|
2017-04-24 14:12:52 +02:00
|
|
|
}
|
|
|
|
|
|
2017-04-27 13:19:45 +02:00
|
|
|
.zona {
|
|
|
|
|
fill: #ccc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.adm {
|
|
|
|
|
fill:#fff;
|
|
|
|
|
stroke:#ddd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.poblado {
|
|
|
|
|
fill: #0a0;
|
2017-04-24 14:12:52 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.embalse {
|
2017-04-27 13:19:45 +02:00
|
|
|
fill: #00a;
|
2017-04-24 14:12:52 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="info"><h1 id="name"></h1></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;
|
|
|
|
|
|
2017-04-27 13:19:45 +02:00
|
|
|
var adm = topojson.feature(map, map.objects.adm)
|
2017-04-24 14:12:52 +02:00
|
|
|
g.append("path")
|
2017-04-27 13:19:45 +02:00
|
|
|
.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")
|
2017-04-24 14:12:52 +02:00
|
|
|
.attr("class", "penal")
|
|
|
|
|
.attr("d", path);
|
|
|
|
|
|
2017-04-27 13:19:45 +02:00
|
|
|
path.pointRadius(3);
|
2017-04-24 14:12:52 +02:00
|
|
|
|
2017-04-27 13:19:45 +02:00
|
|
|
var scpm = topojson.feature(map, map.objects.scpm);
|
|
|
|
|
g.selectAll(".scpm")
|
|
|
|
|
.data(scpm.features)
|
|
|
|
|
.enter()
|
|
|
|
|
.append("path")
|
|
|
|
|
.attr("class", "scpm")
|
|
|
|
|
.attr("d", path);
|
2017-04-24 14:12:52 +02:00
|
|
|
|
2017-04-27 13:19:45 +02:00
|
|
|
path.pointRadius(2);
|
2017-04-24 14:12:52 +02:00
|
|
|
|
2017-04-27 13:19:45 +02:00
|
|
|
var embalses = topojson.feature(map, map.objects.embalses2);
|
|
|
|
|
g.selectAll(".embalse")
|
|
|
|
|
.data(embalses.features)
|
|
|
|
|
.enter()
|
|
|
|
|
.append("path")
|
2017-04-24 14:12:52 +02:00
|
|
|
.attr("class", "embalse")
|
2017-04-27 13:19:45 +02:00
|
|
|
.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)
|
|
|
|
|
|
2017-04-24 14:12:52 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function update(yr) {
|
|
|
|
|
var g = d3.select("body").transition();
|
|
|
|
|
|
2017-04-27 13:19:45 +02:00
|
|
|
// 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;
|
2017-04-24 14:12:52 +02:00
|
|
|
}
|
2017-04-27 13:19:45 +02:00
|
|
|
})
|
|
|
|
|
.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");
|
|
|
|
|
|
2017-04-24 14:12:52 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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>
|
