nvd3-rails 0.0.1

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

@@ -0,0 +1,263 @@
+
+nv.models.pie = function() {
+  var margin = {top: 20, right: 20, bottom: 20, left: 20},
+      width = 500,
+      height = 500,
+      animate = 2000,
+      radius = Math.min(width-(margin.right+margin.left), height-(margin.top+margin.bottom)) / 2,
+      label ='label',
+      field ='y',
+      id = Math.floor(Math.random() * 10000), //Create semi-unique ID in case user doesn't select one
+      color = d3.scale.category20(),
+      showLabels = true,
+      donut = false,
+      title = '';
+
+      var lastWidth = 0,
+      lastHeight = 0;
+
+
+  var  dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'tooltipShow', 'tooltipHide');
+
+  function chart(selection) {
+    selection.each(function(data) {
+
+      var svg = d3.select(this)
+          .on("click", function(d,i) {
+              dispatch.chartClick({
+                  data: d,
+                  index: i,
+                  pos: d3.event,
+                  id: id
+              });
+          });
+
+
+
+        var background = svg.selectAll('svg.margin').data([data]);
+        var parent = background.enter();
+        parent.append("text")
+            .attr("class", "title")
+            .attr("dy", ".91em")
+            .attr("text-anchor", "start")
+            .text(title);
+        parent.append('svg')
+            .attr('class','margin')
+            .attr('x', margin.left)
+            .attr('y', margin.top)
+            .style('overflow','visible');
+
+        var wrap = background.selectAll('g.wrap').data([data]);
+        wrap.exit().remove();
+        var wEnter = wrap.enter();
+
+        wEnter
+          .append('g')
+            .attr('class', 'wrap')
+            .attr('id','wrap-'+id)
+          .append('g')
+            .attr('class', 'pie');
+
+
+
+        wrap
+            .attr('width', width) //-(margin.left+margin.right))
+            .attr('height', height) //-(margin.top+margin.bottom))
+            .attr("transform", "translate(" + radius + "," + radius + ")");
+
+
+
+
+        var arc = d3.svg.arc()
+          .outerRadius((radius-(radius / 5)));
+
+        if (donut) arc.innerRadius(radius / 2);
+
+
+      // Setup the Pie chart and choose the data element
+      var pie = d3.layout.pie()
+         .value(function (d) { return d[field]; });
+
+      var slices = background.select('.pie').selectAll(".slice")
+            .data(pie);
+
+          slices.exit().remove();
+
+        var ae = slices.enter().append("svg:g")
+              .attr("class", "slice")
+              .on('mouseover', function(d,i){
+                        d3.select(this).classed('hover', true);
+                        dispatch.tooltipShow({
+                            label: d.data[label],
+                            value: d.data[field],
+                            data: d.data,
+                            index: i,
+                            pos: [d3.event.pageX, d3.event.pageY],
+                            id: id
+                        });
+
+              })
+              .on('mouseout', function(d,i){
+                        d3.select(this).classed('hover', false);
+                        dispatch.tooltipHide({
+                            label: d.data[label],
+                            value: d.data[field],
+                            data: d.data,
+                            index: i,
+                            id: id
+                        });
+              })
+              .on('click', function(d,i) {
+                    dispatch.elementClick({
+                        label: d.data[label],
+                        value: d.data[field],
+                        data: d.data,
+                        index: i,
+                        pos: d3.event,
+                        id: id
+                    });
+                    d3.event.stopPropagation();
+              })
+              .on('dblclick', function(d,i) {
+                dispatch.elementDblClick({
+                    label: d.data[label],
+                    value: d.data[field],
+                    data: d.data,
+                    index: i,
+                    pos: d3.event,
+                    id: id
+                });
+                 d3.event.stopPropagation();
+              });
+
+        var paths = ae.append("svg:path")
+            .attr('class','path')
+            .attr("fill", function(d, i) { return color(i); });
+            //.attr('d', arc);
+
+        slices.select('.path')
+            .attr('d', arc)
+            .transition()
+            .ease("bounce")
+            .duration(animate)
+            .attrTween("d", tweenPie);
+
+        if (showLabels) {
+            // This does the normal label
+            ae.append("text");
+
+            slices.select("text")
+              .transition()
+              .duration(animate)
+              .ease('bounce')
+              .attr("transform", function(d) {
+                 d.outerRadius = radius + 10; // Set Outer Coordinate
+                 d.innerRadius = radius + 15; // Set Inner Coordinate
+                 return "translate(" + arc.centroid(d) + ")";
+              })
+              .attr("text-anchor", "middle") //center the text on it's origin
+              .style("font", "bold 12px Arial")
+              .text(function(d, i) {  return d.data[label]; });
+        }
+
+
+        // Computes the angle of an arc, converting from radians to degrees.
+        function angle(d) {
+            var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
+            return a > 90 ? a - 180 : a;
+        }
+
+
+
+
+
+        function tweenPie(b) {
+            b.innerRadius = 0;
+            var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
+            return function(t) {
+                return arc(i(t));
+            };
+        }
+
+
+    });
+
+    return chart;
+  }
+
+  chart.margin = function(_) {
+    if (!arguments.length) return margin;
+    margin = _;
+    return chart;
+  };
+
+  chart.width = function(_) {
+    if (!arguments.length) return width;
+    if (margin.left + margin.right + 20 > _) {
+      width = margin.left + margin.right + 20; // Min width
+    } else {
+      width = _;
+    }
+    radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
+    return chart;
+  };
+
+  chart.height = function(_) {
+    if (!arguments.length) return height;
+    if (margin.top + margin.bottom + 20 > _) {
+      height = margin.top + margin.bottom + 20; // Min height
+    } else {
+      height = _;
+    }
+    radius = Math.min(width-(margin.left+margin.right), height-(margin.top+margin.bottom)) / 2;
+    return chart;
+  };
+
+  chart.animate = function(_) {
+    if (!arguments.length) return animate;
+    animate = _;
+    return chart;
+  };
+
+  chart.labelField = function(_) {
+    if (!arguments.length) return (label);
+      label = _;
+      return chart;
+  };
+
+  chart.dataField = function(_) {
+    if (!arguments.length) return (field);
+    field = _;
+    return chart;
+  };
+
+  chart.showLabels = function(_) {
+      if (!arguments.length) return (showLabels);
+      showLabels = _;
+      return chart;
+  };
+
+  chart.donut = function(_) {
+        if (!arguments.length) return (donut);
+        donut = _;
+        return chart;
+  };
+
+  chart.title = function(_) {
+        if (!arguments.length) return (title);
+        title = _;
+        return chart;
+  };
+
+  chart.id = function(_) {
+        if (!arguments.length) return id;
+        id = _;
+        return chart;
+  };
+
+  chart.dispatch = dispatch;
+
+
+
+    return chart;
+}

data/vendor/assets/javascripts/nvd3/deprecated/scatterChart.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<link href="../src/d3.css" rel="stylesheet" type="text/css">
+
+<style>
+
+body {
+  overflow-y:scroll;
+  margin: 0;
+  padding: 0;
+}
+
+svg {
+  overflow: hidden;
+}
+
+div {
+  border: 0;
+  margin: 0;
+}
+
+/*
+#offsetDiv {
+  margin-left: 100px;
+  margin-top: 100px;
+}
+*/
+
+#test1 {
+  margin: 0;
+  height: 500px;
+}
+
+#test1 svg {
+  height: 500px;
+}
+
+</style>
+
+<body>
+
+<div id="offsetDiv">
+  <div id="test1" class="chartWrap">
+    <svg></svg>
+  </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>
+<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/scatterChart.js"></script>
+<script>
+
+
+
+//Format A
+nv.addGraph(function() {
+  var chart = nv.models.scatterChart()
+                .showDistX(true)
+                .showDistY(true)
+                //.height(500)
+                .color(d3.scale.category10().range());
+
+  chart.xAxis.tickFormat(d3.format('.02f'))
+  chart.yAxis.tickFormat(d3.format('.02f'))
+
+  d3.select('#test1 svg')
+      .datum(randomData(4,40))
+    .transition().duration(500)
+      .call(chart);
+
+  nv.utils.windowResize(chart.update);
+
+  return chart;
+});
+
+
+function randomData(groups, points) { //# groups,# points per group
+  var data = [],
+      shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
+      random = d3.random.normal();
+
+  for (i = 0; i < groups; i++) {
+    data.push({
+      key: 'Group ' + i,
+      values: []
+    });
+
+    for (j = 0; j < points; j++) {
+      data[i].values.push({
+        x: random(), 
+        y: random(), 
+        size: Math.random(), 
+        shape: shapes[j % 6]
+      });
+    }
+  }
+
+  return data;
+}
+
+
+
+</script>

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

