2

I am trying to use the Armadillo projection in d3 (using the d3 projection plugin), but my map has rendering problems. The display is exactly the same than in the following bl.ocks project: http://bl.ocks.org/mortenjohs/4739921 (select Armadillo in the menu). I also used world-110m.json.

Armadillo projection in d3

There are weird lines south of the globe. I notice that the map of Jason Davies does not have such rendering problems: https://www.jasondavies.com/maps/armadillo/

How can we use the Armadillo projection without those issues? What is the difference between the mortenjohs map and Jason Davie's? Thank you for you help!

The code used for the display is the same than for other projections, that is:

var projection = d3.geoArmadillo();

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

d3.json("/d/4090846/world-110m.json", function(error, world) {
  svg.insert("path", ".graticule")
      .datum(topojson.object(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a.id !== b.id; }))
      .attr("class", "boundary")
      .attr("d", path);
Philippe V.
  • 508
  • 3
  • 10

1 Answers1

4

You have to use the sphere background as a "clipping path" for your layers.

Prior to adding your layer try something like :

    defs = svg.append("defs");

    defs.append("path")
        .datum({type: "Sphere"})
        .attr("id", "sphere")
        .attr("d", path);

    defs.append("clipPath")
        .attr("id", "clip")
      .append("use")
        .attr("xlink:href", "#sphere");

Then add your layers as usual but with an additional attribute : 

        .attr("clip-path", "url(#clip)");

Projection which requires clipping (mostly the interrupted ones and Armadillo) are mentioned in the doc of the d3-geo-projection.

If you are modifying the DOM in the svg element after that, just take care that the defs stay the first child.

mgc
  • 5,223
  • 1
  • 24
  • 37