Insufficient Zoom

I don't know if this is a bug or if the zoom is just limited, but when I try to modify the function for some features that are long-tailed distributed, the points end up overlapping, and I cannot continue using the interface. 🤔

When displaying the explanations from the interpret package, this doesn't happen because plotly has an 'infinite' zoom-in.

Hello @mnaR99, thanks for trying out GAM Changer!

When a user zooms over the plot, we use linear interpolation to smoothly change the radius of dots, so that dots appears to have the same size after zooming. As you have noticed, the method is not perfect.

If you are building GAM Changer from source, you can comment out the following lines to force dots to have the exact same radius value before and after zooming. It would result visually smaller dots after zooming.

gam-changer/src/global-explanation/continuous/cont-zoom.js

Lines 81 to 85 in d0a4cb5

    
           svgSelect.select('g.line-chart-node-group') 
        
             .attr('transform', transform) 
        
             .selectAll('circle.node') 
        
             .attr('r', rScale(transform.k)) 
        
             .style('stroke-width', nodeStrokeWidth / transform.k);

To learn more about our zooming + scaling logic, you can see the code below:

gam-changer/src/global-explanation/continuous/cont-zoom.js

Lines 126 to 139 in d0a4cb5

    
           /** 
        
            * Use linear interpolation to scale the node radius during zooming 
        
            * It is actually kind of tricky, there should be better functions 
        
            * (1) In overview, we want the radius to be small to avoid overdrawing; 
        
            * (2) When zooming in, we want the radius to increase (slowly) 
        
            * (3) Need to counter the zoom's scaling effect 
        
            * @param k Scale factor 
        
            */ 
        
           export const rScale = (k) => { 
        
             let alpha = (k - zoomScaleExtent[0]) / (zoomScaleExtent[1] - zoomScaleExtent[0]); 
        
             alpha = d3.easeLinear(alpha); 
        
             let target = alpha * (rExtent[1] - rExtent[0]) + rExtent[0]; 
        
             return target / k; 
        
           };

I will consider exposing an API to let users control this behavior in their notebooks. I will close this issue for now. Feel free to reopen it if you have more question.

	svgSelect.select('g.line-chart-node-group')
	.attr('transform', transform)
	.selectAll('circle.node')
	.attr('r', rScale(transform.k))
	.style('stroke-width', nodeStrokeWidth / transform.k);

	/**
	* Use linear interpolation to scale the node radius during zooming
	* It is actually kind of tricky, there should be better functions
	* (1) In overview, we want the radius to be small to avoid overdrawing;
	* (2) When zooming in, we want the radius to increase (slowly)
	* (3) Need to counter the zoom's scaling effect
	* @param k Scale factor
	*/
	export const rScale = (k) => {
	let alpha = (k - zoomScaleExtent[0]) / (zoomScaleExtent[1] - zoomScaleExtent[0]);
	alpha = d3.easeLinear(alpha);
	let target = alpha * (rExtent[1] - rExtent[0]) + rExtent[0];
	return target / k;
	};