Commit bdd1154f authored by numeroteca's avatar numeroteca

add interactive muncipios Euskadi map

Pipeline #30 failed with stages
<!DOCTYPE html>
<html dir="ltr" lang="es-ES">
<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=""></script>
<script src=""></script>
html, body {
margin: 0;
padding: 0;
path:hover {
stroke-width:2px !important;
stroke:black !important;
h1 {
p {
<h1>Iniciativas para una alimentación saludable</h1>
// basado en
var width = 400,
height = 350;
var svg ="body").append("svg")
.attr("width", width)
.attr("height", height)
var color = d3.scale.linear()
.domain([0, 3])
// Adds tooltip
var tooltip ="body")
.attr("class", "tooltip")
d3.json("municipios-euskadi_simply_topo.json", function(error, uk) {
// topojson creado con y simplificado con
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()
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.attr("d", path)
.attr("stroke", "grey");
.attr("class", function(d) { return "subunit z" +; })
.attr("fill", function(d) { return color(; })
.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>" + + ". Iniciativas: "+ + "</strong></div>").style("opacity", 1)
// Función para ocultar el tooltip
function hideTooltip(d) {"opacity", 0)
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