README.md

## README.md

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

  
## europe_proj.js
(function() {
d3.geo.conicConformalSpain = function() {

  var iberianPeninsule = d3.geo.conicConformal()
  .center([-3, 40]);

  var canaryIslands = d3.geo.conicConformal()
  .center([-14.5, 28.5]);

  var iberianPeninsuleBbox = [[-9.9921301043373, 48.119816258446754], [4.393178805228727, 34.02148129982776]];

  var canaryIslandsBbox = [[-12.22643614428382, 34.989324589964816], [-6.681087681832122, 33.712511769541585]];


  var point,
      pointStream = {point: function(x, y) { point = [x, y]; }},
      iberianPeninsulePoint,
      canaryIslandsPoint;


  function conicConformalSpain(coordinates) {
    var x = coordinates[0], y = coordinates[1];
    point = null;
    (iberianPeninsulePoint(x, y), point) || (canaryIslandsPoint(x, y), point);
    return point;
  }


conicConformalSpain.invert = function(coordinates) {

    var k = iberianPeninsule.scale(),
        t = iberianPeninsule.translate(),
        x = (coordinates[0] - t[0]) / k,
        y = (coordinates[1] - t[1]) / k;

    return (y >= .120 && y < .234 && x >= -.425 && x < -.214 ? canaryIslands
      : iberianPeninsule).invert(coordinates);
  };


conicConformalSpain.stream = function(stream) {
    var iberianPeninsuleStream = iberianPeninsule.stream(stream);
    var canaryIslandsStream = canaryIslands.stream(stream);
    return {
      point: function(x, y) {
        iberianPeninsuleStream.point(x, y);
        canaryIslandsStream.point(x, y);
      },
      sphere: function() {
        iberianPeninsuleStream.sphere();
        canaryIslandsStream.sphere();
      },
      lineStart: function() {
        iberianPeninsuleStream.lineStart();
        canaryIslandsStream.lineStart();
      },
      lineEnd: function() {
        iberianPeninsuleStream.lineEnd();
        canaryIslandsStream.lineEnd();
     },
      polygonStart: function() {
        iberianPeninsuleStream.polygonStart();
        canaryIslandsStream.polygonStart();
      },
      polygonEnd: function() {
        iberianPeninsuleStream.polygonEnd();
        canaryIslandsStream.polygonEnd();
      }
    };
  };


  conicConformalSpain.precision = function(_) {
    if (!arguments.length) return iberianPeninsule.precision();
    iberianPeninsule.precision(_);
    canaryIslandsPeninsule.precision(_);

    return conicConformalSpain;
  };

  conicConformalSpain.scale = function(_) {
    if (!arguments.length) return iberianPeninsule.scale();

    iberianPeninsule.scale(_);
    canaryIslands.scale(_);

    return conicConformalSpain.translate(iberianPeninsule.translate());
  };

  conicConformalSpain.translate = function(_) {

    if (!arguments.length) return iberianPeninsule.translate();

    var k = iberianPeninsule.scale(), x = +_[0], y = +_[1];


    iberianPeninsulePoint = iberianPeninsule
        .translate(_)
        .clipExtent([iberianPeninsule(iberianPeninsuleBbox[0]),iberianPeninsule(iberianPeninsuleBbox[1])])
        .stream(pointStream).point;


    canaryIslandsPoint = canaryIslands
        .translate([x - .067 * k, y + .081 * k])
        .clipExtent([iberianPeninsule(canaryIslandsBbox[0]),iberianPeninsule(canaryIslandsBbox[1])])
        .stream(pointStream).point;

    return conicConformalSpain;
  };

  conicConformalSpain.getBorders = function() {
  var ini = iberianPeninsule(canaryIslandsBbox[0]);
  var end = iberianPeninsule(canaryIslandsBbox[1]);
  var path = "M"+ini[0]+" "+(ini[1]-5)+"L"+end[0]+" "+(ini[1]-5)+"L"+end[0]+" "+(end[1]);
  return path;
  };

  return conicConformalSpain.scale(2500);
};


})();

## index.html
<!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;

}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="europe_proj.js"></script>
<script>

var width = 900,
    height = 500;

var projection = d3.geo.conicConformalSpain();


var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("https://cdn.rawgit.com/rveciana/5919944/raw//provincias.json", function(error, provincias) {
  var land = topojson.feature(provincias, provincias.objects.provincias);
  svg.selectAll("path")
      .data(land.features)
      .enter()
      .append("path")
      .attr("d", path);

  console.info(projection.getBorders());

  svg.append("path")
      .attr("class","border")
      .attr("d", projection.getBorders());

});

d3.select(self.frameElement).style("height", height + "px");

</script>

## thumbnail.png

      
          Raw
        
        
              thumbnail.png