# Zooming a Natural Earth-based world map

**URL:** <https://talk.observablehq.com/t/zooming-a-natural-earth-based-world-map/10708>\
**Category:** Help\
**Created:** [June 18, 2026, 4:40pm UTC](https://talk.observablehq.com/t/zooming-a-natural-earth-based-world-map/10708 "2026-06-18T16:40:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![theohonohan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/theohonohan/32/4976_2.png) [@theohonohan](https://talk.observablehq.com/u/theohonohan)\
**Post date:** [June 18, 2026, 4:40pm UTC](https://talk.observablehq.com/t/zooming-a-natural-earth-based-world-map/10708/1 "2026-06-18T16:40:38Z")

</div>

I’m updating a world map that shows various data on a per-country basis (I made this a few years ago and the project’s data set has since expanded). It would be nice to be able to zoom the map to look at small islands, but I haven’t got a clue how to add this feature. Thanks for any tips!

Theo

(Edit: I’ve made a bit of progress using advice from an LLM… What remains to be fixed up is the tooltips, which zoom along with the map).

> **[Birthright Indicators 1985–2020 (version of 16 June 2026)](https://observablehq.com/@theohonohan/birthright-indicators-1985-2020-version-of-16-june)**
>
> The values of the indicators for each territory relate to the difficulty of acquiring citizenship under specific circumstances of birth, parentage, etc. Comment: This map is an updated substitute for the topojson file 'countries-50m.json' distributed...

---

<div class="post-metadata">

**Author:** ![neocarto](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/neocarto/32/6554_2.png) [@neocarto](https://talk.observablehq.com/u/neocarto)\
**Post date:** [June 19, 2026, 7:22am UTC](https://talk.observablehq.com/t/zooming-a-natural-earth-based-world-map/10708/2 "2026-06-19T07:22:48Z")

</div>

> [@theohonohan](#):
>
> a per-country basis

To do this quickly, you can use the **geoviz** library. An example is available here: [earth / Nicolas Lambert | Observable](https://observablehq.com/@neocartocnrs/earth). The source code is also available on GitHub if you would like to see how it is implemented with D3.

---

<div class="post-metadata">

**Author:** ![theohonohan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/theohonohan/32/4976_2.png) [@theohonohan](https://talk.observablehq.com/u/theohonohan)\
**Post date:** [June 20, 2026, 2:23pm UTC](https://talk.observablehq.com/t/zooming-a-natural-earth-based-world-map/10708/3 "2026-06-20T14:23:36Z")

</div>

Thanks. I looked at geoviz, but the switching cost is something I’m reluctant to take on given the complex code I have already and particularly the data plumbing, which depends on using a particular Natural Earth upstream data set.

I ended up relying on ChatGPT to answer my basic questions. It gave good responses to my targeted queries, whereas the many, many d3.zoom tutorials seem to require sitting down with a coffee and a full read-through. It feels lazy and risky to rely on LLMs; seemingly what I needed to look to get the basic zoom effect working was [Zoom (SVG) / D3 | Observable](https://observablehq.com/@d3/zoom).

d3.zoom seems to get complex. I can’t immediately figure out what’s going on here: [d3-zoom Parameters / Zihou Ng | Observable](https://observablehq.com/@stwind/d3-zoom-parameters)

ChatGPT helped with a couple of minor points. I don’t know how I’d have solved them otherwise. I needed to add “vector-effect: non-scaling-stroke” to get the result I wanted. It seems that more subtle effects are possible using `transform.k`.

One more intricate fix was needed to make tooltips appear in the correct locations under the mouse pointer.

`tooltip.attr("transform", translate(${d3.pointer(event, this)}));`

doesn’t cut it, but

`tooltip.attr("transform", translate(${d3.pointer(event, svg.node())}));`

works.

Theo