D3 Fisheye Distortion On Simple Scatter Plot

I'm trying to implement the d3 fisheye distortion (http://bost.ocks.org/mike/fisheye/) on a simple scatter plot. Here the code that I have so far: http://plnkr.co/edit/yDWld6?p=pre

Solution 1:

You have to prepare the data for the fisheye plugin:

var circles = svg.selectAll("circle")
    .data(data)
  .enter()
  .append("circle")
    .datum( function(d) {
        return {x: d.pages, y: d.books} // change data, to feed to the fisheye plugin
    })
    .attr("cx", function (d) {return d.x}) // changed data can be used here as well
    .attr("cy", function (d) {return d.y}) // ...and here
    .attr("r", 2);

...

// now we can pass in the d.x and d.y values expected by the fisheye plugin...
circles.each(function(d) { d.fisheye = fisheye(d); })
    .attr("cx", function(d) { return d.fisheye.x; })
    .attr("cy", function(d) { return d.fisheye.y; })
    .attr("r", function(d) { return d.fisheye.z * 2; });
});

I also made changes to the declaration of the fisheye in accordance with the latest official version of the plugin which I used in the plunk linked below.

So, here is a PLUNK with the fisheye distortion applied to the scatterplot.