d3js-plugins-rails 0.0.1

data/vendor/assets/javascripts/d3/plugins/graph/index.html

@@ -0,0 +1,37 @@
+<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
+<script src="graph.js"></script>
+<script>
+  var g = d3.graph();
+
+  g.nodes(['red', 'purple', 'orange']);
+  g.matrix([
+    [0,1,0],
+    [1,0,0],
+    [1,1,1]
+  ]);
+
+  console.log('matrix to list', d3.graph.matrixToList([
+    [0,1,0],
+    [1,0,0],
+    [1,1,1]
+  ]));
+
+  console.log('list to matrix', d3.graph.listToMatrix([
+    {"source":0,"target":1,"value":1},
+    {"source":1,"target":0,"value":1},
+    {"source":2,"target":0,"value":1},
+    {"source":2,"target":1,"value":1},
+    {"source":2,"target":2,"value":1}
+  ]));
+
+  console.log('nodes', g.nodes() );
+  console.log('links', g.links() );
+  console.log('matrix', g.matrix() );
+  console.log('traversal', g.traverse().filter(function(d) { return d.indexOf('urp') > -1 }).value());
+
+  var m = d3.graph.matrix([
+    [1,1,0],
+    [0,0,0],
+    [2,1,1]
+  ]);
+</script>

data/vendor/assets/javascripts/d3/plugins/hexbin/README.md

