Fisheye Distortion Integration

[xcarlosamm]

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/

[xcarlosamm]

I integrated the Fisheye Distortion using the following code

const [focus, setFocus] = useState(0);
const [distortion, setDistortion] = useState(0);

// scale

const yScale = useMemo(
        () => scaleFisheye(scaleLinear, distortion, focus)
            .range([innerHeight, 0])
            .domain([0, size]),
        [innerHeight, size, distortion, focus]
);

// handlers

const handleMouseEnter= (evt) => {
        setDistortion(4);
 }

const handleMouseMove = (evt) => {
        const {y} = localPoint(evt)
        setFocus(y);
}

const handleMouseLeave = (evt) => {
        // reset Fish-eye distortion
        setDistortion(0);
}

// ...

The function scaleFisheye is an extension of the fisheye.js

import {extent} from "d3-array";

export function scaleFisheye(scaleType, d = 0, a = 0) {
    const scale = scaleType()
    const fisheye = function (_) {
        let x = scale(_)
        let left = x < a
        let range = extent(scale.range())
        let min = range[0]
        let max = range[1]
        let m = left ? a - min : max - a
        if (m === 0) m = max - min
        return (left ? -1 : 1) * m * (d + 1) / (d + (m / Math.abs(x - a))) + a
    }

    fisheye.invert = function (xf) {
        let left = xf < a
        let range = extent(scale.range())
        let min = range[0]
        let max = range[1]
        let m = left ? a - min : max - a
        if (m === 0) m = max - min
        return scale.invert(a + m * (xf - a) / ((d + 1) * m - (left ? -1 : 1) * d * (xf - a)))
    }

    fisheye.distortion = (_) => {
        if (!arguments.length) return d
        d = +_
        return fisheye
    }

    fisheye.focus = function (_) {
        if (!arguments.length) return a
        a = +_
        return fisheye
    }

    fisheye.copy = function () {
        return scaleFisheye(scale.copy(), d, a);
    }

    fisheye.nice = scale.nice
    fisheye.ticks = scale.ticks
    fisheye.tickFormat = scale.tickFormat

    const bind = function (target, source, method) {
        return function () {
            let value = method.apply(source, arguments)
            return value === source ? target : value
        }
    }

    const rebind = function (target, source) {
        const n = arguments.length
        let i = 1, method;
        while (++i < n) {
            method = arguments[i]
            target[method] = bind(target, source, source[method])
        }
        return target
    }

    return rebind(fisheye, scale, 'domain', 'range')
}

//...