Implemented d3 fisheye plugin on the scatter. Defaults to off. Does not work with Axes, so may not be useful. Also prevents otehr interaction when on.

examples/scatter.html

@@ -13,6 +13,7 @@ body {
 <svg id="test1"></svg>
 
 <script src="../lib/d3.v2.js"></script>
+<script src="../lib/fisheye.js"></script>
 <script src="../nv.d3.js"></script>
 <script src="../src/models/legend.js"></script>
 <script src="../src/models/scatter.js"></script>
@@ -29,7 +30,9 @@ nv.addGraph({
                 .width(width)
                 .height(height)
                 .margin({top: 20, right: 20, bottom: 20, left: 20})
-                .size(10)
+                .size(function(d) { return d.z })
+                //.interactive(false)
+                .fisheye(true)
 
 
     d3.select('#test1')
@@ -69,29 +72,6 @@ nv.addGraph({
 
 
 
-function sinAndCos() {
-  var sin = [],
-      cos = [];
-
-  for (var i = 0; i < 100; i++) {
-    sin.push({x: i, y: Math.sin(i/10)});
-    cos.push({x: i, y: .5 * Math.cos(i/10)});
-  }
-
-  return [
-    {
-      values: sin,
-      key: "Sine Wave",
-      color: "#ff7f0e"
-    },
-    {
-      values: cos,
-      key: "Cosine Wave",
-      color: "#2ca02c"
-    }
-  ];
-}
-
 
 function randomData() {
   var data = [];
@@ -103,7 +83,7 @@ function randomData() {
     });
 
     for (j = 0; j < 100; j++) {
-      data[i].values.push({x: Math.random(), y: Math.random()});
+      data[i].values.push({x: Math.random(), y: Math.random(), z: Math.random()});
     }
   }
 

examples/scatterChart.html

@@ -41,6 +41,7 @@ div {
 </div>
 
 <script src="../lib/d3.v2.js"></script>
+<script src="../lib/fisheye.js"></script>
 <script src="../nv.d3.js"></script>
 <script src="../src/tooltip.js"></script>
 <script src="../src/models/legend.js"></script>

src/models/scatter.js

@@ -21,17 +21,24 @@ nv.models.scatter = function() {
       clipEdge = false, // if true, masks lines within x and y scale
       clipVoronoi = true, // if true, masks each point with a circle... can turn off to slightly increase performance
       clipRadius = function() { return 25 }, // function to get the radius for point clips
+      fisheyeEnabled = false,
+      fisheyeRadius = 150,
       xDomain, yDomain, sizeDomain; // Used to manually set the x and y domain, good to save time if calculation has already been made
 
   var dispatch = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout'),
       x0, y0, z0,
       timeoutID;
 
+  if (d3.fisheye) 
+    var fisheye = d3.fisheye();
+      //.radius(fisheyeRadius);
+
   function chart(selection) {
     selection.each(function(data) {
       //var seriesData = data.map(function(d) {
       var availableWidth = width - margin.left - margin.right,
-          availableHeight = height - margin.top - margin.bottom;
+          availableHeight = height - margin.top - margin.bottom,
+          container = d3.select(this);
 
       //store old scales if they exist
       x0 = x0 || x;
@@ -69,7 +76,7 @@ nv.models.scatter = function() {
 
 
 
-      var wrap = d3.select(this).selectAll('g.wrap.scatter').data([data]);
+      var wrap = container.selectAll('g.wrap.scatter').data([data]);
       var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 scatter chart-' +id);
       var defsEnter = wrapEnter.append('defs');
       var gEnter = wrapEnter.append('g');
@@ -95,8 +102,8 @@ nv.models.scatter = function() {
       function updateInteractiveLayer() {
 
         if (!interactive) {
-          wrap.select('#points-clip-' + id).remove();
-          wrap.select('.point-paths').remove();
+          //wrap.select('#points-clip-' + id).remove();
+          //wrap.select('.point-paths').remove();
           return false;
         }
 
@@ -262,6 +269,37 @@ nv.models.scatter = function() {
           //.attr('r', function(d,i) { return z(getSize(d,i)) });
 
 
+      if (fisheyeEnabled) {
+        var fisheyeBox = container.append('rect')
+                          .attr('class', 'fisheyeBox')
+                          .style('fill-opacity', 0)
+                          .style('stroke-opacity', 0)
+                          .attr('width', availableWidth)
+                          .attr('height', availableHeight);
+
+        fisheye.radius(fisheyeRadius);
+
+        fisheyeBox.on("mousemove", function() {
+          if (!fisheyeEnabled) return true;
+
+          fisheye.center(d3.mouse(this));
+
+          points
+              .each(function(d,i) { d.display = fisheye({x: x(getX(d,i)), y: y(getY(d,i)) }); })
+              .attr('transform', function(d,i) {
+                return 'translate(' + d.display.x + ',' + d.display.y + ')'
+              })
+              .attr('d',
+                    d3.svg.symbol()
+                      .type(function(d,i) { return d.shape || shape })
+                      .size(function(d,i) { return z(getSize(d,i)) * d.display.z })
+                   );
+        });
+
+      } else {
+        container.select('.fisheyeBox').remove();
+      }
+
 
       clearTimeout(timeoutID);
       timeoutID = setTimeout(updateInteractiveLayer, 750);
@@ -411,6 +449,18 @@ nv.models.scatter = function() {
     return chart;
   };
 
+  chart.fisheye = function(_) {
+    if (!arguments.length) return fisheyeEnabled;
+    fisheyeEnabled = _;
+    return chart;
+  };
+
+  chart.fisheyeRadius = function(_) {
+    if (!arguments.length) return fisheyeRadius;
+    fisheyeRadius = _;
+    return chart;
+  };
+
 
   return chart;
 }

src/models/scatterChart.js

@@ -255,7 +255,7 @@ nv.models.scatterChart = function() {
   chart.xAxis = xAxis;
   chart.yAxis = yAxis;
 
-  d3.rebind(chart, scatter, 'interactive', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');
+  d3.rebind(chart, scatter, 'interactive', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'fisheye', 'fisheyeRadius');
 
 
   chart.margin = function(_) {