Adaptive Resampling

D3 2.11’s projections will adaptively resample to reduce local distortion of lines. Move the mouse to change the precision, and drag to change the aspect.

Update: Mike has made some awesome improvements!

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: sans-serif;
}

#precision-wrapper {
  position: absolute;
  top: 5px;
  left: 5px;
}

svg {
  cursor: move;
}

rect {
  fill: none;
}

.graticule {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}

.graticule:nth-child(2n) {
  stroke-dasharray: 2,2;
}

path.resample {
  stroke: #f00;
  stroke-width: 2.5px;
  fill: none;
}

</style>
<p id="precision-wrapper">Precision: <span id="precision">200px</span>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var width = 960,
    height = 500,
    x = d3.scale.linear().domain([0, width]).range([200, 1]),
    initial = [-71, 42, 0],
    rotate = initial.slice(),
    transitioning = false,
    velocity = [.010, -.002],
    t0 = Date.now();

var projection = d3.geo.equirectangular()
      .rotate([0, 30, 0])
      .translate([width / 2 - .5, height / 2 - .5])
      .scale(150)
      .precision(x.range()[0]),
    path = d3.geo.path().projection(projection),
    graticule = d3.geo.graticule(),
    format = d3.format(",.2f"),
    precision = d3.select("#precision");

svg.append("rect")
    .attr("width", width)
    .attr("height", height);

svg.append("path")
    .attr("class", "resample")
    .datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
    .attr("d", path);

svg.selectAll(".graticule")
    .data(graticule.lines)
  .enter().append("path")
    .attr("class", "graticule")
    .attr("d", path);

d3.timer(function() {
  if (transitioning) return;
  var t = Date.now() - t0;
  rotate[0] = initial[0] + velocity[0] * t;
  rotate[1] = initial[1] + velocity[1] * t;
  projection.rotate(rotate);
  svg.selectAll("path").attr("d", path);
});

</script>

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

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