d3.geo.zoom without roll

Compare with default (i.e. with roll) see mpmckenna8's block.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.zoomlayer {
    fill: transparent;
}
.land {
    fill: rgb(83, 207, 142);
}
.graticule {
    fill: none;
    stroke: grey;
}
</style>
<body>

var pathToTopojson = './world110.json'  // or world50.json

d3.json(pathToTopojson, main);

function main(err, world) {

var width = 720,
            height = 400;

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

//         var projection = d3.geo.kavrayskiy7()
//             .scale(120)
//             .rotate([0, 0, 0]);

var projection = d3.geo.orthographic()
            .clipAngle(90)
            .scale(170)
            .rotate([0, 0, 0]);

projection.translate([width / 2, height / 2]);
        window.projection = projection;

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

var graticule = d3.geo.graticule();

var svg = d3.select('.fig')
            .attr('height', height)
            .attr('width', width);

var g = svg.append("g")
            .attr("class", "map");

g.append("rect")
            .attr("class", "zoomlayer")
            .attr("width", width)
            .attr("height", height);

g.append("path")
          .datum(countries)
            .attr("d", path)
            .attr("class", "land");

g.append("path")
          .datum(graticule)
            .attr("d", path)
            .attr("class", "graticule");

var zoom = d3.geo.zoom()
            .projection(projection)
            .on("zoom.redraw", function() {
                svg.selectAll("path")
                    .attr("d", path);
            });

g
            .call(zoom)
            .on("dblclick.zoom", null);
    }

})();
</script>
</body>

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

Modified http://d3js.org/d3.geo.projection.v0.min.js to a secure url

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

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

https://d3js.org/d3.geo.projection.v0.min.js

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