Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.