Spain Modified Hit Area

A modified conic conformal projection that shows the Canary Islands next to the Iberian Peninsula so working with data in Spain becomes easier.

forked from rveciana's block: conicConformalSpain

forked from ale0xb's block: Spain

<!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>

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>

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-geo.v1.min.js

https://d3js.org/topojson.v1.min.js