30:Taa7,chart = { const svg = d3 .create('svg') .attr('class', 'fisheye') .attr('viewBox', [0, 0, width, height]) .attr('width', width) .attr('height', height); svg.append(() => css); const BIG_STEP = 12; const xStepsBig = d3.range(0, width + BIG_STEP, BIG_STEP), yStepsBig = d3.range(0, height + BIG_STEP, BIG_STEP), xStepsSmall = d3.range(0, width + 4, 4), yStepsSmall = d3.range(0, height + 4, 4); const RADIUS = 120; var fisheye = d3Fisheye .radial() .radius(RADIUS) .distortion(params.d) .smoothingRatio(params.xw); var fisheyeDeprecated = d3FisheyeDeprecated .circular() .radius(RADIUS - RADIUS * params.xw / 2) .distortion(params.d); fisheye.focus([width / 4, height / 2]); fisheyeDeprecated.focus([(3 * width) / 4, height / 2]); var line = d3.line(); svg .selectAll('.x') .data(xStepsBig) .enter() .append('path') .attr('class', 'x') .datum(x => yStepsSmall.map(y => [x, y])); svg .selectAll('.y') .data(yStepsBig) .enter() .append('path') .attr('class', 'y') .datum(y => xStepsSmall.map(x => [x, y])); const pointsSelection = svg .selectAll('dot') .data(points) .enter() .append('circle') .attr('r', d => d.radius) .attr('cx', d => d.x) .attr('cy', d => d.y); var path = svg.selectAll('path').attr('d', line); svg .on('mousemove', function() { const mouse = d3.mouse(this); fisheye.focus(mouse); fisheyeDeprecated.focus(mouse); draw(); }) .on('mouseleave', function() { fisheye.focus([width / 4, height / 2]); fisheyeDeprecated.focus([(3 * width) / 4, height / 2]); draw(); }); function draw() { pointsSelection .each(d => { if (d.x > width / 2) { d.fisheye = fisheyeDeprecated(d); } else { d.fisheye = fisheye([d.x, d.y]); } }) .attr('cx', d => { if (d.x > width / 2) { return d.fisheye.x; } else { return d.fisheye[0]; } }) .attr('cy', d => { if (d.x > width / 2) { return d.fisheye.y; } else { return d.fisheye[1]; } }); path .attr('class', (d, i) => i === Math.floor(width / BIG_STEP / 2) ? 'separator y' : 'y' ) .attr('d', d => { return line( d.map(tuple => { if (tuple[0] > width / 2) { const point = fisheyeDeprecated({ x: tuple[0], y: tuple[1] }); return [point.x, point.y]; } else { return fisheye(tuple); } }) ); }); } draw(); return svg.node(); }31:T434,md` ## Summary Often when visualizing dense data it's useful to employ a fisheye effect which magnifies some radius around the cursor or point of interest. The most common technique is based on the work of [Sarkar and Brown](https://dl.acm.org/citation.cfm?id=142763). They identify a function that achieves the fisheye effect but produces a discontinuity in the effect at the edge of the radius. This discontinuity can result in a distracting "ring" around the fisheye where elements pile up which makes it hard to track features as they move in and out of the fisheye. We can mitigate this by introducing a *smoothing ratio*, which is defined as the fraction of the radius of the fisheye effect that will be dedicated to transitioning back out of fisheye distortion. This notebook presents a solution and [implementation](https://github.com/duaneatat/d3-fisheye) that advances the work done by [Benjamin F. Maier](https://beta.observablehq.com/@benmaier/a-visually-more-appealing-fisheye-function) where he outlines achieving smoothing using a "flipped-distance" curve. `32:Tf81,{ var width = 300; const chartWidth = 300; const context0 = DOM.context2d(width, width); const context1 = DOM.context2d(width, width); const context2 = DOM.context2d(width, width); let d = params.d; let xw = params.xw; if (false) { d = 3; xw = 0.5; } var ctxs = [context0]; var eye0 = d3Fisheye.radial().radius(width/3).distortion(d).smoothingRatio(xw); var eye1 = new fisheye(width/3,params.d,params.xw,'sarkar'); var eye2 = new fisheye(width/3,params.d,params.xw); var display_0 = new fisheyeDisplay(context0,width,eye0,'radial',false); var display_1 = new fisheyeDisplay(context1,width,eye1,'radial',false); var display_2 = new fisheyeDisplay(context2,width,eye2,'radial',false); var displays = [ display_0, display_1, display_2 ]; eye0.center([width/2, width/2]); eye1.focus([width/2, width/2]); eye2.focus([width/2, width/2]); function draw() { displays.forEach( function (d) { d.draw(); }); } draw(); var ctxs = [context0, context1, context2]; //var width = 200; let ctx = DOM.context2d(chartWidth, chartWidth); let pl = new simplePlot(ctx, chartWidth, chartWidth, 20); let x = linspace(0,1,1000); let y = x.map( _x => eye1.fisheyeFunction(_x)); pl.plot('sarkar',x,y); pl.plot('continuous',x,x.map( _x => eye2.fisheyeFunction(_x)),[],'#922',1.5); pl.plot('alternate',x,x.map( _x => eye0.fisheyeFunction(_x)),[],'#292',1.5); pl.plot('identity',x,x,[5,5],"#000",1.5); pl.xlabel('relative distance x'); pl.ylabel('new relative distance'); ctx.font = '12px Arial, Helvetica Neue, sans-serif' ctx.save() ctx.translate(width/2,width/2); ctx.textAlign='center'; ctx.rotate(-Math.PI/4); ctx.restore(); ctx.textAlign='left'; ctx.fillStyle = '#922'; ctx.fillText('flipped-distance',30, 70) ctx.fillStyle = '#292'; ctx.fillText('proposed',30,55) ctx.fillStyle = '#000'; ctx.fillText('sarkar-brown',30,40) var container = html`

Magnification Curves

Sarkar-Brown

Flipped-Distance Smoothing

Proposed Smoothing

`; var innerDiv0 = container.querySelector('.curves'); var innerDiv1 = container.querySelector('.improved'); var innerDiv2 = container.querySelector('.sarkar'); var innerDiv3 = container.querySelector('.flipped'); innerDiv0.appendChild(ctx.canvas); innerDiv1.appendChild(context0.canvas); innerDiv2.appendChild(context1.canvas); innerDiv3.appendChild(context2.canvas); context0.canvas.setAttribute("class",".gridview"); context1.canvas.setAttribute("class",".gridview"); context2.canvas.setAttribute("class",".gridview"); ctxs.forEach(function (c){ d3.select(c.canvas).on("mousemove", function () { let x = d3.event.layerX || d3.event.offsetX; let y = d3.event.layerY || d3.event.offsetY; eye0.focus([x,y]); eye1.focus([x,y]); eye2.focus([x,y]); draw(); }) .on("mouseout", function () { eye0.focus([width/2, width/2]); eye1.focus([width/2, width/2]); eye2.focus([width/2, width/2]); draw(); }); }); return container; }33:T1340,md` This fork of Benjamin Maier's notebook illustrates an improvement on and simplification of his "flipped-distance" approach to removing the abrupt discontinuity at the edge of a fisheye effect. See his comprehensive post from which this was forked for more information. The general idea is to add a quadratic to the Sarkar-Brown curve to create a piece-wise continuous curve back to the identity at the edge of the fisheye. There is a flaw in his approach, though, which was to start in "flipped-distance" space, which resulted in unnecessary calculations to get back to normal space. This transformation also lost significant magnification power. What is outlined below takes his original idea but eliminates the "flipped-distance" portions and improves upon it by adding one more equation and unknown to the system of equations to solve for ${tex`d_a`} which is an augmented magnification term that totally preserves the original maginfication of the sarkar-brown curve, regardless of the demagnification width. We don't need to start in flipped-distance space and can instead scale the Sarkar-Brown curve in place which allows adding the demagnification polynomial in "normal-distance" space. This eliminates much of the complexity of the previous approach (e.g. flipping the curves around ${tex`y = -x + 1`} and having to use ${tex`x_c`} rather than ${tex`x_w`} for the demagnification width). We preserve the magnification power ${tex`d`} at the center after scaling the Sarkar-Brown curve. This is done by using an adusted magnification coefficient ${tex`d_a`} with the scaled curve that will result in the derivative at ${tex`x = 0`} being the same as the original Sarkar-Brown curve. The improved smoothing function is ${tex.block` f(x) = \begin{cases} f_{smoothing}(x) = \frac{A_1(1 - x)^2}{2} + x &\mathrm{if\ \ } x_w < x \leq 1\\ f_{magnification}(x) = \frac{A_2(d_a + 1)x}{xd_a + 1} &\mathrm{if\ \ } 0 \leq x \leq x_w\\ \end{cases} `} where - ${tex`f_{smoothing}`} is the _demagnification_ curve that transitions back to the identity at the edge of the fisheye - ${tex`f_{magnification}`} is the scaled Sarkar-Brown magnification curve and - ${tex`A_1`} is the scaling factor for the smoothing function - ${tex`A_2`} is the scaling factor for the magnification function - And ${tex`d_a`} is the adjusted magnification factor that will result in the scaled magnification curve having the expected magnification power at the center of the fisheye. The values for ${tex`A1`}, ${tex`A2`}, and ${tex`d_a`} are found by solving the system of equations: ${tex.block` \begin{aligned} f_{smoothing}(1 - x_w) &= f_{magnification}(1 - x_w)\\ f'_{smoothing}(1 - x_w) &= f'_{magnification}(1 - x_w)\\ f'_{magnification}(0) &= f'_{sarkar}(0) \end{aligned} `} This enforces the desired conditions: that the smoothing curve and magnification curve intersect at ${tex`x = 1 - x_w`} with the same slope and the magnification curve has the same derivative as the original Sarkar-Brown curve at ${tex`x = 0`} which produces a continuous fisheye curve with the expected magnification power at the focus. This expands to: ${tex.block` \begin{aligned} \frac{A_{1} x_{w}^{2}}{2} - x_{w} + 1 &= \frac{A_{2} \left(d_{a} + 1\right) \left(x_{w} - 1\right)}{d_{a} \left(x_{w} - 1\right) - 1}\\ - A_{1} x_{w} + 1 &= \frac{A_{2} \left(d_{a} + 1\right)}{\left(d_{a} \left(x_{w} - 1\right) - 1\right)^{2}}\\ A_{2} \left(d_{a} + 1\right) &= d + 1 \end{aligned} `} We use \`sympy\` to solve for each of the values ${tex`A1`}, ${tex`A2`}, and ${tex`d_a`} in terms of ${tex`d`} and ${tex`x_w`}:

\`\`\`
import sympy as s

A1, A2, x, d, xw, da = s.symbols('A1 A2 x d x_w d_a')

eq1 = A1/2*((x-1)**2) + x
eq2 = A2*((da+1)*x)/(da*x + 1)
sarkar = ((d+1)*x)/(d*x + 1)
deq1 = s.simplify(s.diff(eq1, x))
deq2 = s.simplify(s.diff(eq2, x))
dsarkar = s.diff(sarkar, x)
solution = s.solve(
    [
      (eq1 - eq2).subs(x, xw),
      (deq1 - deq2).subs(x, xw),
      (dsarkar - deq2).subs(x, 0)
    ], 
    (A1, A2, da)
)
display(s.simplify(solution[0][0]))
display(s.simplify(solution[0][1]))
display(s.simplify(solution[0][2]))
\`\`\`

This yields: ${tex.block` \begin{aligned} A_1 &= \frac{ 2 x_{w} \left( d x_{w} - \sqrt{ d^{2} x_{w}^{2} + d x_{w}^{2} + d + 1 } + 1\right) } { x_{w}^{3} - 3 x_{w}^{2} + 3 x_{w} - 1 }\\ A_2 &= \frac{x_{w} \left(d^{2} x_{w} + d x_{w}^{2} + 2 d x_{w} - d \sqrt{d^{2} x_{w}^{2} + d x_{w}^{2} + d + 1} - d + x_{w}^{2} + x_{w} - \sqrt{d^{2} x_{w}^{2} + d x_{w}^{2} + d + 1} - 1\right)}{2 d x_{w}^{2} - d x_{w} - d + x_{w}^{3} + x_{w}^{2} - 2 x_{w}}\\ d_a &= \frac{d x_{w} + \sqrt{\left(d + 1\right) \left(d x_{w}^{2} + 1\right)} - 1}{x_{w} \left(x_{w} + 1\right)} \end{aligned} `} `34:T1cc3,class fisheye { constructor ( r, d = 3, xw = 0.4, mode = 'continuous' ) { this.r = r; this.x_max = null; this.x_min = null; this.range_x = null; this.range_y = null; this.magnification(d) .demagnificationWidth(xw); this.mode = mode; this.focus_x = null; } fisheye(x,direction = 0, inverse = false){ if (this.focus_x === null) return x; if ((this.xw == 1 || this.d == 0) && this.mode == 'continuous') return x; let focus; if (!this.focus_x.length) focus = this.focus_x; else focus = this.focus_x[direction]; let dx = x - focus; if ((Math.abs(dx) > this.r) || (x == focus)) return x; let dmax = this.r; let range; if (direction == 0) range = this.range_x; else range = this.range_y; if (dx > 0){ if (! (range === null) ) if ( range[1] - focus < this.r) dmax = range[1] - focus; } else if (dx < 0) { if (! (range === null) ) if ( focus - range[0] < this.r) dmax = focus - range[0]; } let d = this.d; let xc = this.xc; let A1 = this.A1; let A2 = this.A2; let rescaled = Math.abs(dx) / dmax; let new_r; if (this.mode == 'continuous') { if (!inverse) new_r = this.fisheyeContinuous(rescaled); else new_r = this.fisheyeContinuousInverse(rescaled); } else if (this.mode == 'sarkar') { if (!inverse) new_r = this.fisheyeSarkar(rescaled); else new_r = this.fisheyeSarkarInverse(rescaled); } else throw 'Unknown mode "'+ this.mode + '"'; return focus + Math.sign(dx) * dmax * new_r; } fisheyeInverse(x,direction=0){ return this.fisheye(x,direction,true); } fisheyeFunction(x){ if ( (x<=0) || (x>=1) ) return x; let f; if (this.mode == 'continuous') f = this.fisheyeContinuous(x); else if (this.mode == 'sarkar') f = this.fisheyeSarkar(x); return f; } fisheyeInverseFunction(x){ if ( (x<=0) || (x>=1) ) return x; let f; if (this.mode == 'continuous') f = this.fisheyeContinuousInverse(x); else if (this.mode == 'sarkar') f = this.fisheyeSarkarInverse(x); return f; } fisheyeCartesian(pos,inverse=false) { let x = this.fisheye(pos[0],0,inverse); let y = this.fisheye(pos[1],1,inverse); return [x,y]; } fisheyeCartesianInverse(x) { return this.fisheyeCartesian(x, true); } solve_linear_equation(a,b,c,d,vector_b) { /* solves equation / a b \ / A1 \ / b1 \ | | | | = | | \ c d / \ A2 / \ b2 / */ let det = a*d - b*c; let A1 = ( d*vector_b[0] - b*vector_b[1]) / det; let A2 = (-c*vector_b[0] + a*vector_b[1]) / det; return [ A1, A2 ]; } rescale() { let xw = this.xw; let d = this.d; if ((xw>0) && (xw<1)) { let A = this.solve_linear_equation( Math.pow(xw,2)/2., 1 - ((d+1)*xw / (d*xw+1)), xw, - (d+1) / Math.pow(d*xw+1,2), [ (1-xw), -1 ]); this.A1 = A[0]; this.A2 = A[1]; } else if (xw == 0) { this.A1 = 0; this.A2 = 1; } else if (xw == 1) { this.A1 = 0; this.A2 = 1; } // this is the critical value of x where the used function changes this.xc = 1 - (this.A1/2 * Math.pow(xw,2) + xw); return this; } magnification(d){ if (!arguments.length) return this.d; d = +d; if (d <= 0) d = 0; this.d = d; return this.rescale(); } demagnificationWidth(xw){ if (!arguments.length) return this.xw; xw = +xw; this.xw = xw; return this.rescale(); } rangeX(_){ if (!arguments.length) return this.range_x; this.range_x = _; return this; } range(_){ if (!arguments.length) return this.range_x; return this.rangeX(_); } rangeY(_){ if (!arguments.length) return this.range_y; this.range_y = _; return this; } focus(_){ if (!arguments.length) return this.focus_x; this.focus_x = _; return this; } radius(_){ if (!arguments.length) return this.r; this.r = +_; return this; } functionMode(_){ if (!arguments.length) return this.mode; this.mode = _; return this; } fisheyeRadial(pos,inverse = false){ if ((this.focus_x === null)|| (typeof this.focus_x == 'undefined')) return pos; if ((this.xw == 1 || this.d == 0)&& this.mode == 'continuous') return pos; let x = pos[0]; let y = pos[1]; let fx = this.focus_x[0]; let fy = this.focus_x[1]; let dr = Math.sqrt( Math.pow(x-fx,2) + Math.pow(y-fy,2) ); if ((Math.abs(dr) > this.r) || (dr == 0)) { //console.log('identity!'); return pos; } let theta = Math.atan2(y-fy, x-fx); let cos = Math.cos(theta); let sin = Math.sin(theta); let dmax = this.r; let d = this.d; let xc = this.xc; let A1 = this.A1; let A2 = this.A2; let rescaled = dr / dmax; let newX = [0,0]; let new_r; if (this.mode == 'continuous') { if (!inverse) new_r = this.fisheyeContinuous(rescaled); else new_r = this.fisheyeContinuousInverse(rescaled); } else if (this.mode == 'sarkar') { if (!inverse) new_r = this.fisheyeSarkar(rescaled); else new_r = this.fisheyeSarkarInverse(rescaled); } newX[0] = fx + cos * dmax * new_r; newX[1] = fy + sin * dmax * new_r; return newX; } fisheyeRadialInverse(x) { return this.fisheyeRadial(x, true); } fisheyeContinuous(x){ if (x <= this.xc) return (x * (this.d+1)) / (this.d*x + this.A2); else return 1 - ( -1/this.A1 + Math.sqrt(1/(this.A1*this.A1) + 2*(1-x)/this.A1) ) ; } fisheyeContinuousInverse(x){ if (x <= 1 - this.xw) return this.A2 * x / (this.d * (1-x) + 1); else return x - this.A1/2 * Math.pow(1-x,2) ; } fisheyeSarkar(x) { return (this.d+1) * x / (this.d*x + 1); } fisheyeSarkarInverse(x) { return 1 - (this.d+1) * (1-x) / (this.d*(1-x) + 1); } }35:Tc42,class fisheyeDisplay { constructor( context, width, eye, mode = 'radial', mark_zoom_area = true, color = '#000' ) { this.width = width; this.height = width; this.ctx = context; this.fisheye = eye; this.mode = mode; this.mark_zoom_area = mark_zoom_area; this.color = color; this.data(); } data() { let N = 20000; let dy = this.width / N; let dir1 = []; let dir2 = []; let dx = this.width / N; let dirs_x = []; let dirs_y = []; let x = 0; let trig_factor = 0.4; for (var i = 0; i < N && x <= this.width; ++i) { x += (dx * 1) / (0.5 * Math.cos(x * trig_factor) + 0.7); //dir1.push(x); let y = (Math.sin(x * trig_factor) / 2 + 0.5) * this.height * 0.8 + 0.1 * this.height; //let x2 = x + 2*dx * (Math.random()-0.5); //y = y + 2*dx * (Math.random()-0.5); dir1.push(x); dir2.push(y); //dir2.push(this.width/3); } this.dir1 = dir1; this.dir2 = dir2; } plot(x, y) { this.ctx.moveTo(x[0], y[0]); for (var i = 1; i < x.length; ++i) { this.ctx.lineTo(x[i], y[i]); } } draw() { this.ctx.clearRect(0, 0, this.width, this.height); this.ctx.strokeStyle = this.color; this.ctx.lineWidth = 1.1; let dir1 = [], dir2 = []; for (var i = 0; i < this.dir1.length; ++i) { let x = this.dir1[i]; let y = this.dir2[i]; let pos; if (this.mode == 'radial') pos = this.fisheye.fisheyeRadial([x, y]); else pos = this.fisheye.fisheyeCartesian([x, y]); dir1.push(pos[0]); dir2.push(pos[1]); } this.ctx.beginPath(); this.plot(dir1, dir2); this.ctx.stroke(); this.ctx.beginPath(); if ( !( this.fisheye.focus() === null || typeof this.fisheye.focus() == 'undefined' ) && this.mark_zoom_area ) { this.ctx.save(); this.ctx.setLineDash([10, 10]); this.ctx.strokeStyle = 'rgba(100,100,100,0.3)'; this.ctx.lineWidth = 3; if (this.mode == 'radial') this.ctx.arc( this.fisheye.focus()[0], this.fisheye.focus()[1], this.fisheye.radius(), 0, 2 * Math.PI ); else { let fx = this.fisheye.focus()[0]; let fy = this.fisheye.focus()[1]; let r = this.fisheye.radius(); let xmin = d3.max([fx - r, 0]); let xmax = d3.min([fx + r, this.width]); let ymin = d3.max([fy - r, 0]); let ymax = d3.min([fy + r, this.height]); this.ctx.beginPath(); this.ctx.moveTo(0, ymin); this.ctx.lineTo(xmin, ymin); this.ctx.lineTo(xmin, 0); this.ctx.moveTo(0, ymax); this.ctx.lineTo(xmin, ymax); this.ctx.lineTo(xmin, this.height); this.ctx.moveTo(this.width, ymax); this.ctx.lineTo(xmax, ymax); this.ctx.lineTo(xmax, this.height); this.ctx.moveTo(this.width, ymin); this.ctx.lineTo(xmax, ymin); this.ctx.lineTo(xmax, 0); } this.ctx.stroke(); this.ctx.restore(); } } } 36:T139e,class simplePlot { constructor(context,width,height,margin=20,fsize=12) { this.ctx = context; this.w = width; this.h = height; this.margin = margin; this.xScale = d3.scaleLinear().range([margin,this.w-margin]); this.yScale = d3.scaleLinear().range([this.h-margin,margin]); this.data = {}; this.range_x = null; this.range_y = null; this.title = null; this.x_label = null; this.y_label = null; this.fsize = fsize; } plot(label,x,y,linedash=[],linecolor='#000',linewidth=1) { if (!this.data.hasOwnProperty(label)) { this.data[label] = {}; this.data[label].linedash = linedash; this.data[label].linecolor = linecolor; this.data[label].linewidth = linewidth; } this.data[label].x = x; this.data[label].y = y; if (! (this.range_x === null)) { let xmax = d3.max([this.range_x[1],d3.max(x)]); let xmin = d3.min([this.range_x[0],d3.min(x)]); if (xmax != this.range_x[1] || xmin != this.range_x[0]) this.rangeX([ xmin, xmax ]); } else { this.rangeX([ d3.min(x), d3.max(x) ]); } if (! (this.range_y === null)) { let ymax = d3.max([this.range_y[1],d3.max(y)]); let ymin = d3.min([this.range_y[0],d3.min(y)]); if (ymax != this.range_y[1] || ymin != this.range_y[0]) this.rangeY([ ymin, ymax ]); } else { this.rangeY([ d3.min(y), d3.max(y) ]); } this.draw(); } changeAttr(label,linedash=null,linecolor=null,linewidth=null) { if (linedash !== null) this.data[label].linedash = linedash; if (linecolor !== null) this.data[label].linecolor = linecolor; if (linewidth !== null) this.data[label].linewidth = linewidth; this.draw(); } rangeX (rX) { if (!arguments.length) return this.range_x; this.range_x = rX; this.xScale.domain(rX); this.draw(); } rangeY (rY) { if (!arguments.length) return this.range_y; this.range_y = rY; this.yScale.domain(rY); this.draw(); } xlabel(xl) { if (!arguments.length) return this.x_label; this.x_label = xl; this.draw(); } ylabel(yl) { if (!arguments.length) return this.y_label; this.y_label = yl; this.draw(); } draw() { let ctx = this.ctx; let xS = this.xScale; let yS = this.yScale; let mrgn = this.margin; let w = this.w; let h = this.h; ctx.clearRect(0,0,this.w,this.h); for (var label in this.data) { let x = this.data[label].x; let y = this.data[label].y; let lw = this.data[label].linewidth; let ld = this.data[label].linedash; let lc = this.data[label].linecolor; ctx.save(); ctx.lineWidth = lw; ctx.setLineDash(ld); ctx.strokeStyle = lc; ctx.beginPath(); ctx.moveTo(xS(x[0]), yS(y[0])); for(var i = 1; i < x.length; ++i) ctx.lineTo(xS(x[i]), yS(y[i])); ctx.stroke(); } // ========== DRAW FRAME AND LABELS ========= ctx.strokeStyle = '#000'; ctx.setLineDash([]); ctx.lineWidth = 1; ctx.beginPath(); ctx.rect(mrgn,mrgn,this.w-2*mrgn, this.h-2*mrgn); ctx.stroke(); let fsize = this.fsize; ctx.textAlign = 'center'; ctx.fillStyle = '#000'; ctx.font = fsize.toString() + 'px Arial, Helvetica Neue, sans-serif'; let fH = ctx.measureText("W").width * 1; //console.log(metrics); //let fH = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent; //console.log(fH); if (this.x_label !== null) ctx.fillText(this.x_label,w/2,h); if (this.y_label !== null) { ctx.save(); ctx.translate(1.2*mrgn - fH,h/2); ctx.rotate(-Math.PI/2); ctx.fillText(this.y_label,0,0); ctx.restore(); } if (this.range_x !== null) { let xmin = this.stripZeros(d3.format('s')(this.range_x[0])); let xmax = this.stripZeros(d3.format('s')(this.range_x[1])); let fsize = this.fsize / 13 * 10; ctx.font = fsize.toString() + 'px Arial, Helvetica Neue, sans-serif'; ctx.textAlign = 'left'; ctx.fillText(xmin,mrgn,(h-mrgn) + fsize ); ctx.textAlign = 'right'; ctx.fillText(xmax,w-mrgn,(h-mrgn) + fsize ); } if (this.range_y !== null) { let ymin = this.stripZeros(d3.format('s')(this.range_y[0])); let ymax = this.stripZeros(d3.format('s')(this.range_y[1])); let fsize = this.fsize / 13 * 10; ctx.font = fsize.toString() + 'px Arial, Helvetica Neue, sans-serif'; ctx.textAlign = 'right'; ctx.fillText(ymin,mrgn-0.3*fsize,(h-mrgn) ); ctx.textAlign = 'right'; ctx.fillText(ymax,mrgn-0.3*fsize,mrgn + fsize ); } } stripZeros(s) { while (s[s.length-1] == '0') { s = s.slice(0,s.length-1); } if (s[s.length-1] == '.') s = s.slice(0,s.length-1); return s; } }37:T7f8,d3FisheyeDeprecated = { const d3FisheyeDeprecated = { scale: function(scaleType) { return d3_fisheye_scale(scaleType(), 3, 0); }, circular: function() { var radius = 200, distortion = 2, k0, k1, focus = [0, 0]; function fisheye(d) { var dx = d.x - focus[0], dy = d.y - focus[1], dd = Math.sqrt(dx * dx + dy * dy); if (!dd || dd >= radius) return { x: d.x, y: d.y, z: dd >= radius ? 1 : 10 }; var k = ((k0 * (1 - Math.exp(-dd * k1))) / dd) * 0.75 + 0.25; return { x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10) }; } function rescale() { k0 = Math.exp(distortion); k0 = (k0 / (k0 - 1)) * radius; k1 = distortion / radius; return fisheye; } fisheye.radius = function(_) { if (!arguments.length) return radius; radius = +_; return rescale(); }; fisheye.distortion = function(_) { if (!arguments.length) return distortion; distortion = +_; return rescale(); }; fisheye.focus = function(_) { if (!arguments.length) return focus; focus = _; return fisheye; }; return rescale(); } }; function d3_fisheye_scale(scale, d, a) { function fisheye(_) { var x = scale(_), left = x < a, range = d3.extent(scale.range()), min = range[0], max = range[1], 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.distortion = function(_) { if (!arguments.length) return d; d = +_; return fisheye; }; fisheye.focus = function(_) { if (!arguments.length) return a; a = +_; return fisheye; }; fisheye.copy = function() { return d3_fisheye_scale(scale.copy(), d, a); }; fisheye.nice = scale.nice; fisheye.ticks = scale.ticks; fisheye.tickFormat = scale.tickFormat; return d3.rebind(fisheye, scale, 'domain', 'range'); } return d3FisheyeDeprecated }38:[] 2e:{"title":"Smoothed Fisheye","cells":[{"id":0,"value":"md`# Smoothed Fisheye`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1542,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"\nmd`*Left*: With smoothing, *Right*: Without smoothing (hover to move the focus)`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1695,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1705,"value":"md`## Comparison of magnification curves`","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1178,"value":"viewof params = {\n const form = html``;\n form.oninput = () => {\n const d = form.d.valueAsNumber.toPrecision(2);\n const xw = form.xw.valueAsNumber.toPrecision(2);\n form.value = {\n d: d,\n xw: xw\n };\n form.querySelector('.d-container').innerText = d;\n form.querySelector('.xw-container').innerText = xw;\n };\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"\nmd`*Fig. 1*: Comparison of different fisheye functions (hover over the figures). Top right is the traditional Sarkar-Brown curve, bottom left is Benjamin F. Maier's \"flipped-distance\" curve, and bottom right is the approach proposed in this notebook.`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":801,"value":"md`## Details`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"md`\nBelow is an example of the solution for ${tex`x_w = 0.45`} and ${tex`d = 10`}. The blue curve is the original Sarkar-Brown magnification curve. The black curve is the piecewise smoothed version that combines the scaled sarkar-brown (to the left) and the smoothing parabola (to the right). The red line is the transition point between the two curves (${tex`1 - x_w`}). [Click here](https://www.desmos.com/calculator/zzzsq1iqcs) to see the full solution on desmos.com with sliders to adust the distortion and smoothing.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1512,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1501,"value":"md`\nThis has been implemented in the d3-fisheye plugin, available here: https://github.com/duaneatat/d3-fisheye\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1819,"value":"css = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1547,"value":"width = 696","pinned":false,"hidden":false,"mode":"ojs"},{"id":1549,"value":"height = 348","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"d3 = require('d3@4')","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"linspace = function(start, stop, nsteps){\n nsteps = nsteps + 1;\n let delta = (stop-start)/(nsteps-1)\n return d3.range(nsteps).map(function(i){return start+i*delta;});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1481,"value":"d3Fisheye = require(\"d3-fisheye@1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1659,"value":"points = {\n const points = [];\n const clusterX = d3.randomNormal(width / 4, width * 0.075);\n const clusterY = d3.randomNormal(height / 2, width * 0.075);\n for (let j = 0; j < 100; j++) {\n const cluster = {\n x: clusterX(),\n y: clusterY(),\n radius: Math.random() * 5 + 5\n };\n const randomPoint = {\n x: Math.random() * width,\n y: Math.random() * height,\n radius: Math.random() * 2\n };\n points.push(randomPoint);\n for (let i = 0; i < 2; i++) {\n const x = d3.randomNormal(cluster.x, cluster.radius);\n const y = d3.randomNormal(cluster.y, cluster.radius);\n const pointLeft = { x: x(), y: y(), radius: Math.random() * 2 };\n const pointRight = { ...pointLeft, x: pointLeft.x + width / 2 };\n points.push(pointLeft);\n points.push(pointRight);\n }\n }\n return points;\n\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}