@@ -0,0 +1,58 @@
+# Hexagonal Binning
+
+Examples:
+
+* Color encoding: <http://bl.ocks.org/4248145>
+* Area encoding: <http://bl.ocks.org/4248146>
+
+The **d3.hexbin** plugin implements **hexagonal binning**, which is useful for aggregating data into a more coarse representation suitable for display. Rather than displaying a scatterplot with tens of thousands of points, you can bin points into gridded hexagons, and then display the distribution using color or area. This plugin was inspired by earlier work by [Zachary Forest Johnson](http://indiemaps.com/blog/2011/10/hexbins/).
+
+<a name="hexbin" href="#hexbin">#</a> d3.<b>hexbin</b>()
+
+Constructs a new default hexbin layout.
+
+<a name="_hexbin" href="#_hexbin">#</a> <b>hexbin</b>(<i>points</i>)
+
+Evaluates the hexbin layout on the specified array of *points*, returning an array of hexagonal *bins*. Each bin is an array containing the bin’s points, as well as some additional properties:
+
+* x - the x-coordinate of the center of the associated bin’s hexagon
+* y - the y-coordinate of the center of the associated bin’s hexagon
+
+Bins that are empty are not omitted. The origin bin at ⟨0,0⟩ is in the top-left. The returned bins are designed to work with the layouts point and hexagon methods.
+
+<a href="size" href="#size">#</a> hexbin.<b>size</b>([<i>size</i>])
+
+If *size* is specified, sets the available layout size to the specified two-element array of numbers representing *x* and *y*. If *size* is not specified, returns the current size, which defaults to 1×1.
+
+<a href="radius" href="#radius">#</a> hexbin.<b>radius</b>([<i>radius</i>])
+
+If *radius* is specified, sets the hexagon radius to the specified numeric value. If *radius* is not specified, returns the current radius, which defaults to 1.
+
+<a name="x" href="#x">#</a> hexbin.<b>x</b>([<i>accessor</i>])
+
+Sets or gets the *x*-accessor function for the hexbin layout. If *accessor* is specified, sets the *x*-accessor function and returns the hexbin layout; if *accessor* is not specified, returns the current *x*-accessor function, which defaults to `function(d) { return d[0]; }`.
+
+<a name="y" href="#y">#</a> hexbin.<b>y</b>([<i>accessor</i>])
+
+Sets or gets the *y*-accessor function for the hexbin layout. If *accessor* is specified, sets the *y*-accessor function and returns the hexbin layout; if *accessor* is not specified, returns the current *y*-accessor function, which defaults to `function(d) { return d[1]; }`.
+
+<a href="hexagon" href="#hexagon">#</a> hexbin.<b>hexagon</b>([<i>radius</i>])
+
+Returns the SVG path string for the hexagon centered at the origin ⟨0,0⟩. The path string is defined with relative coordinates such that you can easily translate the hexagon to the desired position. For example:
+
+```js
+path.attr("d", function(d) { return "M" + d.x + "," + d.y + hexbin.hexagon(); });
+```
+
+Alternatively, use a transform attribute:
+
+```js
+path.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
+    .attr("d", hexbin.hexagon);
+```
+
+If *radius* is not specified, the hexbin’s current radius is used. If *radius* is specified, a hexagon with the specified radius is returned, which is useful for area-encoded bivariate hexbins.
+
+<a href="mesh" href="#mesh">#</a> hexbin.<b>mesh</b>()
+
+Returns the SVG path string for a hexagonal mesh that covers the area of the layout (as determined by the layout size). The returned mesh is designed to be stroked. The mesh may extend slightly beyond the layout’s defined area, and thus may need to be clipped.

data/vendor/assets/javascripts/d3/plugins/hexbin/hexbin.js

@@ -0,0 +1,96 @@
+(function() {
+
+d3.hexbin = function() {
+  var width = 1,
+      height = 1,
+      r,
+      x = d3_hexbinX,
+      y = d3_hexbinY,
+      dx,
+      dy;
+
+  function hexbin(points) {
+    var binsById = {};
+
+    points.forEach(function(point, i) {
+      var py = y.call(hexbin, point, i) / dy, pj = Math.round(py),
+          px = x.call(hexbin, point, i) / dx - (pj & 1 ? .5 : 0), pi = Math.round(px),
+          py1 = py - pj;
+
+      if (Math.abs(py1) * 3 > 1) {
+        var px1 = px - pi,
+            pi2 = pi + (px < pi ? -1 : 1) / 2,
+            pj2 = pj + (py < pj ? -1 : 1),
+            px2 = px - pi2,
+            py2 = py - pj2;
+        if (px1 * px1 + py1 * py1 > px2 * px2 + py2 * py2) pi = pi2 + (pj & 1 ? 1 : -1) / 2, pj = pj2;
+      }
+
+      var id = pi + "-" + pj, bin = binsById[id];
+      if (bin) bin.push(point); else {
+        bin = binsById[id] = [point];
+        bin.x = (pi + (pj & 1 ? 1 / 2 : 0)) * dx;
+        bin.y = pj * dy;
+      }
+    });
+
+    return d3.values(binsById);
+  }
+
+  hexbin.x = function(_) {
+    if (!arguments.length) return x;
+    x = _;
+    return hexbin;
+  };
+
+  hexbin.y = function(_) {
+    if (!arguments.length) return y;
+    y = _;
+    return hexbin;
+  };
+
+  hexbin.hexagon = function(radius) {
+    var x0 = 0, y0 = 0;
+    if (arguments.length < 1) radius = r;
+    return "m" + d3_hexbinAngles.map(function(angle) {
+      var x1 = Math.sin(angle) * radius,
+          y1 = -Math.cos(angle) * radius,
+          dx = x1 - x0,
+          dy = y1 - y0;
+      x0 = x1, y0 = y1;
+      return [dx, dy];
+    }).join("l") + "z";
+  };
+
+  hexbin.mesh = function() {
+    var path = [], mesh = hexbin.hexagon().slice(0, 4).join("l");
+    for (var y = 0, odd = false; y < height + r; y += dy, odd = !odd) {
+      for (var x = odd ? dx / 2 : 0; x < width; x += dx) {
+        path.push("M", x, ",", y, "m", mesh);
+      }
+    }
+    return path.join("");
+  };
+
+  hexbin.size = function(_) {
+    if (!arguments.length) return [width, height];
+    width = +_[0], height = +_[1];
+    return hexbin;
+  };
+
+  hexbin.radius = function(_) {
+    if (!arguments.length) return r;
+    r = +_;
+    dx = r * 2 * Math.sin(Math.PI / 3);
+    dy = r * 1.5;
+    return hexbin;
+  };
+
+  return hexbin.radius(1);
+};
+
+var d3_hexbinAngles = d3.range(0, 2 * Math.PI, Math.PI / 3),
+    d3_hexbinX = function(d) { return d[0]; },
+    d3_hexbinY = function(d) { return d[1]; };
+
+})();

data/vendor/assets/javascripts/d3/plugins/hive/README.md

@@ -0,0 +1,5 @@
+# d3.hive
+
+A plugin for rendering Hive Plots. Example:
+
+<http://bost.ocks.org/mike/hive/>

data/vendor/assets/javascripts/d3/plugins/hive/hive.js

@@ -0,0 +1,80 @@
+d3.hive = {};
+
+d3.hive.link = function() {
+  var source = function(d) { return d.source; },
+      target = function(d) { return d.target; },
+      angle = function(d) { return d.angle; },
+      startRadius = function(d) { return d.radius; },
+      endRadius = startRadius,
+      arcOffset = -Math.PI / 2;
+
+  function link(d, i) {
+    var s = node(source, this, d, i),
+        t = node(target, this, d, i),
+        x;
+    if (t.a < s.a) x = t, t = s, s = x;
+    if (t.a - s.a > Math.PI) s.a += 2 * Math.PI;
+    var a1 = s.a + (t.a - s.a) / 3,
+        a2 = t.a - (t.a - s.a) / 3;
+    return s.r0 - s.r1 || t.r0 - t.r1
+        ? "M" + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0
+        + "L" + Math.cos(s.a) * s.r1 + "," + Math.sin(s.a) * s.r1
+        + "C" + Math.cos(a1) * s.r1 + "," + Math.sin(a1) * s.r1
+        + " " + Math.cos(a2) * t.r1 + "," + Math.sin(a2) * t.r1
+        + " " + Math.cos(t.a) * t.r1 + "," + Math.sin(t.a) * t.r1
+        + "L" + Math.cos(t.a) * t.r0 + "," + Math.sin(t.a) * t.r0
+        + "C" + Math.cos(a2) * t.r0 + "," + Math.sin(a2) * t.r0
+        + " " + Math.cos(a1) * s.r0 + "," + Math.sin(a1) * s.r0
+        + " " + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0
+        : "M" + Math.cos(s.a) * s.r0 + "," + Math.sin(s.a) * s.r0
+        + "C" + Math.cos(a1) * s.r1 + "," + Math.sin(a1) * s.r1
+        + " " + Math.cos(a2) * t.r1 + "," + Math.sin(a2) * t.r1
+        + " " + Math.cos(t.a) * t.r1 + "," + Math.sin(t.a) * t.r1;
+  }
+
+  function node(method, thiz, d, i) {
+    var node = method.call(thiz, d, i),
+        a = +(typeof angle === "function" ? angle.call(thiz, node, i) : angle) + arcOffset,
+        r0 = +(typeof startRadius === "function" ? startRadius.call(thiz, node, i) : startRadius),
+        r1 = (startRadius === endRadius ? r0 : +(typeof endRadius === "function" ? endRadius.call(thiz, node, i) : endRadius));
+    return {r0: r0, r1: r1, a: a};
+  }
+
+  link.source = function(_) {
+    if (!arguments.length) return source;
+    source = _;
+    return link;
+  };
+
+  link.target = function(_) {
+    if (!arguments.length) return target;
+    target = _;
+    return link;
+  };
+
+  link.angle = function(_) {
+    if (!arguments.length) return angle;
+    angle = _;
+    return link;
+  };
+
+  link.radius = function(_) {
+    if (!arguments.length) return startRadius;
+    startRadius = endRadius = _;
+    return link;
+  };
+
+  link.startRadius = function(_) {
+    if (!arguments.length) return startRadius;
+    startRadius = _;
+    return link;
+  };
+
+  link.endRadius = function(_) {
+    if (!arguments.length) return endRadius;
+    endRadius = _;
+    return link;
+  };
+
+  return link;
+};

data/vendor/assets/javascripts/d3/plugins/horizon/README.md

@@ -0,0 +1,11 @@
+# d3.horizon
+
+Demo: <http://bl.ocks.org/1483226>
+
+![Horizon Chart](http://vis.berkeley.edu/papers/horizon/construction.png)
+
+A horizon chart is a variation of a single-series area chart where the area is folded into multiple bands. Color is used to encode bands, allowing the size of the chart to be reduced significantly without impeding readability.
+
+This layout algorithm is based on the work of J. Heer, N. Kong and M. Agrawala in "Sizing the Horizon: The Effects of Chart Size and Layering on the Graphical Perception of Time Series Visualizations", CHI 2009.
+
+<http://hci.stanford.edu/publications/2009/heer-horizon-chi09.pdf>

data/vendor/assets/javascripts/d3/plugins/horizon/horizon.js

@@ -0,0 +1,192 @@
+(function() {
+  d3.horizon = function() {
+    var bands = 1, // between 1 and 5, typically
+        mode = "offset", // or mirror
+        interpolate = "linear", // or basis, monotone, step-before, etc.
+        x = d3_horizonX,
+        y = d3_horizonY,
+        w = 960,
+        h = 40,
+        duration = 0;
+
+    var color = d3.scale.linear()
+        .domain([-1, 0, 1])
+        .range(["#d62728", "#fff", "#1f77b4"]);
+
+    // For each small multiple…
+    function horizon(g) {
+      g.each(function(d) {
+        var g = d3.select(this),
+            xMin = Infinity,
+            xMax = -Infinity,
+            yMax = -Infinity,
+            x0, // old x-scale
+            y0, // old y-scale
+            t0,
+            id; // unique id for paths
+
+        // Compute x- and y-values along with extents.
+        var data = d.map(function(d, i) {
+          var xv = x.call(this, d, i),
+              yv = y.call(this, d, i);
+          if (xv < xMin) xMin = xv;
+          if (xv > xMax) xMax = xv;
+          if (-yv > yMax) yMax = -yv;
+          if (yv > yMax) yMax = yv;
+          return [xv, yv];
+        });
+
+        // Compute the new x- and y-scales, and transform.
+        var x1 = d3.scale.linear().domain([xMin, xMax]).range([0, w]),
+            y1 = d3.scale.linear().domain([0, yMax]).range([0, h * bands]),
+            t1 = d3_horizonTransform(bands, h, mode);
+
+        // Retrieve the old scales, if this is an update.
+        if (this.__chart__) {
+          x0 = this.__chart__.x;
+          y0 = this.__chart__.y;
+          t0 = this.__chart__.t;
+          id = this.__chart__.id;
+        } else {
+          x0 = x1.copy();
+          y0 = y1.copy();
+          t0 = t1;
+          id = ++d3_horizonId;
+        }
+
+        // We'll use a defs to store the area path and the clip path.
+        var defs = g.selectAll("defs")
+            .data([null]);
+
+        // The clip path is a simple rect.
+        defs.enter().append("defs").append("clipPath")
+            .attr("id", "d3_horizon_clip" + id)
+          .append("rect")
+            .attr("width", w)
+            .attr("height", h);
+
+        defs.select("rect").transition()
+            .duration(duration)
+            .attr("width", w)
+            .attr("height", h);
+
+        // We'll use a container to clip all horizon layers at once.
+        g.selectAll("g")
+            .data([null])
+          .enter().append("g")
+            .attr("clip-path", "url(#d3_horizon_clip" + id + ")");
+
+        // Instantiate each copy of the path with different transforms.
+        var path = g.select("g").selectAll("path")
+            .data(d3.range(-1, -bands - 1, -1).concat(d3.range(1, bands + 1)), Number);
+
+        var d0 = d3_horizonArea
+            .interpolate(interpolate)
+            .x(function(d) { return x0(d[0]); })
+            .y0(h * bands)
+            .y1(function(d) { return h * bands - y0(d[1]); })
+            (data);
+
+        var d1 = d3_horizonArea
+            .x(function(d) { return x1(d[0]); })
+            .y1(function(d) { return h * bands - y1(d[1]); })
+            (data);
+
+        path.enter().append("path")
+            .style("fill", color)
+            .attr("transform", t0)
+            .attr("d", d0);
+
+        path.transition()
+            .duration(duration)
+            .style("fill", color)
+            .attr("transform", t1)
+            .attr("d", d1);
+
+        path.exit().transition()
+            .duration(duration)
+            .attr("transform", t1)
+            .attr("d", d1)
+            .remove();
+
+        // Stash the new scales.
+        this.__chart__ = {x: x1, y: y1, t: t1, id: id};
+      });
+      d3.timer.flush();
+    }
+
+    horizon.duration = function(x) {
+      if (!arguments.length) return duration;
+      duration = +x;
+      return horizon;
+    };
+
+    horizon.bands = function(x) {
+      if (!arguments.length) return bands;
+      bands = +x;
+      color.domain([-bands, 0, bands]);
+      return horizon;
+    };
+
+    horizon.mode = function(x) {
+      if (!arguments.length) return mode;
+      mode = x + "";
+      return horizon;
+    };
+
+    horizon.colors = function(x) {
+      if (!arguments.length) return color.range();
+      color.range(x);
+      return horizon;
+    };
+
+    horizon.interpolate = function(x) {
+      if (!arguments.length) return interpolate;
+      interpolate = x + "";
+      return horizon;
+    };
+
+    horizon.x = function(z) {
+      if (!arguments.length) return x;
+      x = z;
+      return horizon;
+    };
+
+    horizon.y = function(z) {
+      if (!arguments.length) return y;
+      y = z;
+      return horizon;
+    };
+
+    horizon.width = function(x) {
+      if (!arguments.length) return w;
+      w = +x;
+      return horizon;
+    };
+
+    horizon.height = function(x) {
+      if (!arguments.length) return h;
+      h = +x;
+      return horizon;
+    };
+
+    return horizon;
+  };
+
+  var d3_horizonArea = d3.svg.area(),
+      d3_horizonId = 0;
+
+  function d3_horizonX(d) {
+    return d[0];
+  }
+
+  function d3_horizonY(d) {
+    return d[1];
+  }
+
+  function d3_horizonTransform(bands, h, mode) {
+    return mode == "offset"
+        ? function(d) { return "translate(0," + (d + (d < 0) - bands) * h + ")"; }
+        : function(d) { return (d < 0 ? "scale(1,-1)" : "") + "translate(0," + (d - bands) * h + ")"; };
+  }
+})();