nvd3-rails 0.0.1

data/vendor/assets/javascripts/nvd3/deprecated/scatterWithLegend.js

@@ -0,0 +1,261 @@
+
+nv.models.scatterWithLegend = function() {
+  var margin = {top: 30, right: 20, bottom: 50, left: 60},
+      width = function() { return 960 }, //TODO: should probably make this consistent... or maybe constant in the models, closure in the charts
+      height = function() { return 500 },
+      xAxisLabelText = false,
+      yAxisLabelText = false,
+      showDistX = false,
+      showDistY = false,
+      color = d3.scale.category20().range();
+
+  var xAxis = nv.models.axis().orient('bottom').tickPadding(10),
+      yAxis = nv.models.axis().orient('left').tickPadding(10),
+      legend = nv.models.legend().height(30),
+      scatter = nv.models.scatter(),
+      dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
+      x, y, x0, y0;
+
+
+  function chart(selection) {
+    selection.each(function(data) {
+      var availableWidth = width() - margin.left - margin.right,
+          availableHeight = height() - margin.top - margin.bottom;
+
+      x0 = x0 || scatter.xScale();
+      y0 = y0 || scatter.yScale();
+
+
+
+      var wrap = d3.select(this).selectAll('g.wrap.scatterWithLegend').data([data]);
+      var gEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 scatterWithLegend').append('g');
+
+      gEnter.append('g').attr('class', 'legendWrap');
+      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');
+
+
+
+      scatter
+        .width(availableWidth)
+        .height(availableHeight)
+        //.xDomain(x.domain())
+        //.yDomain(y.domain())
+        .color(data.map(function(d,i) {
+          return d.color || color[i % 20];
+        }).filter(function(d,i) { return !data[i].disabled }))
+
+      var scatterWrap = wrap.select('.scatterWrap')
+          .datum(data.filter(function(d) { return !d.disabled }));
+
+      d3.transition(scatterWrap).call(scatter);
+
+
+      x = scatter.xScale();
+      y = scatter.yScale();
+
+      xAxis.scale(x);
+      yAxis.scale(y);
+
+
+      //TODO: margins should be adjusted based on what components are used: axes, axis labels, legend
+      //TODO: Fix height issue on first render if legend height is larger than margin.top, NEED TO FIX EVERY MODEL WITH A LEGEND
+      margin.top = legend.height();
+
+      var g = wrap.select('g')
+          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+
+      legend.width(availableWidth / 2);
+
+      wrap.select('.legendWrap')
+          .datum(data)
+          .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')')
+          .call(legend);
+
+
+
+
+      if ( showDistX || showDistY) {
+        var distWrap = scatterWrap.selectAll('g.distribution')
+            .data(function(d) { return d }, function(d) { return d.key });
+
+        distWrap.enter().append('g').attr('class', function(d,i) { return 'distribution series-' + i })
+
+        distWrap.style('stroke', function(d,i) { return color.filter(function(d,i) { return data[i] && !data[i].disabled })[i % 10] })
+      }
+
+      if (showDistX) {
+        var distX = distWrap.selectAll('line.distX')
+              .data(function(d) { return d.values })
+        distX.enter().append('line')
+            .attr('x1', function(d,i) { return x0(scatter.x()(d,i)) })
+            .attr('x2', function(d,i) { return x0(scatter.x()(d,i)) })
+        //d3.transition(distX.exit())
+        d3.transition(distWrap.exit().selectAll('line.distX'))
+            .attr('x1', function(d,i) { return x(scatter.x()(d,i)) })
+            .attr('x2', function(d,i) { return x(scatter.x()(d,i)) })
+            .remove();
+        distX
+            .attr('class', function(d,i) { return 'distX distX-' + i })
+            .attr('y1', y.range()[0])
+            .attr('y2', y.range()[0] + 8);
+        d3.transition(distX)
+            .attr('x1', function(d,i) { return x(scatter.x()(d,i)) })
+            .attr('x2', function(d,i) { return x(scatter.x()(d,i)) })
+      }
+
+
+      if (showDistY) {
+        var distY = distWrap.selectAll('line.distY')
+            .data(function(d) { return d.values })
+        distY.enter().append('line')
+            .attr('y1', function(d,i) { return y0(scatter.y()(d,i)) })
+            .attr('y2', function(d,i) { return y0(scatter.y()(d,i)) });
+        //d3.transition(distY.exit())
+        d3.transition(distWrap.exit().selectAll('line.distY'))
+            .attr('y1', function(d,i) { return y(scatter.y()(d,i)) })
+            .attr('y2', function(d,i) { return y(scatter.y()(d,i)) })
+            .remove();
+        distY
+            .attr('class', function(d,i) { return 'distY distY-' + i })
+            .attr('x1', x.range()[0])
+            .attr('x2', x.range()[0] - 8)
+        d3.transition(distY)
+            .attr('y1', function(d,i) { return y(scatter.y()(d,i)) }) .attr('y2', function(d,i) { return y(scatter.y()(d,i)) });
+      }
+
+
+      xAxis
+        .ticks( availableWidth / 100 )
+        .tickSize( -availableHeight , 0);
+
+      g.select('.x.axis')
+          .attr('transform', 'translate(0,' + y.range()[0] + ')');
+
+      d3.transition(g.select('.x.axis'))
+          .call(xAxis);
+
+
+      yAxis
+        .ticks( availableHeight / 36 )
+        .tickSize( -availableWidth, 0);
+
+      d3.transition(g.select('.y.axis'))
+          .call(yAxis);
+
+
+
+
+      legend.dispatch.on('legendClick', function(d,i, that) {
+        d.disabled = !d.disabled;
+
+        if (!data.filter(function(d) { return !d.disabled }).length) {
+          data.map(function(d) {
+            d.disabled = false;
+            wrap.selectAll('.series').classed('disabled', false);
+            return d;
+          });
+        }
+
+        selection.transition().call(chart)
+      });
+
+      /*
+      legend.dispatch.on('legendMouseover', function(d, i) {
+        d.hover = true;
+        selection.transition().call(chart)
+      });
+
+      legend.dispatch.on('legendMouseout', function(d, i) {
+        d.hover = false;
+        selection.transition().call(chart)
+      });
+      */
+
+
+      scatter.dispatch.on('elementMouseover.tooltip', function(e) {
+        dispatch.tooltipShow({
+          point: e.point,
+          series: e.series,
+          pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
+          seriesIndex: e.seriesIndex,
+          pointIndex: e.pointIndex
+        });
+
+        scatterWrap.select('.series-' + e.seriesIndex + ' .distX-' + e.pointIndex)
+            .attr('y1', e.pos[1]);
+        scatterWrap.select('.series-' + e.seriesIndex + ' .distY-' + e.pointIndex)
+            .attr('x1', e.pos[0]);
+      });
+
+      scatter.dispatch.on('elementMouseout.tooltip', function(e) {
+        dispatch.tooltipHide(e);
+
+        scatterWrap.select('.series-' + e.seriesIndex + ' .distX-' + e.pointIndex)
+            .attr('y1', y.range()[0]);
+        scatterWrap.select('.series-' + e.seriesIndex + ' .distY-' + e.pointIndex)
+            .attr('x1', x.range()[0]);
+      });
+
+
+      //store old scales for use in transitions on update, to animate from old to new positions, and sizes
+      x0 = x.copy();
+      y0 = y.copy();
+
+    });
+
+    return chart;
+  }
+
+
+  chart.dispatch = dispatch;
+  chart.legend = legend;
+  chart.xAxis = xAxis;
+  chart.yAxis = yAxis;
+
+  d3.rebind(chart, scatter, 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');
+
+
+  chart.margin = function(_) {
+    if (!arguments.length) return margin;
+    margin = _;
+    return chart;
+  };
+
+  chart.width = function(_) {
+    if (!arguments.length) return width;
+    width = d3.functor(_);
+    return chart;
+  };
+
+  chart.height = function(_) {
+    if (!arguments.length) return height;
+    height = d3.functor(_);
+    return chart;
+  };
+
+  chart.color = function(_) {
+    if (!arguments.length) return color;
+    color = _;
+    legend.color(_);
+    return chart;
+  };
+
+  chart.showDistX = function(_) {
+    if (!arguments.length) return showDistX;
+    showDistX = _;
+    return chart;
+  };
+
+  chart.showDistY = function(_) {
+    if (!arguments.length) return showDistY;
+    showDistY = _;
+    return chart;
+  };
+
+
+  return chart;
+}

data/vendor/assets/javascripts/nvd3/deprecated/stackedArea.js

@@ -0,0 +1,286 @@
+
+nv.models.stackedArea = function() {
+  //Default Settings
+  var margin = {top: 0, right: 0, bottom: 0, left: 0},
+      width = 960,
+      height = 500,
+      color = d3.scale.category20().range(), // array of colors to be used in order
+      id = Math.floor(Math.random() * 100000), //Create semi-unique ID incase user doesn't selet one
+      getX = function(d) { return d.x }, // accessor to get the x value from a data point
+      getY = function(d) { return d.y }, // accessor to get the y value from a data point
+      style = 'stack',
+      offset = 'zero',
+      order = 'default',
+      clipEdge = false; // if true, masks lines within x and y scale
+
+/************************************
+ * offset:
+ *   'wiggle' (stream)
+ *   'zero' (stacked)
+ *   'expand' (normalize to 100%)
+ *   'silhouette' (simple centered)
+ *
+ * order:
+ *   'inside-out' (stream)
+ *   'default' (input order)
+ ************************************/
+
+  var scatter= nv.models.scatter()
+        .size(2.2) // default size
+        .sizeDomain([2.5]), //set to speed up calculation, needs to be unset if there is a cstom size accessor
+      x = scatter.xScale(),
+      y = scatter.yScale(),
+      dispatch =  d3.dispatch('tooltipShow', 'tooltipHide', 'areaClick', 'areaMouseover', 'areaMouseout');
+
+  function chart(selection) {
+    selection.each(function(data) {
+        // Need to leave data alone to switch between stacked, stream, and expanded
+        var dataCopy = JSON.parse(JSON.stringify(data)),
+            availableWidth = width - margin.left - margin.right,
+            availableHeight = height - margin.top - margin.bottom;
+
+        //TODO: try to get rid of the need for copying the data, and use the data directly
+
+        //console.log(dataCopy);
+        dataCopy = dataCopy.map(function(series,i) {
+          if (series.disabled)
+            series.values = series.values.map(function(d,i) {
+              d._y = d.y || d._y; 
+              d.y = 0;  //TODO: need to use value from getY, not always d.y
+              return d 
+            });
+          return series;
+        });
+
+
+        //TODO: deal with negative stacked charts
+
+        //compute the data based on offset and order (calc's y0 for every point)
+        dataCopy = d3.layout.stack()
+                     .offset(offset)
+                     .order(order)
+                     .values(function(d){ return d.values })
+                     .y(getY)
+                     (dataCopy);
+
+
+
+        var wrap = d3.select(this).selectAll('g.wrap.stackedarea').data([dataCopy]);
+        var wrapEnter = wrap.enter().append('g').attr('class', 'wrap nvd3 stackedarea');
+        var defsEnter = wrapEnter.append('defs');
+        var gEnter = wrapEnter.append('g');
+        var g = wrap.select('g');
+
+        gEnter.append('g').attr('class', 'areaWrap');
+
+
+        scatter
+          .width(availableWidth)
+          .height(availableHeight)
+          //.x(getX)
+          .y(function(d) { return d.y + d.y0 }) // TODO: allow for getY to be other than d.y
+          .forceY([0])
+          .color(dataCopy.map(function(d,i) {
+            return d.color || color[i % color.length];
+          }).filter(function(d,i) { return !dataCopy[i].disabled }));
+
+        gEnter.append('g').attr('class', 'scatterWrap');
+        var scatterWrap= g.select('.scatterWrap')
+            .datum(dataCopy.filter(function(d) { return !d.disabled }))
+
+        d3.transition(scatterWrap).call(scatter);
+
+
+
+
+        wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+
+        defsEnter.append('clipPath')
+            .attr('id', 'edge-clip-' + id)
+          .append('rect');
+
+        wrap.select('#edge-clip-' + id + ' rect')
+            .attr('width', availableWidth)
+            .attr('height', availableHeight);
+
+        g   .attr('clip-path', clipEdge ? 'url(#edge-clip-' + id + ')' : '');
+
+
+
+
+        var area = d3.svg.area()
+            .x(function(d,i) { return x(scatter.x()(d,i)) })
+            .y0(function(d) { return y(d.y0) })
+            .y1(function(d) { return y(d.y + d.y0) });
+
+        var zeroArea = d3.svg.area()
+            .x(function(d,i) { return x(scatter.x()(d,i)) })
+            .y0(function(d) { return y(d.y0) })
+            .y1(function(d) { return y(d.y0) });
+
+
+        var path = g.select('.areaWrap').selectAll('path.area')
+            .data(function(d) { return d });
+            //.data(function(d) { return d }, function(d) { return d.key });
+        path.enter().append('path').attr('class', function(d,i) { return 'area area-' + i })
+            .on('mouseover', function(d,i) {
+              d3.select(this).classed('hover', true);
+              dispatch.areaMouseover({
+                point: d,
+                series: d.key,
+                //pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
+                pos: [d3.event.pageX, d3.event.pageY],
+                seriesIndex: i
+                //pointIndex: d.point
+              });
+            })
+            .on('mouseout', function(d,i) {
+              d3.select(this).classed('hover', false);
+              dispatch.areaMouseout({
+                point: d,
+                series: d.key,
+                //pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
+                pos: [d3.event.pageX, d3.event.pageY],
+                seriesIndex: i
+                //pointIndex: d.point
+              });
+            })
+            .on('click', function(d,i) {
+              d3.select(this).classed('hover', false);
+              dispatch.areaClick({
+                point: d,
+                series: d.key,
+                //pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
+                pos: [d3.event.pageX, d3.event.pageY],
+                seriesIndex: i
+                //pointIndex: d.point
+              });
+            })
+        d3.transition(path.exit())
+            .attr('d', function(d,i) { return zeroArea(d.values,i) }) // TODO: fix this so transition is still fluid
+            .remove();
+        path
+            .style('fill', function(d,i){ return d.color || color[i % color.length] })
+            .style('stroke', function(d,i){ return d.color || color[i % color.length] });
+        d3.transition(path)
+            .attr('d', function(d,i) { return area(d.values,i) })
+
+
+        scatter.dispatch.on('elementClick.area', function(e) {
+          dispatch.areaClick(e);
+        })
+        scatter.dispatch.on('elementMouseover.area', function(e) {
+          g.select('.area-' + e.seriesIndex).classed('hover', true);
+        });
+        scatter.dispatch.on('elementMouseout.area', function(e) {
+          g.select('.area-' + e.seriesIndex).classed('hover', false);
+        });
+
+    });
+
+
+    return chart;
+  }
+
+
+  chart.dispatch = dispatch;
+  chart.scatter = scatter;
+
+  d3.rebind(chart, scatter, 'x', 'interactive', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius');
+
+  /*
+  chart.x = function(_) {
+    if (!arguments.length) return getX;
+    getX = d3.functor(_);
+    scatter.x(_);
+    return chart;
+  };
+  */
+
+  chart.y = function(_) {
+    if (!arguments.length) return getY;
+    getY = d3.functor(_);
+    //scatter.y(_);
+    return chart;
+  }
+
+  chart.margin = function(_) {
+    if (!arguments.length) return margin;
+    margin = _;
+    return chart;
+  };
+
+  chart.width = function(_) {
+    if (!arguments.length) return width;
+    width = _;
+    return chart;
+  };
+
+  chart.height = function(_) {
+    if (!arguments.length) return height;
+    height = _;
+    return chart;
+  };
+
+  chart.clipEdge = function(_) {
+    if (!arguments.length) return clipEdge;
+    clipEdge = _;
+    return chart;
+  };
+
+  chart.color = function(_) {
+    if (!arguments.length) return color;
+    color = _;
+    return chart;
+  };
+
+  chart.offset = function(_) {
+    if (!arguments.length) return offset;
+    offset = _;
+    return chart;
+  };
+
+  chart.order = function(_) {
+    if (!arguments.length) return order;
+    order = _;
+    return chart;
+  };
+
+  //shortcut for offset + order
+  chart.style = function(_) {
+    if (!arguments.length) return style;
+    style = _;
+
+    switch (style) {
+      case 'stack':
+        offset = 'zero';
+        order = 'default';
+        break;
+      case 'stream':
+        offset = 'wiggle';
+        order = 'inside-out';
+        break;
+      case 'expand':
+        offset = 'expand';
+        order = 'default';
+        break;
+    }
+
+    return chart;
+  };
+
+
+
+  scatter.dispatch.on('elementMouseover.tooltip', function(e) {
+        e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top],
+        dispatch.tooltipShow(e);
+  });
+
+  scatter.dispatch.on('elementMouseout.tooltip', function(e) {
+        dispatch.tooltipHide(e);
+  });
+
+
+  return chart;
+}