D3 Examples - Interrupted Quartic Authalic Projection with D3v4

Interrupted Quartic Authalic Projection with D3v4

Interrupted Hemispheres with Country Colors: http://blockbuilder.org/piwodlaiwo/3c3155de870b919ca50dede8385231b9

Quartic Authalic (in d3v3): https://bl.ocks.org/mbostock/4463175

Quartic Authalic (in d3v4 with Afghanistan issue): https://bl.ocks.org/piwodlaiwo/9f23abd977381b77e9cb86b1888769fc

Links on Interrupted Quartic Authalic projection:

http://www.progonos.com/furuti/MapProj/Normal/ProjInt/projInt.html https://map-projections.net/compare.php?p1=quartic-authalic&p2=sinusoidal&w=1&sm=1&d=1

https://www.mapthematics.com/ProjectionsList.php?Projection=115

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:100%; height: 100% }
  
.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}
​
.fill {
  fill: #fff;
}
​
.graticule {
  fill: none;
  stroke: #777;
  stroke-width: 0.5px;
  stroke-opacity: 0.5;
}
  
.land {
  fill: #222;
}
.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}  
​
/* Issue with Afghanistan */  
/*
.land {
  fill: #222;
  stroke: #fff;
  stroke-width: 0.5px;
}
*/
  
</style>
<body>
<script src="https://unpkg.com/d3@4"></script>
<script src="https://unpkg.com/d3-geo-projection@2"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script>  
var width = 960;
var height = 500;
    
var svg = d3.select("body").append("svg");
​
// 2 lobes
var lobes = [
  [
    [[-180,   0], [ -90,  90], [   0,   0]],
    [[   0,   0], [  90,  90], [ 180,   0]]
  ],
  [
    [[-180,   0], [ -90, -90], [   0,   0]],
    [[   0,   0], [  90, -90], [ 180,   0]]
  ]
];  
​
var projection = d3.geoInterrupt(d3.geoHammerRaw(Infinity), lobes)
    .rotate([20, 0])
    .scale(140)
    .translate([width / 2, height / 2])
    .precision(.1);
  
var path = d3.geoPath().projection(projection);
  
var graticule = d3.geoGraticule();
​
var 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");
​
svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");
​
svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");
​
svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("clip-path", "url(#clip)")
    .attr("d", path);
 
  
​
d3.json("https://unpkg.com/world-atlas@1/world/50m.json", function(error, world) {
  if (error) throw error;
  
//Issue with Afghanistan  
/*
    svg.selectAll("path")
       .data(topojson.feature(world, world.objects.countries).features)
       .enter().append("path")
       .attr("class", "land")
       .attr("clip-path", "url(#clip)")
       .attr("d", path);
*/
  
  svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("clip-path", "url(#clip)")
      .attr("d", path);
​
  svg.insert("path", ".graticule")
      .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("clip-path", "url(#clip)")
      .attr("d", path);
​
  
});
</script>
    