Skip to content

Instantly share code, notes, and snippets.

Last active Jan 13, 2022
What would you like to do?
mousewheel-zoom + click-to-center
license: gpl-3.0
<!DOCTYPE html>
<meta charset="utf-8">
.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;
<script src="//"></script>
<script src="//"></script>
var width = 960,
height = 500;
var projection = d3.geo.albersUsa()
.translate([width / 2, height / 2]);
var path = d3.geo.path()
var zoom = d3.behavior.zoom()
.scaleExtent([height, 8 * height])
.on("zoom", zoomed);
var svg ="body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g")
.attr("class", "background")
.attr("width", width)
.attr("height", height);
d3.json("/mbostock/raw/4090846/us.json", function(error, us) {
if (error) throw error;
.attr("id", "states")
.data(topojson.feature(us, us.objects.states).features)
.attr("d", path)
.on("click", clicked);
.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();
translate[0] - centroid[0] + width / 2,
translate[1] - centroid[1] + height / 2
.attr("d", path);
function zoomed() {
g.selectAll("path").attr("d", path);
Copy link

patricksurry commented Sep 19, 2013

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:

Copy link

andreapozzetti commented Jun 26, 2015

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

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?

Copy link

ranaalisaeed commented Jan 28, 2019

Are there v4 version of these tutorials available somewhere?

Copy link

andreas83 commented Feb 23, 2021


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