Interpolation Method for Projection Transition in d3.js -
i attempting toggle between 2 animations while having them interactive (drag/zoom) - orthographic , equirectangular. grateful if shed light on issues i'm explain. without explanation, math little on head.
my interpolation method based off of extremely helpful answer: how smooth transition map reprojection in d3 js
i've created 2 similar examples on jsfiddle - 1 starts out orthographic projection without being interpolated , is. on line 24 can switch between interpolated projection , normal orthographic.
these identical except projection getting applied (line 24/25):
- normal orthographic (how interpolated should look): http://jsfiddle.net/jsv5ap3f/3/
- the interpolated attempt: http://jsfiddle.net/jsv5ap3f/2/
you'll notice visually quite different, brings me questions:
- i believe way handle toggle create 2 interpolating projections (as seen in jsfiddle). 1 going orthographic equirectangular (
ortho2equi
), doing opposite. apply thempath
when appropriate (equi2ortho
). or there better more efficient way? - you'll notice interpolated method causes globe lose of styling - centering, inner blue sphere, , clipping. loss of
clipangle()
seems main culprit in interpolated orthographic projection. there anyway keeptransform()
,clipangle()
,rotate()
,scale()
on vanilla orthographic? suspect they'll need "hard coded" in each of interpolation methods? - what purpose of 3
delete
s @ bottom of interpolation method?
thank you!
Comments
Post a Comment