D3 Examples - Spain Modified Hit Area

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  
    .land {
    fill: #222;
    }
​
    .county-boundary {
    fill: none;
    stroke: #fff;
    stroke-width: .5px;
    }
​
    .state-boundary {
    fill: none;
    stroke: #fff;
    }
​
    .border {
    stroke: #000;
    fill: none;
    }
  
    div.tooltip {
    position: absolute;
    text-align: center;
    width: 116px;
    height: 14px;
    padding: 2px;
    font: 12px sans-serif;
    background: white;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
    }
​
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="d3-composite-projections.js"></script>
​
<script>
​
var width = 900,
    height = 500;
​
var projection = d3.geoConicConformalSpain();
​
​
var path = d3.geoPath()
    .projection(projection);
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
  
​
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
​
d3.json("https://cdn.rawgit.com/rveciana/5919944/raw//provincias.json", function(error, provincias) {
          var land = topojson.feature(provincias, provincias.objects.provincias);
            console.log(land);
//              var ceuta_melilla = land.features.filter(function (d) {
//           return d.properties.nombre == "Ceuta" || d.properties.nombre == "Melilla"
//         });
//              console.log(ceuta_melilla);
            
//              var cBBox = ceuta_melilla[0]
            
        svg.selectAll("path")
            .data(land.features)
            .enter()
            .append("path")
            .attr("d", path)
                .attr("id", function (d){return 'id' + d.properties.idprov;})
                .on('mousemove', function(d) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    });
                                        tooltip.transition()
                                    .duration(200)
                                    .style("opacity", 1);
                            tooltip.html(d.properties.nombre + "<br/>")
                                    .style("left", mouse[0] + "px")
                                    .style("top", mouse[1] + "px");
          
                })
             .on('mouseout', function() {
                    tooltip.transition()
                                    .duration(500)
                                    .style("opacity", 0);
                });
            var enlargeBy = 10;
            var enlargeFn = function(d,i){ 
                    if (i==0) return [d[0] - enlargeBy, d[1] - enlargeBy];
          if (i==1) return [d[0] + enlargeBy, d[1] + enlargeBy];
        };
  
                var bounds = [path.bounds(svg.select("path#id51").data()[0]).map(enlargeFn),
                                            path.bounds(svg.select("path#id52").data()[0]).map(enlargeFn)];
            console.log(bounds);
            
                svg.selectAll("rect")
                .data(bounds)
                .enter()
                .append("rect")
                .attr("x", function(d){ return d[0][0];})
                        .attr("y", function(d){ return d[0][1];})
                        .attr("width", function(d){ return d[1][0] - d[0][0];})
                        .attr("height", function(d){ return d[1][1] - d[0][1];})
                .attr("fill", "purple")
                        .attr("fill-opacity", 0.2)
                .on('mousemove', function(d,i) {
                    var mouse = d3.mouse(svg.node()).map(function(d) {
                        return parseInt(d);
                    });
                                        tooltip.transition()
                                    .duration(200)
                                    .style("opacity", 1);
                            var name = i==0 ? "Ceuta" : "Melilla";
                            tooltip.html(name + "<br/>")
                                    .style("left", mouse[0] + "px")
                                    .style("top", mouse[1] + "px");
          
                })
            .on('mouseout', function() {
                    tooltip.transition()
                                    .duration(500)
                                    .style("opacity", 0);
                });
            
  
        svg.append("path")
        .attr("class","border")
        .attr("d", projection.getCompositionBorders());
});
  
​
d3.select(self.frameElement).style("height", height + "px");
​
  
</script>
​
    