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).
To do this quickly, you can use the geoviz library. An example is available here: earth / Nicolas Lambert | Observable. The source code is also available on GitHub if you would like to see how it is implemented with D3.
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.
d3.zoom seems to get complex. I can’t immediately figure out what’s going on here: d3-zoom Parameters / Zihou Ng | Observable
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