Skip to content

Instantly share code, notes, and snippets.

@jasondavies
Forked from jasondavies/README.md
Created September 26, 2012 15:59
Show Gist options
  • Save jasondavies/3788855 to your computer and use it in GitHub Desktop.
Save jasondavies/3788855 to your computer and use it in GitHub Desktop.
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