scatterWithFisheyeChart is now scatterChart

deprecated/scatterChart.html

@@ -27,9 +27,9 @@ div {
 }
 */
 
-
 #test1 {
   margin: 0;
+  height: 500px;
 }
 
 #test1 svg {
@@ -54,7 +54,7 @@ div {
 <script src="../src/models/axis.js"></script>
 <script src="../src/models/distribution.js"></script>
 <script src="../src/models/scatter.js"></script>
-<script src="../src/models/scatterWithFisheyeChart.js"></script>
+<script src="../src/models/scatterChart.js"></script>
 <script>
 
 

deprecated/scatterChart.js

@@ -7,9 +7,6 @@ nv.models.scatterChart = function() {
       showDistX = false,
       showDistY = false,
       showLegend = true,
-      showControls = true,
-      fisheye = 0,
-      pauseFisheye = false,
       tooltips = true,
       tooltipX = function(key, x, y) { return '<strong>' + x + '</strong>' },
       tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' },
@@ -19,16 +16,12 @@ nv.models.scatterChart = function() {
       };
 
 
-  var x = d3.fisheye.scale(d3.scale.linear).distortion(0),
+  var scatter = nv.models.scatter(),
-      y = d3.fisheye.scale(d3.scale.linear).distortion(0);
+      x = scatter.xScale(),
-
+      y = scatter.yScale(),
-  var scatter = nv.models.scatter().xScale(x).yScale(y),
-      //x = scatter.xScale(),
-      //y = scatter.yScale(),
       xAxis = nv.models.axis().orient('bottom').scale(x).tickPadding(10),
       yAxis = nv.models.axis().orient('left').scale(y).tickPadding(10),
       legend = nv.models.legend().height(30),
-      controls = nv.models.legend().height(30),
       distX = nv.models.distribution().axis('x').scale(x),
       distY = nv.models.distribution().axis('y').scale(y),
       dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
@@ -54,10 +47,6 @@ nv.models.scatterChart = function() {
     //nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
   };
 
-  var controlsData = [
-    { key: 'Magnify', disabled: true }
-  ];
-
 
   function chart(selection) {
     selection.each(function(data) {
@@ -83,19 +72,11 @@ nv.models.scatterChart = function() {
       var wrap = container.selectAll('g.wrap.scatterChart').data([data]);
       var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 scatterChart chart-' + scatter.id()).append('g');
 
-
+      gEnter.append('g').attr('class', 'legendWrap');
-      gEnter.append('rect')
-          .attr('class', 'nvd3 background')
-          .attr('width', availableWidth)
-          .attr('height', availableHeight);
-
-
       gEnter.append('g').attr('class', 'x axis');
       gEnter.append('g').attr('class', 'y axis');
       gEnter.append('g').attr('class', 'scatterWrap');
       gEnter.append('g').attr('class', 'distWrap');
-      gEnter.append('g').attr('class', 'legendWrap');
-      gEnter.append('g').attr('class', 'controlsWrap');
 
       var g = wrap.select('g')
 
@@ -116,14 +97,6 @@ nv.models.scatterChart = function() {
             .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
       }
 
-      if (showControls) {
-        controls.width(180).color(['#444']);
-        g.select('.controlsWrap')
-            .datum(controlsData)
-            .attr('transform', 'translate(0,' + (-margin.top) +')')
-            .call(controls);
-      }
-
 
       scatter
         .width(availableWidth)
@@ -185,63 +158,6 @@ nv.models.scatterChart = function() {
           .call(distY);
 
 
-      g.select('.background').on('mousemove', updateFisheye);
-      g.select('.background').on('click', function() { pauseFisheye = !pauseFisheye; });
-      //g.select('.point-paths').on('mousemove', updateFisheye);
-
-
-      function updateFisheye() {
-        if (pauseFisheye) {
-          //g.select('.background') .style('pointer-events', 'none');
-          g.select('.point-paths').style('pointer-events', 'all');
-          return false;
-        }
-
-        g.select('.background') .style('pointer-events', 'all');
-        g.select('.point-paths').style('pointer-events', 'none' );
-
-        var mouse = d3.mouse(this);
-        x.distortion(fisheye).focus(mouse[0]);
-        y.distortion(fisheye).focus(mouse[1]);
-
-        scatterWrap.call(scatter);
-        g.select('.x.axis').call(xAxis);
-        g.select('.y.axis').call(yAxis);
-        g.select('.distributionX')
-          .datum(data.filter(function(d) { return !d.disabled }))
-            .call(distX);
-        g.select('.distributionY')
-          .datum(data.filter(function(d) { return !d.disabled }))
-            .call(distY);
-      }
-
-
-
-
-      controls.dispatch.on('legendClick', function(d,i) { 
-        d.disabled = !d.disabled;
-
-        fisheye = d.disabled ? 0 : 2.5;
-        g.select('.background') .style('pointer-events', d.disabled ? 'none' : 'all');
-        g.select('.point-paths').style('pointer-events', d.disabled ? 'all' : 'none' );
-
-        //scatter.interactive(d.disabled);
-        //tooltips = d.disabled;
-
-        if (d.disabled) {
-          x.distortion(fisheye).focus(0);
-          y.distortion(fisheye).focus(0);
-
-          scatterWrap.call(scatter);
-          g.select('.x.axis').call(xAxis);
-          g.select('.y.axis').call(yAxis);
-        } else {
-          pauseFisheye = false;
-        }
-
-        selection.transition().call(chart);
-      });
-
 
       legend.dispatch.on('legendClick', function(d,i, that) {
         d.disabled = !d.disabled;
@@ -361,12 +277,6 @@ nv.models.scatterChart = function() {
     return chart;
   };
 
-  chart.fisheye = function(_) {
-    if (!arguments.length) return fisheye;
-    fisheye = _;
-    return chart;
-  };
-
   chart.tooltips = function(_) {
     if (!arguments.length) return tooltips;
     tooltips = _;

examples/scatterChart.html

@@ -27,9 +27,9 @@ div {
 }
 */
 
+
 #test1 {
   margin: 0;
-  height: 500px;
 }
 
 #test1 svg {

src/models/scatterChart.js

@@ -7,6 +7,9 @@ nv.models.scatterChart = function() {
       showDistX = false,
       showDistY = false,
       showLegend = true,
+      showControls = true,
+      fisheye = 0,
+      pauseFisheye = false,
       tooltips = true,
       tooltipX = function(key, x, y) { return '<strong>' + x + '</strong>' },
       tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' },
@@ -16,12 +19,16 @@ nv.models.scatterChart = function() {
       };
 
 
-  var scatter = nv.models.scatter(),
+  var x = d3.fisheye.scale(d3.scale.linear).distortion(0),
-      x = scatter.xScale(),
+      y = d3.fisheye.scale(d3.scale.linear).distortion(0);
-      y = scatter.yScale(),
+
+  var scatter = nv.models.scatter().xScale(x).yScale(y),
+      //x = scatter.xScale(),
+      //y = scatter.yScale(),
       xAxis = nv.models.axis().orient('bottom').scale(x).tickPadding(10),
       yAxis = nv.models.axis().orient('left').scale(y).tickPadding(10),
       legend = nv.models.legend().height(30),
+      controls = nv.models.legend().height(30),
       distX = nv.models.distribution().axis('x').scale(x),
       distY = nv.models.distribution().axis('y').scale(y),
       dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
@@ -47,6 +54,10 @@ nv.models.scatterChart = function() {
     //nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
   };
 
+  var controlsData = [
+    { key: 'Magnify', disabled: true }
+  ];
+
 
   function chart(selection) {
     selection.each(function(data) {
@@ -72,11 +83,19 @@ nv.models.scatterChart = function() {
       var wrap = container.selectAll('g.wrap.scatterChart').data([data]);
       var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 scatterChart chart-' + scatter.id()).append('g');
 
-      gEnter.append('g').attr('class', 'legendWrap');
+
+      gEnter.append('rect')
+          .attr('class', 'nvd3 background')
+          .attr('width', availableWidth)
+          .attr('height', availableHeight);
+
+
       gEnter.append('g').attr('class', 'x axis');
       gEnter.append('g').attr('class', 'y axis');
       gEnter.append('g').attr('class', 'scatterWrap');
       gEnter.append('g').attr('class', 'distWrap');
+      gEnter.append('g').attr('class', 'legendWrap');
+      gEnter.append('g').attr('class', 'controlsWrap');
 
       var g = wrap.select('g')
 
@@ -97,6 +116,14 @@ nv.models.scatterChart = function() {
             .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
       }
 
+      if (showControls) {
+        controls.width(180).color(['#444']);
+        g.select('.controlsWrap')
+            .datum(controlsData)
+            .attr('transform', 'translate(0,' + (-margin.top) +')')
+            .call(controls);
+      }
+
 
       scatter
         .width(availableWidth)
@@ -158,6 +185,63 @@ nv.models.scatterChart = function() {
           .call(distY);
 
 
+      g.select('.background').on('mousemove', updateFisheye);
+      g.select('.background').on('click', function() { pauseFisheye = !pauseFisheye; });
+      //g.select('.point-paths').on('mousemove', updateFisheye);
+
+
+      function updateFisheye() {
+        if (pauseFisheye) {
+          //g.select('.background') .style('pointer-events', 'none');
+          g.select('.point-paths').style('pointer-events', 'all');
+          return false;
+        }
+
+        g.select('.background') .style('pointer-events', 'all');
+        g.select('.point-paths').style('pointer-events', 'none' );
+
+        var mouse = d3.mouse(this);
+        x.distortion(fisheye).focus(mouse[0]);
+        y.distortion(fisheye).focus(mouse[1]);
+
+        scatterWrap.call(scatter);
+        g.select('.x.axis').call(xAxis);
+        g.select('.y.axis').call(yAxis);
+        g.select('.distributionX')
+          .datum(data.filter(function(d) { return !d.disabled }))
+            .call(distX);
+        g.select('.distributionY')
+          .datum(data.filter(function(d) { return !d.disabled }))
+            .call(distY);
+      }
+
+
+
+
+      controls.dispatch.on('legendClick', function(d,i) { 
+        d.disabled = !d.disabled;
+
+        fisheye = d.disabled ? 0 : 2.5;
+        g.select('.background') .style('pointer-events', d.disabled ? 'none' : 'all');
+        g.select('.point-paths').style('pointer-events', d.disabled ? 'all' : 'none' );
+
+        //scatter.interactive(d.disabled);
+        //tooltips = d.disabled;
+
+        if (d.disabled) {
+          x.distortion(fisheye).focus(0);
+          y.distortion(fisheye).focus(0);
+
+          scatterWrap.call(scatter);
+          g.select('.x.axis').call(xAxis);
+          g.select('.y.axis').call(yAxis);
+        } else {
+          pauseFisheye = false;
+        }
+
+        selection.transition().call(chart);
+      });
+
 
       legend.dispatch.on('legendClick', function(d,i, that) {
         d.disabled = !d.disabled;
@@ -277,6 +361,12 @@ nv.models.scatterChart = function() {
     return chart;
   };
 
+  chart.fisheye = function(_) {
+    if (!arguments.length) return fisheye;
+    fisheye = _;
+    return chart;
+  };
+
   chart.tooltips = function(_) {
     if (!arguments.length) return tooltips;
     tooltips = _;