Cartesian Distortion (Fisheye)

<!DOCTYPE html>
<head>
  <meta charset="utf-8">

.background {
    fill: none;
    pointer-events: all;
}

#chart3 line {
    shape-rendering: crispEdges;
}

#chart3 line {
    fill: none;
    stroke: #333;
}

body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

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,
          v,
          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");
  }
})();

(function chart3() {
  console.clear()
  var width = 960,
      height = 180,
      xSteps = d3.range(0, width, 16),
      ySteps = d3.range(0, height, 16);

var xFisheye = d3.fisheye.scale(d3.scale.identity).domain([0, width]).focus(0),
      yFisheye = d3.scale.linear().domain([0, height]);

var svg = d3.select("#chart3").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
      .attr("transform", "translate(-.5,-.5)");

svg.append("rect")
      .attr("class", "background")
      .attr("width", width)
      .attr("height", height);

var xLine = svg.selectAll(".x")
      .data(xSteps)
    .enter().append("line")
      .attr("class", "x")
      .attr("y2", height);
    
  redraw();

svg.on("mousemove", function() {
    var mouse = d3.mouse(this);
      
    xFisheye.focus(mouse[0]);    
    yFisheye(mouse[1]);
    redraw();
  });

function redraw() {
    xLine.attr("x1", xFisheye).attr("x2", xFisheye);
  }
})();

</script>
</body>

https://d3js.org/d3.v2.min.js