Commit 6ca0e041 authored by numeroteca's avatar numeroteca

puts together hover actions

parent 523f75dc
......@@ -45,68 +45,65 @@ queue()
function makeMyMap(error, municipios, provincias) {
// topojson creado con y simplificado con http://mapshaper.org/
if (error) return console.error(error);
// Variable con todos los datos
var subunits = topojson.feature(municipios, municipios.objects.municipios);
var provincias = topojson.feature(provincias, provincias.objects.provincias);
//calculates max and min values of n iniciativas
color.domain(d3.extent(subunits.features, function(d) {return d.properties.n_iniciativas }));
var path = d3.geo.path()
.projection(projection);
// add municipios
svg.append("path")
.datum(subunits)
.attr("d", path)
.attr("stroke", "grey");
svg.append("g").selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
.attr("fill", function(d) { return (d.properties.n_iniciativas < 1)? color(0.06) : color(d.properties.n_iniciativas); })
.attr("d", path)
// topojson creado con y simplificado con http://mapshaper.org/
if (error) return console.error(error);
// add municipios
svg.append("path")
.datum(provincias)
.attr("d", path)
.attr("stroke", "#ccc")
.attr("fill-opacity",0)
// hover shapes
svg.append("g")
.attr("class","hovers")
.selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
//.attr("class", function(d) { return "subunit z" + d.properties.zona_id; })
.attr("fill-opacity",0)
// Variable con todos los datos
var subunits = topojson.feature(municipios, municipios.objects.municipios);
var provincias = topojson.feature(provincias, provincias.objects.provincias);
//calculates max and min values of n iniciativas
color.domain(d3.extent(subunits.features, function(d) {return d.properties.n_iniciativas }));
var path = d3.geo.path()
.projection(projection);
// add municipios
svg.append("path")
.datum(subunits)
.attr("d", path)
//.on("click", displayTooltip)
.on('click',function(d) {
tooltipclick.html("<div class='table-responsive'><strong>" + d.properties.NOMBRE_TOP + ". Iniciativas: "+ d.properties.n_iniciativas + "</strong>" +
d.properties.iniciativas_div +
"</div>")
svg.selectAll('.active').attr("class","inactive");
d3.select(this).attr("class","active"); //removes .success class
})
.on("mousemove", showTooltip) // AÑADIR EVENTO SHOW TOOLTIP
.on("mouseout", hideTooltip); // OCULTAR TOOLTIP
// Función para motrar el tooltip en hover
function showTooltip(d) {
tooltip.html("<div class='table-responsive'><strong>" + d.properties.NOMBRE_TOP + ". Iniciativas: "+ d.properties.n_iniciativas + "</strong></div>").style("opacity", 1)
}
// Función para ocultar el tooltip en hover
function hideTooltip(d) {
tooltip.style("opacity", 0)
}
// Función para motrar el tooltip en hover
function displayTooltip(d) {
}
.attr("stroke", "grey");
svg.append("g").selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
.attr("fill", function(d) { return (d.properties.n_iniciativas < 1)? color(0.06) : color(d.properties.n_iniciativas); })
.attr("d", path)
// add municipios
svg.append("path")
.datum(provincias)
.attr("d", path)
.attr("stroke", "#ccc")
.attr("fill-opacity",0)
// hover shapes
svg.append("g")
.attr("class","hovers")
.selectAll(".subunit")
.data(subunits.features)
.enter().append("path")
//.attr("class", function(d) { return "subunit z" + d.properties.zona_id; })
.attr("fill-opacity",0)
.attr("d", path)
.on("click", displayTooltip)
.on("mousemove", showTooltip) // AÑADIR EVENTO SHOW TOOLTIP
.on("mouseout", hideTooltip); // OCULTAR TOOLTIP
// Función para motrar el tooltip en hover
function showTooltip(d) {
tooltip.html("<div class='table-responsive'><strong>" + d.properties.NOMBRE_TOP + ". Iniciativas: "+ d.properties.n_iniciativas + "</strong></div>").style("opacity", 1)
}
// Función para ocultar el tooltip en hover
function hideTooltip(d) {
tooltip.style("opacity", 0)
}
// Función para motrar el tooltip en hover
function displayTooltip(d) {
tooltipclick.html("<div class='table-responsive'><strong>" + d.properties.NOMBRE_TOP + ". Iniciativas: "+ d.properties.n_iniciativas + "</strong>" +
d.properties.iniciativas_div + "</div>");
svg.selectAll('.active').attr("class","inactive");
d3.select(this).attr("class","active"); //removes .success class
}
}
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