Commit bdd1154f authored by numeroteca's avatar numeroteca

add interactive muncipios Euskadi map

parents
Pipeline #30 failed with stages
<!DOCTYPE html>
<html dir="ltr" lang="es-ES">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mapa: Iniciativas para una alimentación saludable</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
font-family:sans-serif;
}
path:hover {
stroke-width:2px !important;
stroke:black !important;
cursor:pointer;
}
h1 {
font-size:1em;
}
p {
margin:0px;
}
</style>
</head>
<body>
<h1>Iniciativas para una alimentación saludable</h1>
<script>
// basado en https://bost.ocks.org/mike/map/
var width = 400,
height = 350;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.style("background-color","#EFEFEF")
var color = d3.scale.linear()
.domain([0, 3])
.range(['#fff','#053874'])
// Adds tooltip
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
d3.json("municipios-euskadi_simply_topo.json", function(error, uk) {
// topojson creado con y simplificado con http://mapshaper.org/
if (error) return console.error(error);
// Variable con todos los datos
var subunits = topojson.feature(uk, uk.objects.municipios);
// Projection for Euskadi
var projection = d3.geo.mercator()
.scale(12000)
.center([-2.6,42.9])
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
svg.append("path")
.datum(subunits)
.attr("d", path)
.attr("stroke", "grey");
svg.selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
.attr("class", function(d) { return "subunit z" + d.properties.zona_id; })
.attr("fill", function(d) { return color(d.properties.n_iniciativas); })
.attr("d", path)
.on("mousemove", showTooltip) // AÑADIR EVENTO SHOW TOOLTIP
.on("mouseout", hideTooltip); // OCULTAR TOOLTIP
// Función para motrar el tooltip
function showTooltip(d) {
tooltip.html("<div class='table-responsive'><strong>" + d.properties.iz_ofizial + ". Iniciativas: "+ d.properties.n_iniciativas + "</strong></div>").style("opacity", 1)
}
// Función para ocultar el tooltip
function hideTooltip(d) {
tooltip.style("opacity", 0)
}
});
</script>
</body>
</html>
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment