{ 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; }