@@ -0,0 +1,294 @@
+
+nv.models.scatterChart = function() {
+  var margin = {top: 30, right: 20, bottom: 50, left: 60},
+      width = null,
+      height = null,
+      color = d3.scale.category20().range(),
+      showDistX = false,
+      showDistY = false,
+      showLegend = true,
+      tooltips = true,
+      tooltipX = function(key, x, y) { return '<strong>' + x + '</strong>' },
+      tooltipY = function(key, x, y) { return '<strong>' + y + '</strong>' },
+      tooltip = function(key, x, y, e, graph) { 
+        return '<h3>' + key + '</h3>' +
+               '<p>' +  y + ' at ' + x + '</p>'
+      };
+
+
+  var scatter = nv.models.scatter(),
+      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),
+      distX = nv.models.distribution().axis('x').scale(x),
+      distY = nv.models.distribution().axis('y').scale(y),
+      dispatch = d3.dispatch('tooltipShow', 'tooltipHide'),
+      x0, y0; //TODO: abstract distribution component and have old scales stored there
+
+  var showTooltip = function(e, offsetElement) {
+    //TODO: make tooltip style an option between single or dual on axes (maybe on all charts with axes?)
+
+    //var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
+        //top = e.pos[1] + ( offsetElement.offsetTop || 0),
+    var leftX = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
+        topX = y.range()[0] + margin.top + ( offsetElement.offsetTop || 0),
+        leftY = x.range()[0] + margin.left + ( offsetElement.offsetLeft || 0 ),
+        topY = e.pos[1] + ( offsetElement.offsetTop || 0),
+        xVal = xAxis.tickFormat()(scatter.x()(e.point)),
+        yVal = yAxis.tickFormat()(scatter.y()(e.point)),
+        contentX = tooltipX(e.series.key, xVal, yVal, e, chart),
+        contentY = tooltipY(e.series.key, xVal, yVal, e, chart);
+        //content = tooltip(e.series.key, xVal, yVal, e, chart);
+
+    nv.tooltip.show([leftX, topX], contentX, 'n', 1);
+    nv.tooltip.show([leftY, topY], contentY, 'e', 1);
+    //nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
+  };
+
+
+  function chart(selection) {
+    selection.each(function(data) {
+      var container = d3.select(this),
+          that = this;
+
+      //TODO: decide if this makes sense to add into all the models for ease of updating (updating without needing the selection)
+      chart.update = function() { selection.transition().call(chart) };
+
+
+      var availableWidth = (width  || parseInt(container.style('width')) || 960)
+                             - margin.left - margin.right,
+          availableHeight = (height || parseInt(container.style('height')) || 400)
+                             - margin.top - margin.bottom;
+
+
+
+      x0 = x0 || scatter.xScale();
+      y0 = y0 || scatter.yScale();
+
+
+
+      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('g').attr('class', 'x axis');
+      gEnter.append('g').attr('class', 'y axis');
+      gEnter.append('g').attr('class', 'scatterWrap');
+      gEnter.append('g').attr('class', 'distWrap');
+
+      var g = wrap.select('g')
+
+      if (showLegend) {
+        legend.width( availableWidth / 2 );
+
+        wrap.select('.legendWrap')
+            .datum(data)
+            .call(legend);
+
+        if ( margin.top != legend.height()) {
+          margin.top = legend.height();
+          availableHeight = (height || parseInt(container.style('height')) || 400)
+                             - margin.top - margin.bottom;
+        }
+
+        wrap.select('.legendWrap')
+            .attr('transform', 'translate(' + (availableWidth / 2) + ',' + (-margin.top) +')');
+      }
+
+
+      scatter
+        .width(availableWidth)
+        .height(availableHeight)
+        .color(data.map(function(d,i) {
+          return d.color || color[i % color.length];
+        }).filter(function(d,i) { return !data[i].disabled }))
+
+
+      g.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+
+      var scatterWrap = wrap.select('.scatterWrap')
+          .datum(data.filter(function(d) { return !d.disabled }));
+      d3.transition(scatterWrap).call(scatter);
+
+
+      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);
+
+
+      distX
+        .width(availableWidth)
+        .color(data.map(function(d,i) {
+          return d.color || color[i % color.length];
+        }).filter(function(d,i) { return !data[i].disabled }));
+      gEnter.select('.distWrap').append('g')
+          .attr('class', 'distributionX')
+          .attr('transform', 'translate(0,' + y.range()[0] + ')');
+      g.select('.distributionX')
+          .datum(data.filter(function(d) { return !d.disabled }))
+          .call(distX);
+
+
+      distY
+        .width(availableHeight)
+        .color(data.map(function(d,i) {
+          return d.color || color[i % color.length];
+        }).filter(function(d,i) { return !data[i].disabled }));
+      gEnter.select('.distWrap').append('g')
+          .attr('class', 'distributionY')
+          .attr('transform', 'translate(-' + distY.size() + ',0)');
+      g.select('.distributionY')
+          .datum(data.filter(function(d) { return !d.disabled }))
+          .call(distY);
+
+
+
+      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) {
+        d3.select('.chart-' + scatter.id() + ' .series-' + e.seriesIndex + ' .distx-' + e.pointIndex)
+            .attr('y1', e.pos[1] - availableHeight);
+        d3.select('.chart-' + scatter.id() + ' .series-' + e.seriesIndex + ' .disty-' + e.pointIndex)
+            .attr('x2', e.pos[0] + distX.size());
+
+        e.pos = [e.pos[0] + margin.left, e.pos[1] + margin.top];
+        dispatch.tooltipShow(e);
+      });
+      if (tooltips) dispatch.on('tooltipShow', function(e) { showTooltip(e, that.parentNode) } ); // TODO: maybe merge with above?
+
+      scatter.dispatch.on('elementMouseout.tooltip', function(e) {
+        dispatch.tooltipHide(e);
+
+        d3.select('.chart-' + scatter.id() + ' .series-' + e.seriesIndex + ' .distx-' + e.pointIndex)
+            .attr('y1', 0);
+        d3.select('.chart-' + scatter.id() + ' .series-' + e.seriesIndex + ' .disty-' + e.pointIndex)
+            .attr('x2', distY.size());
+      });
+      if (tooltips) dispatch.on('tooltipHide', nv.tooltip.cleanup);
+
+
+      //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', 'shape', 'size', 'xScale', 'yScale', 'zScale', 'xDomain', 'yDomain', 'sizeDomain', 'forceX', 'forceY', 'forceSize', 'clipVoronoi', 'clipRadius', 'fisheye', 'fisheyeRadius');
+
+
+  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.color = function(_) {
+    if (!arguments.length) return color;
+    color = _;
+    legend.color(_);
+    distX.color(_);
+    distY.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;
+  };
+
+  chart.showControls = function(_) {
+    if (!arguments.length) return showControls;
+    showControls = _;
+    return chart;
+  };
+
+  chart.showLegend = function(_) {
+    if (!arguments.length) return showLegend;
+    showLegend = _;
+    return chart;
+  };
+
+  chart.tooltips = function(_) {
+    if (!arguments.length) return tooltips;
+    tooltips = _;
+    return chart;
+  };
+
+  chart.tooltipContent = function(_) {
+    if (!arguments.length) return tooltip;
+    tooltip = _;
+    return chart;
+  };
+
+
+  return chart;
+}