Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active March 13, 2024 22:46
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 12 You must be signed in to fork a gist
  • Save mbostock/2206340 to your computer and use it in GitHub Desktop.
Save mbostock/2206340 to your computer and use it in GitHub Desktop.
mousewheel-zoom + click-to-center
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.background {
fill: none;
pointer-events: all;
}
#states {
fill: #aaa;
}
#state-borders {
fill: none;
stroke: #fff;
stroke-width: 1.5px;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.albersUsa()
.scale(1070)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var zoom = d3.behavior.zoom()
.translate(projection.translate())
.scale(projection.scale())
.scaleExtent([height, 8 * height])
.on("zoom", zoomed);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g")
.call(zoom);
g.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height);
d3.json("/mbostock/raw/4090846/us.json", function(error, us) {
if (error) throw error;
g.append("g")
.attr("id", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("d", path)
.on("click", clicked);
g.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("id", "state-borders")
.attr("d", path);
});
function clicked(d) {
var centroid = path.centroid(d),
translate = projection.translate();
projection.translate([
translate[0] - centroid[0] + width / 2,
translate[1] - centroid[1] + height / 2
]);
zoom.translate(projection.translate());
g.selectAll("path").transition()
.duration(700)
.attr("d", path);
}
function zoomed() {
projection.translate(d3.event.translate).scale(d3.event.scale);
g.selectAll("path").attr("d", path);
}
</script>
@patricksurry
Copy link

Here's an example of a "rolling" Mercator projection with pan and zoom that uses wraparound and absolute latitude clamping to keep everything in the viewport: https://gist.github.com/patricksurry/6621971

@andreapozzetti
Copy link

Hi,
i would like t disable scroll wheel and wheel zoom but maintain a slider zoom.
Is it possible? can you explain how?
thanks

@tconroy
Copy link

tconroy commented Jun 3, 2016

this is really great. Awesome job, @mbostock. I was curious if you knew how we could add data points (city markers etc) to this map, that stay in their "proper" location regardless of zoom level?

@ranaalisaeed
Copy link

Hi,
Are there v4 version of these tutorials available somewhere?

@andreas83
Copy link

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment