Projection transition in svg

Well, i’m trying to interpolate my map between 2 or more projections in svg. I have seen some examples but it’s not so easy actually. What is the simplest way to do that in d3@6 ?

1 Like

Setting the width to 1000 would help from New Zealand being cut off the map.

Perhaps this helps:

Since you mention that you want Version 6 of D3, I should point out that the line defining D3 in that notebook is here:

d3 = require("d3-geo@1", "d3-geo-projection@2", "d3-ease@1")

While those versions are dated, you can update them to the lastest versions as follows:

d3 = require("d3-geo@2", "d3-geo-projection@3", "d3-ease@2")

The result still works as anticipated.


Thank you, I knew this notebook. But i’m trying to do that in svg (and not canvas) in the simplest possible way and I just can’t do it. I think I need to practice to be better :slight_smile:

Don’t equate “simplest possible way” with “simple”.

I think the notebook shared by @mcmcclur presents an excellent starting point. I’d recommend these initial changes:

  • yield the return value of render() in the update cell
  • have render() return an SVG element which you rebuild on each call.

An example for drawing arbitrary projections as SVGs (without transitions) can be found here:

A rotatable SVG globe can be found here:

Thank you. But in these two examples, there is no interpolation between the projections.

Yes, just as I’ve written. Please read my complete answer, don’t just skip to the links.

1 Like