Perspective Map (transformed projection)

Using d3 v4 geo pipeline to skew and tweak a projection.

Uising dat.gui for easy parameters modifications.

Based on @mbostock's following blocks:

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/d3-geo-projection.v1.min.js"></script><script src="//d3js.org/topojson.v1.min.js"></script>

// this so we can use the projection as a function([lon,lat])
        projection = function (p) {
            return screenproject(baseprojection(p));
        };

// Here is where we compose the functions.
    // it's `transform o baseprojection`, but coded the other way,
    // as it works with callbacks (bleh!)
    projection.stream = function (s) {
        return baseprojection.stream(transform.stream(s));
    };

var context = canvas.node().getContext("2d");

var path = d3.geoPath()
    .projection(projection)
    .context(context);
    context.clearRect(0, 0, width, height);

context.beginPath();
    context.strokeStyle ="#eee";
    context.fillStyle ="#9ab";
    context.lineWidth = 0.5;
    path(land);
    context.fill();
    context.stroke();

context.beginPath();
    path(places);
    context.fillStyle = opts.fillColor;
    context.lineWidth = 1.5;
    context.strokeStyle = d3.rgb(opts.fillColor).darker();
    context.fill();
    context.stroke();
  }

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

d3.json("countries.topo.json", function(error, world) {
  if (error) throw error;

var land = topojson.feature(world, world.objects.countries);

var places = {type: "MultiPoint",
                coordinates: land.features
                .filter(function(c){
                  return c.properties.pop_est > 50000000
                })
                .map(function(c){
                  return d3.geoCentroid(c) ;
                })
               };

});

</script>

function add(src, o, t) {
                if (typeof o[t] == 'object') {
                    var group = src.addFolder(t);
                    for (var j in o[t]) {
                        add(group, o[t], j);
                    }
                } else {
                    var control = (t.match(/color/i))
                    ? src.addColor(o, t)
                    : src.add(o, t);
                    if (config.listen) control.listen();
                    if (redraw) control.onChange(redraw);

}
            }
        }
    </script>

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

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

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

https://unpkg.com/dat.gui/build/dat.gui.min.js