D3 Examples - Adaptive Resampling

xxxxxxxxxx
 
<!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");
​
var svg = d3.select("body").append("svg")
    .datum({x: 0, y: -45})
    .attr("width", width)
    .attr("height", height)
    .call(d3.behavior.drag()
      .origin(function() { return {x: rotate[0], y: -rotate[1]}; })
      .on("dragstart", function() { transitioning = true; })
      .on("drag", function(d) {
        rotate[0] = d3.event.x;
        rotate[1] = -d3.event.y;
        projection.rotate(rotate);
        svg.selectAll(".geometry, .graticule").attr("d", path);
      })
      .on("dragend", function() {
        transitioning = false;
        t0 = Date.now();
        initial = rotate.slice();
      }))
    .on("mousemove", function() {
      var px = x(d3.mouse(this)[0]);
      projection.precision(px);
      precision.text(format(px) + "px");
      svg.selectAll("path").attr("d", path);
    });
​
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>
​
    