2c:null 2d:["$","title",null,{"children":"A visually more appealing fisheye function | Benjamin F. Maier | Observable"}] 32:T825, { var width = 300; const context0 = DOM.context2d(width, width); const context1 = DOM.context2d(width, width); var eye0 = new fisheye(width/3,1.5,0.5,'sarkar'); var eye1 = new fisheye(width/3,3,0.4); var display_0 = new fisheyeDisplay(context0,width,eye0,'radial',false); var display_1 = new fisheyeDisplay(context1,width,eye1,'radial',false); var displays = [ display_0, display_1 ]; eye0.focus([width/2, width/2]); eye1.focus([width/2, width/2]); function draw() { displays.forEach( function (d) { d.draw(); }); } draw(); var ctxs = [context0, context1]; var this_div = document.createElement("div"); var inner_div = document.createElement("div"); var inner_div_1 = document.createElement("div"); var p = document.createElement("p"); p.textContent = "(a) Original fisheye"; //p.setAttribute("style","padding-top: -20px;"); this_div.appendChild(inner_div); inner_div.setAttribute("style","padding-right: 40px; float: left;"); //inner_div.appendChild(p); inner_div.appendChild(context0.canvas); //this_div.appendChild var p2 = document.createElement("p"); //p2.textContent = "(b) Adjusted fisheye"; inner_div_1.setAttribute("style","padding-right: 40px; "); //p2.setAttribute("style","padding-top: -20px;"); inner_div_1.appendChild(p2); inner_div_1.appendChild(context1.canvas); this_div.appendChild(inner_div_1); context0.canvas.setAttribute("class",".gridview"); //context0.canvas.setAttribute("style","padding-right: 40px;"); context1.canvas.setAttribute("class",".gridview"); ctxs.forEach(function (c){ d3.select(c.canvas).on("mousemove", function (event) { let mouse = d3.mouse(c.canvas); let x = mouse.x; let y = mouse[0]; eye0.focus(mouse); eye1.focus(mouse); draw(); }) .on("mouseout", function () { eye0.focus([width/2, width/2]); eye1.focus([width/2, width/2]); draw(); }); }); return this_div; }33:T4db, md`A local-zoom fisheye-function works in the following way. Around a focal point _p_ up to a radius _R_, every point _x_ is pushed away from the direction in which _p_ lies. This means that the fisheye-function _f_ which maps between the original coordinates _x_ and the new coordinates _X_, is equal to the identity function _f_(_x_) = _x_ outside of the zooming scope (if |_p_ - _x_| > _R_) and fulfills certain criteria inside of the zooming scope (for |_p_ - _x_| < _R_), listed as follows. * The function has to push points _away_ from _x_, hence _f_(_x_) ≥ _x_. * The function has to be the identity function for _x_ = _p_, i.e. at the focal point _p_. * The function should be the identity function for _x_ = _R_, i.e. when transitioning to non-zooming in order to avoid jumps. * The function's derivative should be _f'_(_x'_) < ∞ at the focal point, since extrema would magnify too strongly locally. * The function should be easily invertable, such that an interaction in the vicinity of the focal point can be traced back to the original data without computing roots numerically. [Sarkar and Brown](https://dl.acm.org/citation.cfm?id=142763) found such a function which fulfills all the criteria above, which is` 34:T732,{ var width = 300; const context0 = DOM.context2d(width, width); var ctxs = [context0]; var eye0 = new fisheye(width/3,magnification_fig_2,0.5,'sarkar'); var display_0 = new fisheyeDisplay(context0,width,eye0,'radial',false); var displays = [ display_0 ]; eye0.focus([width/2, width/2]); function draw() { displays.forEach( function (d) { d.draw(); }); } draw(); var ctxs = [context0]; console.log(eye0.fisheyeFunction(0.3)); //var width = 200; let ctx = DOM.context2d(width, width); let pl = new simplePlot(ctx, width, width,20); let x = linspace(0,1,1000); let y = x.map( _x => eye0.fisheyeFunction(_x)); console.log(eye0.d); pl.plot('sarkar',x,y); //pl.plot('sarkarInverse',x,x.map( _x => eye0.fisheyeInverseFunction(_x))); pl.plot('identity',x,x,[5,5],"#000",1.5); pl.xlabel('relative distance x'); pl.ylabel('new relative distance'); console.log(pl); ctx.save() ctx.font = '12px Arial, Helvetica Neue, sans-serif' ctx.translate(width/2,width/2); ctx.textAlign='center'; ctx.rotate(-Math.PI/4); ctx.fillText('identity',0,+13) ctx.restore(); var this_div = document.createElement("div"); var inner_div = document.createElement("div"); this_div.appendChild(inner_div); inner_div.setAttribute("style","padding-right: 40px; float: left;"); inner_div.appendChild(context0.canvas); this_div.appendChild(ctx.canvas); context0.canvas.setAttribute("class",".gridview"); ctxs.forEach(function (c){ d3.select(c.canvas).on("mousemove", function (event) { let mouse = d3.mouse(c.canvas); eye0.focus(mouse); draw(); }) .on("mouseout", function () { eye0.focus([width/2, width/2]); draw(); }); }); return this_div; }35:T489,md` However, once implemented, the results seem to be discontinuous and squeezed at the boundary of the magnification area, i.e. at the transition point _x_ = _R_, which is induced by a jump in the derivative of the fisheye-function (i.e. in the inverse point density) since _f_'(_x_) ≠ 1 for _x_ = _R_. Furthermore, the data at the edges appears to be "squeezed" which is induced by a rapid demagnification due to the fact that the fisheye-function has to return to represent the identity at _x_ = _R_. Thus, we have to introduce additional criteria for the fisheye-function, as follows. The derivative of the function at _x_ = _R_ has to match the derivative of the identity function, which is _f'_(_x_) = 1. More precisely, the function has to have a continuous derivative at all points in order to have a continuous point density and no jumps in the data continuity. * The function must have identity derivative at _x_ = _R_ (i.e. _f'_(_R_) = 1). * The function must be contiuously differentiable for |_p_ - _x_| > 0. Only functions fulfilling these criteria will have a smooth transition in point density and will be more pleasing to the eye. `36:T530,md`While the discontiunities at the boundary of the magnification zone are induced by the discontinuities in the first derivative of the fisheye-function, the "squeezing" at the boundary emerges due to a too rapid decrease of the magnification. We want to control this behavior by introducing a _demagnification width_ ${tex`0 \leq x_w \leq 1`} in which the fisheye-function smoothly transitions back to the identity function _f_(_x_) = _x_. A function fulfilling this behavior is ${tex.block` f(x) = \begin{cases} \frac{(d+1)x}{xd + A_2} &\mathrm{if\ \ } 0 \leq x \leq x_c\\ 1 + \frac{1}{A_1} - \sqrt{\frac{1}{A_1^2} + \frac{2}{A_1}(1-x)} &\mathrm{if\ \ } x_c < x \leq 1,\\ \end{cases} `} where ${tex.block` x_c = 1 - x_w - \frac{A_1}{2} x_w^2 `} and ${tex.block` \left(\begin{matrix} A_1 \\ A_2\end{matrix}\right) = \left(\begin{matrix} \frac{x_w^2}{2} & 1-\frac{x_w(d+1)}{dx_w+1}\\ x_w & -\frac{d+1}{(dx_w+1)^2} \end{matrix}\right)^{-1} \left(\begin{matrix} 1-x_w \\ -1\end{matrix}\right). `} Note that for ${tex`x_w=1`} we have _f_(_x_) = _x_ and for ${tex`x_w=0`} we find the original Sarkar-Brown function. Both the original and the new function are shown in the Figure below. A derivation of the function can be found in the Appendix. `37:Tb09,{ var width = 300; const context0 = DOM.context2d(width, width); const context1 = DOM.context2d(width, width); var ctxs = [context0]; var eye0 = new fisheye(width/3,magnification_fig_3,demagnification_width_fig_3,'sarkar'); var eye1 = new fisheye(width/3,magnification_fig_3,demagnification_width_fig_3); var display_0 = new fisheyeDisplay(context0,width,eye0,'radial',false); var display_1 = new fisheyeDisplay(context1,width,eye1,'radial',false,'#922'); var displays = [ display_0, display_1 ]; eye0.focus([width/2, width/2]); eye1.focus([width/2, width/2]); function draw() { displays.forEach( function (d) { d.draw(); }); } draw(); var ctxs = [context0, context1]; //var width = 200; let ctx = DOM.context2d(width, width); let pl = new simplePlot(ctx, width, width,20); let x = linspace(0,1,1000); let y = x.map( _x => eye0.fisheyeFunction(_x)); console.log(eye0.d); pl.plot('sarkar',x,y); pl.plot('continuous',x,x.map( _x => eye1.fisheyeFunction(_x)),[],'#922',1.5); pl.plot('continuousInverse',x,x.map( _x => eye1.fisheyeInverseFunction(_x)),[5,2,3],'#922',1.5); pl.plot('identity',x,x,[5,5],"#000",1.5); pl.xlabel('relative distance x'); pl.ylabel('new relative distance'); console.log(pl); 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.fillText('identity',0,+13) ctx.restore(); ctx.textAlign='right'; ctx.fillStyle = '#922'; ctx.fillText('adjusted',2*width/3,100) ctx.textAlign='center'; ctx.fillStyle = '#000'; ctx.fillText('original',width/2,40) ctx.textAlign='center'; ctx.fillStyle = '#d99'; ctx.fillText('inverse of adjusted',width/2,width-30) var this_div = document.createElement("div"); var inner_div = document.createElement("div"); var inner_div_1 = document.createElement("div"); this_div.appendChild(inner_div); this_div.appendChild(inner_div_1); inner_div.setAttribute("style","padding-right: 40px; float: left;"); inner_div.appendChild(context0.canvas); inner_div_1.setAttribute("style","padding-right: 40px; float: left;"); inner_div_1.appendChild(context1.canvas); this_div.appendChild(ctx.canvas); context0.canvas.setAttribute("class",".gridview"); context1.canvas.setAttribute("class",".gridview"); ctxs.forEach(function (c){ d3.select(c.canvas).on("mousemove", function (event) { let mouse = d3.mouse(c.canvas) eye0.focus(mouse); eye1.focus(mouse); draw(); }) .on("mouseout", function () { eye0.focus([width/2, width/2]); eye1.focus([width/2, width/2]); draw(); }); }); return this_div; }38:Ta06,{ var width = 300; const context0 = DOM.context2d(width, width); const context1 = DOM.context2d(width, width); const context2 = DOM.context2d(width, width); const context3 = DOM.context2d(width, width); var eye0 = new fisheye(R_fig_4,magnification_fig_4,demagnification_width_fig_4,'sarkar'); var eye1 = new fisheye(R_fig_4,magnification_fig_4,demagnification_width_fig_4); var display_0 = new fisheyeDisplay(context0,width,eye0,'radial',true); var display_1 = new fisheyeDisplay(context1,width,eye0,'cartesian',true); var display_2 = new fisheyeDisplay(context2,width,eye1,'radial',true,'#922'); var display_3 = new fisheyeDisplay(context3,width,eye1,'cartesian',true,'#922'); var displays = [ display_0, display_1, display_2, display_3 ]; eye0.focus([width/2, width/2]); eye1.focus([width/2, width/2]); function draw() { displays.forEach( function (d) { d.draw(); }); } draw(); var ctxs = [context0, context1,context2, context3]; var this_div = document.createElement("div"); var inner_div_0 = document.createElement("div"); var inner_div_1 = document.createElement("div"); var inner_div_2 = document.createElement("div"); var inner_div_3 = document.createElement("div"); inner_div_0.setAttribute("style","padding-right: 40px; float: left;"); inner_div_0.appendChild(context0.canvas); this_div.appendChild(inner_div_0); inner_div_1.setAttribute("style","padding-right: 40px; "); inner_div_1.appendChild(context1.canvas); this_div.appendChild(inner_div_1); inner_div_2.setAttribute("style","padding-right: 40px; float: left;"); inner_div_2.appendChild(context2.canvas); this_div.appendChild(inner_div_2); inner_div_3.setAttribute("style","padding-right: 40px; "); inner_div_3.appendChild(context3.canvas); this_div.appendChild(inner_div_3); context0.canvas.setAttribute("class",".gridview"); //context0.canvas.setAttribute("style","padding-right: 40px;"); context1.canvas.setAttribute("class",".gridview"); context2.canvas.setAttribute("class",".gridview"); context3.canvas.setAttribute("class",".gridview"); ctxs.forEach(function (c){ d3.select(c.canvas).on("mousemove", function (event) { let mouse = d3.mouse(c.canvas); eye0.focus(mouse); eye1.focus(mouse); draw(); }) .on("mouseout", function () { eye0.focus([width/2, width/2]); eye1.focus([width/2, width/2]); draw(); }); }); return this_div; }39:T83a,md` We start with a flipped distance space where the focal point is at _x_ = 1 and we approach it from _x_ = 0. The function _z_(_x_) shall describe the integrated perceived shape of the magnification. We define the demagnification function below the demagnification width ${tex `x < x_w`} as ${tex.block` z_1(x) = \frac{A_1}{2}x^2 + x` } with derivative ${tex.block` z_1'(x) = A_1x + 1. ` } This function has value ${tex`z_1(x) = 0`} and derivative ${tex`z_1'(x) = 1`} at _x_ = 0 The magnification function for coordinates beyond the demagnification width ${tex `x > x_w`} will be equal to a scaled Sarkar-Brown function as ${tex.block` z_2(x) = A_2\frac{(d+1)x}{dx+1} + 1 - A_2` } with derivative ${tex.block` z_2'(x) = A_2\frac{d+1}{(dx+1)^2}.` } Now, we want to match both functions and their derivatives at the transition point, hence ${tex.block` z_1(x_w) = z_2(x_w)` } and ${tex.block` z_1'(x_w) = z_2'(x_w).` } Using these conditions we can find the parameters ${tex `A_1`} and ${tex `A_2`} from the linear system ${tex.block` \left(\begin{matrix} \frac{x_w^2}{2} & 1-\frac{x_w(d+1)}{dx_w+1}\\ x_w & -\frac{d+1}{(dx_w+1)^2} \end{matrix}\right) \left(\begin{matrix} A_1 \\ A_2\end{matrix}\right) = \left(\begin{matrix} 1-x_w \\ -1\end{matrix}\right). `} In order to find the final fisheye-function we now flip both coordinates at _x_ = 1/2 and _z_ = 1/2, respectively and subsequently compute the inverse, i.e. we replace ${tex.block` z_i \longrightarrow 1-x `} on the left-hand side of the function definitions and ${tex.block` x \longrightarrow 1-f_i, `} on the right-hand side of the function definitions, then solve for ${tex`f_i`} where ${tex`i=1,2`}, corresponding to the functions defined above. Before solving for _f_ we find the inverse functions given in the main text. The critical value ${tex`x_c`} where ${tex`f_1`} transitions to ${tex`f_2`} is then given by the flipped original function as ${tex.block` 1 - z_1(x_w) = \frac{A_1}{2}x_w^2 + x_w, `} hence ${tex.block` x_c = 1 - \frac{A_1}{2}x_w^2 - x_w. `} `3a:T1cc4, 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); } }3b:Te5e,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 0 for _x_ = _p_ = 0. We will call the parameter _d_ the _magnification_ in the following. With increasing _d_, the derivative of _f_ at the focal point increases and hence the point density decreases, yielding greater magnification.\n\nThis increased magnification around the focal point has to be decreased again in order for the function to fulfill _f_(_x_) = _x_ at _x_ = _R_ and thus to be continuous.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"md`Fig. 2: Sarkar-Brown fisheye-function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"viewof magnification_fig_2 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"md`magnification _d_ = ${magnification_fig_2}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"md`## Continuously differentiable fisheye function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"md`Fig. 3: Comparing the old and the new function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"viewof magnification_fig_3 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"md`magnification _d_ = ${magnification_fig_3}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"viewof demagnification_width_fig_3 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"md`demagnification width ${tex`x_w`} = ${demagnification_width_fig_3}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":678,"value":"md`The inverse of _f_ can be found as\n\n${tex.block`\n f^{-1}(x) = \\begin{cases}\n \\frac{A_2x}{xd+1}&\\mathrm{if\\ \\ } 0 \\leq x \\leq 1-x_w\\\\\n x - \\frac{A_1}{2} (1-x)^2 &\\mathrm{if\\ \\ } 1-x_w < x \\leq 1.\\\\\n \\end{cases}\n`}\nand is shown in Figure 3.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"md`\nThe transformation from relative space to the original coordinates is straight-forward and equal to the description in [Sarkar and Brown](https://dl.acm.org/citation.cfm?id=142763).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"md`## Cartesian vs. polar magnification`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"md`\nOf course, the transformation does not have to be radial. We show a cartesian magnification in the Figure below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"md`Fig. 4: Comparison of radial (_left column_) vs. cartesian (_right column_) and original (_top row_) vs. adjusted (_bottom row_) fisheye.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"viewof R_fig_4 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"md`magnification radius _R_ = ${R_fig_4}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"viewof magnification_fig_4 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"md`magnification _d_ = ${magnification_fig_4}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"viewof demagnification_width_fig_4 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"md`demagnification width ${tex`x_w`} = ${demagnification_width_fig_4}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"md`## Conclusion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"md`We showed that discontinuities in the derivatives of fisheye-functions lead to sudden jumps in continuity and extensive \"squeezing\" in the displayed data. We proposed an adjusted fisheye-function with controlled demagnification behavior and continuous first derivative.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"md`## Acknowledgements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"md`B. F. M. wants to thank [Ulf Aslak](https://github.com/ulfaslak) and [Dirk Brockmann](https://github.com/dirkbrockmann) for helpful discussions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"md `## Appendix A: Derivation of the adjusted function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"md`## Appendix B: Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"md`You can find the JavaScript implementation for the described transformations at the end of this notebook or in this [github repository](https://github.com/benmaier/fisheye). Note that there is some example code in the repository to explain the usage. A [Python implementation](https://github.com/benmaier/python-fisheye) exists, as well.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"d3 = require(\"d3@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 31:"$30:body"