Fisheye Distortion Integration

[xcarlosamm]

#1349 A fisheye lens is a very wide-angle lens that shows places nearby in detail while also showing remote regions in successively less detail. This is very useful for big data visualization.

Can the Axis component be extended to support the fisheye feature? Could you point me in the right direction?

References:
https://github.com/d3/d3-plugins/tree/master/fisheye#fisheye-distortion
https://bost.ocks.org/mike/fisheye/

[williaster]

Hey @xcarlosamm 👋 thanks for checking out visx. Sorry for the delay, I was on vacation 🌴 .

This is an interesting idea, I've not explicitly played with it before. The @visx/react-spring AnimatedAxis + AnimatedGrid components might be the best bet for something which needs to update a scale so quickly (animation in vanilla react is hard to make performant, react-spring bypasses the normal react lifecycle methods to get around this).

If we want to add this, It might make the most sense to create a new package like @visx/fisheye or similar and build the necessary axis/grid components there (and that package could depend on @visx/react-spring, @visx/axisetc.; theAxiscomponent was extended to allow override of a ticks component which is what@visx/react-spring` leverages).

Then @visx/demo can be used to create an example sandbox to demonstrate its usage. Happy to chime in if you are interested in this direction and have more questions!

[xcarlosamm]

Hi @williaster, thanks in advance! I integrated the fisheye distortion outside of the library. Check the following comment for more details #1402.