rubyvis 0.1.0 → 0.1.1

data/vendor/src/layout/Grid.js

@@ -0,0 +1,119 @@
+/**
+ * Constructs a new, empty grid layout. Layouts are not typically constructed
+ * directly; instead, they are added to an existing panel via
+ * {@link pv.Mark#add}.
+ *
+ * @class Implements a grid layout with regularly-sized rows and columns. The
+ * number of rows and columns are determined from their respective
+ * properties. For example, the 2×3 array:
+ *
+ * <pre>1 2 3
+ * 4 5 6</pre>
+ *
+ * can be represented using the <tt>rows</tt> property as:
+ *
+ * <pre>[[1, 2, 3], [4, 5, 6]]</pre>
+ *
+ * If your data is in column-major order, you can equivalently use the
+ * <tt>columns</tt> property. If the <tt>rows</tt> property is an array, it
+ * takes priority over the <tt>columns</tt> property. The data is implicitly
+ * transposed, as if the {@link pv.transpose} operator were applied.
+ *
+ * <p>This layout exports a single <tt>cell</tt> mark prototype, which is
+ * intended to be used with a bar, panel, layout, or subclass thereof. The data
+ * property of the cell prototype is defined as the elements in the array. For
+ * example, if the array is a two-dimensional array of values in the range
+ * [0,1], a simple heatmap can be generated as:
+ *
+ * <pre>vis.add(pv.Layout.Grid)
+ *     .rows(arrays)
+ *   .cell.add(pv.Bar)
+ *     .fillStyle(pv.ramp("white", "black"))</pre>
+ *
+ * The grid subdivides the full width and height of the parent panel into equal
+ * rectangles. Note, however, that for large, interactive, or animated heatmaps,
+ * you may see significantly better performance through dynamic {@link pv.Image}
+ * generation.
+ *
+ * <p>For irregular grids using value-based spatial partitioning, see {@link
+ * pv.Layout.Treemap}.
+ *
+ * @extends pv.Layout
+ */
+pv.Layout.Grid = function() {
+  pv.Layout.call(this);
+  var that = this;
+
+  /**
+   * The cell prototype. This prototype is intended to be used with a bar,
+   * panel, or layout (or subclass thereof) to render the grid cells.
+   *
+   * @type pv.Mark
+   * @name pv.Layout.Grid.prototype.cell
+   */
+  (this.cell = new pv.Mark()
+      .data(function() {
+          return that.scene[that.index].$grid;
+        })
+      .width(function() {
+          return that.width() / that.cols();
+        })
+      .height(function() {
+          return that.height() / that.rows();
+        })
+      .left(function() {
+          return this.width() * (this.index % that.cols());
+        })
+      .top(function() {
+          return this.height() * Math.floor(this.index / that.cols());
+        })).parent = this;
+};
+
+pv.Layout.Grid.prototype = pv.extend(pv.Layout)
+    .property("rows")
+    .property("cols");
+
+/**
+ * Default properties for grid layouts. By default, there is one row and one
+ * column, and the data is the propagated to the child cell.
+ *
+ * @type pv.Layout.Grid
+ */
+pv.Layout.Grid.prototype.defaults = new pv.Layout.Grid()
+    .extend(pv.Layout.prototype.defaults)
+    .rows(1)
+    .cols(1);
+
+/** @private */
+pv.Layout.Grid.prototype.buildImplied = function(s) {
+  pv.Layout.prototype.buildImplied.call(this, s);
+  var r = s.rows, c = s.cols;
+  if (typeof c == "object") r = pv.transpose(c);
+  if (typeof r == "object") {
+    s.$grid = pv.blend(r);
+    s.rows = r.length;
+    s.cols = r[0] ? r[0].length : 0;
+  } else {
+    s.$grid = pv.repeat([s.data], r * c);
+  }
+};
+
+/**
+ * The number of rows. This property can also be specified as the data in
+ * row-major order; in this case, the rows property is implicitly set to the
+ * length of the array, and the cols property is set to the length of the first
+ * element in the array.
+ *
+ * @type number
+ * @name pv.Layout.Grid.prototype.rows
+ */
+
+/**
+ * The number of columns. This property can also be specified as the data in
+ * column-major order; in this case, the cols property is implicitly set to the
+ * length of the array, and the rows property is set to the length of the first
+ * element in the array.
+ *
+ * @type number
+ * @name pv.Layout.Grid.prototype.cols
+ */

data/vendor/src/layout/Hierarchy.js

@@ -0,0 +1,249 @@
+/**
+ * Constructs a new, empty hierarchy layout. Layouts are not typically
+ * constructed directly; instead, they are added to an existing panel via
+ * {@link pv.Mark#add}.
+ *
+ * @class Represents an abstract layout for hierarchy diagrams. This class is a
+ * specialization of {@link pv.Layout.Network}, providing the basic structure
+ * for both hierarchical node-link diagrams (such as Reingold-Tilford trees) and
+ * space-filling hierarchy diagrams (such as sunbursts and treemaps).
+ *
+ * <p>Unlike general network layouts, the <tt>links</tt> property need not be
+ * defined explicitly. Instead, the links are computed implicitly from the
+ * <tt>parentNode</tt> attribute of the node objects, as defined by the
+ * <tt>nodes</tt> property. This implementation is also available as
+ * {@link #links}, for reuse with non-hierarchical layouts; for example, to
+ * render a tree using force-directed layout.
+ *
+ * <p>Correspondingly, the <tt>nodes</tt> property is represented as a union of
+ * {@link pv.Layout.Network.Node} and {@link pv.Dom.Node}. To construct a node
+ * hierarchy from a simple JSON map, use the {@link pv.Dom} operator; this
+ * operator also provides an easy way to sort nodes before passing them to the
+ * layout.
+ *
+ * <p>For more details on how to use this layout, see
+ * {@link pv.Layout.Network}.
+ *
+ * @see pv.Layout.Cluster
+ * @see pv.Layout.Partition
+ * @see pv.Layout.Tree
+ * @see pv.Layout.Treemap
+ * @see pv.Layout.Indent
+ * @see pv.Layout.Pack
+ * @extends pv.Layout.Network
+ */
+pv.Layout.Hierarchy = function() {
+  pv.Layout.Network.call(this);
+  this.link.strokeStyle("#ccc");
+};
+
+pv.Layout.Hierarchy.prototype = pv.extend(pv.Layout.Network);
+
+/** @private Compute the implied links. (Links are null by default.) */
+pv.Layout.Hierarchy.prototype.buildImplied = function(s) {
+  if (!s.links) s.links = pv.Layout.Hierarchy.links.call(this);
+  pv.Layout.Network.prototype.buildImplied.call(this, s);
+};
+
+/** The implied links; computes links using the <tt>parentNode</tt> attribute. */
+pv.Layout.Hierarchy.links = function() {
+  return this.nodes()
+      .filter(function(n) { return n.parentNode; })
+      .map(function(n) {
+          return {
+              sourceNode: n,
+              targetNode: n.parentNode,
+              linkValue: 1
+            };
+      });
+};
+
+/** @private Provides standard node-link layout based on breadth & depth. */
+pv.Layout.Hierarchy.NodeLink = {
+
+  /** @private */
+  buildImplied: function(s) {
+    var nodes = s.nodes,
+        orient = s.orient,
+        horizontal = /^(top|bottom)$/.test(orient),
+        w = s.width,
+        h = s.height;
+
+    /* Compute default inner and outer radius. */
+    if (orient == "radial") {
+      var ir = s.innerRadius, or = s.outerRadius;
+      if (ir == null) ir = 0;
+      if (or == null) or = Math.min(w, h) / 2;
+    }
+
+    /** @private Returns the radius of the given node. */
+    function radius(n) {
+      return n.parentNode ? (n.depth * (or - ir) + ir) : 0;
+    }
+
+    /** @private Returns the angle of the given node. */
+    function midAngle(n) {
+      return (n.parentNode ? (n.breadth - .25) * 2 * Math.PI : 0);
+    }
+
+    /** @private */
+    function x(n) {
+      switch (orient) {
+        case "left": return n.depth * w;
+        case "right": return w - n.depth * w;
+        case "top": return n.breadth * w;
+        case "bottom": return w - n.breadth * w;
+        case "radial": return w / 2 + radius(n) * Math.cos(n.midAngle);
+      }
+    }
+
+    /** @private */
+    function y(n) {
+      switch (orient) {
+        case "left": return n.breadth * h;
+        case "right": return h - n.breadth * h;
+        case "top": return n.depth * h;
+        case "bottom": return h - n.depth * h;
+        case "radial": return h / 2 + radius(n) * Math.sin(n.midAngle);
+      }
+    }
+
+    for (var i = 0; i < nodes.length; i++) {
+      var n = nodes[i];
+      n.midAngle = orient == "radial" ? midAngle(n)
+          : horizontal ? Math.PI / 2 : 0;
+      n.x = x(n);
+      n.y = y(n);
+      if (n.firstChild) n.midAngle += Math.PI;
+    }
+  }
+};
+
+/** @private Provides standard space-filling layout based on breadth & depth. */
+pv.Layout.Hierarchy.Fill = {
+
+  /** @private */
+  constructor: function() {
+    this.node
+        .strokeStyle("#fff")
+        .fillStyle("#ccc")
+        .width(function(n) { return n.dx; })
+        .height(function(n) { return n.dy; })
+        .innerRadius(function(n) { return n.innerRadius; })
+        .outerRadius(function(n) { return n.outerRadius; })
+        .startAngle(function(n) { return n.startAngle; })
+        .angle(function(n) { return n.angle; });
+
+    this.label
+        .textAlign("center")
+        .left(function(n) { return n.x + (n.dx / 2); })
+        .top(function(n) { return n.y + (n.dy / 2); });
+
+    /* Hide unsupported link. */
+    delete this.link;
+  },
+
+  /** @private */
+  buildImplied: function(s) {
+    var nodes = s.nodes,
+        orient = s.orient,
+        horizontal = /^(top|bottom)$/.test(orient),
+        w = s.width,
+        h = s.height,
+        depth = -nodes[0].minDepth;
+
+    /* Compute default inner and outer radius. */
+    if (orient == "radial") {
+      var ir = s.innerRadius, or = s.outerRadius;
+      if (ir == null) ir = 0;
+      if (ir) depth *= 2; // use full depth step for root
+      if (or == null) or = Math.min(w, h) / 2;
+    }
+
+    /** @private Scales the specified depth for a space-filling layout. */
+    function scale(d, depth) {
+      return (d + depth) / (1 + depth);
+    }
+
+    /** @private */
+    function x(n) {
+      switch (orient) {
+        case "left": return scale(n.minDepth, depth) * w;
+        case "right": return (1 - scale(n.maxDepth, depth)) * w;
+        case "top": return n.minBreadth * w;
+        case "bottom": return (1 - n.maxBreadth) * w;
+        case "radial": return w / 2;
+      }
+    }
+
+    /** @private */
+    function y(n) {
+      switch (orient) {
+        case "left": return n.minBreadth * h;
+        case "right": return (1 - n.maxBreadth) * h;
+        case "top": return scale(n.minDepth, depth) * h;
+        case "bottom": return (1 - scale(n.maxDepth, depth)) * h;
+        case "radial": return h / 2;
+      }
+    }
+
+    /** @private */
+    function dx(n) {
+      switch (orient) {
+        case "left":
+        case "right": return (n.maxDepth - n.minDepth) / (1 + depth) * w;
+        case "top":
+        case "bottom": return (n.maxBreadth - n.minBreadth) * w;
+        case "radial": return n.parentNode ? (n.innerRadius + n.outerRadius) * Math.cos(n.midAngle) : 0;
+      }
+    }
+
+    /** @private */
+    function dy(n) {
+      switch (orient) {
+        case "left":
+        case "right": return (n.maxBreadth - n.minBreadth) * h;
+        case "top":
+        case "bottom": return (n.maxDepth - n.minDepth) / (1 + depth) * h;
+        case "radial": return n.parentNode ? (n.innerRadius + n.outerRadius) * Math.sin(n.midAngle) : 0;
+      }
+    }
+
+    /** @private */
+    function innerRadius(n) {
+      return Math.max(0, scale(n.minDepth, depth / 2)) * (or - ir) + ir;
+    }
+
+    /** @private */
+    function outerRadius(n) {
+      return scale(n.maxDepth, depth / 2) * (or - ir) + ir;
+    }
+
+    /** @private */
+    function startAngle(n) {
+      return (n.parentNode ? n.minBreadth - .25 : 0) * 2 * Math.PI;
+    }
+
+    /** @private */
+    function angle(n) {
+      return (n.parentNode ? n.maxBreadth - n.minBreadth : 1) * 2 * Math.PI;
+    }
+
+    for (var i = 0; i < nodes.length; i++) {
+      var n = nodes[i];
+      n.x = x(n);
+      n.y = y(n);
+      if (orient == "radial") {
+        n.innerRadius = innerRadius(n);
+        n.outerRadius = outerRadius(n);
+        n.startAngle = startAngle(n);
+        n.angle = angle(n);
+        n.midAngle = n.startAngle + n.angle / 2;
+      } else {
+        n.midAngle = horizontal ? -Math.PI / 2 : 0;
+      }
+      n.dx = dx(n);
+      n.dy = dy(n);
+    }
+  }
+};

data/vendor/src/layout/Horizon.js

@@ -0,0 +1,159 @@
+/**
+ * Constructs a new, empty horizon layout. Layouts are not typically constructed
+ * directly; instead, they are added to an existing panel via
+ * {@link pv.Mark#add}.
+ *
+ * @class Implements a horizon layout, which is a variation of a single-series
+ * area chart where the area is folded into multiple bands. Color is used to
+ * encode band, 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 <a
+ * href="http://hci.stanford.edu/publications/2009/heer-horizon-chi09.pdf">"Sizing
+ * the Horizon: The Effects of Chart Size and Layering on the Graphical
+ * Perception of Time Series Visualizations"</a>, CHI 2009.
+ *
+ * <p>This layout exports a single <tt>band</tt> mark prototype, which is
+ * intended to be used with an area mark. The band mark is contained in a panel
+ * which is replicated per band (and for negative/positive bands). For example,
+ * to create a simple horizon graph given an array of numbers:
+ *
+ * <pre>vis.add(pv.Layout.Horizon)
+ *     .bands(n)
+ *   .band.add(pv.Area)
+ *     .data(data)
+ *     .left(function() this.index * 35)
+ *     .height(function(d) d * 40);</pre>
+ *
+ * The layout can be further customized by changing the number of bands, and
+ * toggling whether the negative bands are mirrored or offset. (See the
+ * above-referenced paper for guidance.)
+ *
+ * <p>The <tt>fillStyle</tt> of the area can be overridden, though typically it
+ * is easier to customize the layout's behavior through the custom
+ * <tt>backgroundStyle</tt>, <tt>positiveStyle</tt> and <tt>negativeStyle</tt>
+ * properties. By default, the background is white, positive bands are blue, and
+ * negative bands are red. For the most accurate presentation, use fully-opaque
+ * colors of equal intensity for the negative and positive bands.
+ *
+ * @extends pv.Layout
+ */
+pv.Layout.Horizon = function() {
+  pv.Layout.call(this);
+  var that = this,
+      bands, // cached bands
+      mode, // cached mode
+      size, // cached height
+      fill, // cached background style
+      red, // cached negative color (ramp)
+      blue, // cached positive color (ramp)
+      buildImplied = this.buildImplied;
+
+  /** @private Cache the layout state to optimize properties. */
+  this.buildImplied = function(s) {
+    buildImplied.call(this, s);
+    bands = s.bands;
+    mode = s.mode;
+    size = Math.round((mode == "color" ? .5 : 1) * s.height);
+    fill = s.backgroundStyle;
+    red = pv.ramp(fill, s.negativeStyle).domain(0, bands);
+    blue = pv.ramp(fill, s.positiveStyle).domain(0, bands);
+  };
+
+  var bands = new pv.Panel()
+      .data(function() { return pv.range(bands * 2); })
+      .overflow("hidden")
+      .height(function() { return size; })
+      .top(function(i) { return mode == "color" ? (i & 1) * size : 0; })
+      .fillStyle(function(i) { return i ? null : fill; });
+
+  /**
+   * The band prototype. This prototype is intended to be used with an Area
+   * mark to render the horizon bands.
+   *
+   * @type pv.Mark
+   * @name pv.Layout.Horizon.prototype.band
+   */
+  this.band = new pv.Mark()
+      .top(function(d, i) {
+          return mode == "mirror" && i & 1
+              ? (i + 1 >> 1) * size
+              : null;
+        })
+      .bottom(function(d, i) {
+          return mode == "mirror"
+              ? (i & 1 ? null : (i + 1 >> 1) * -size)
+              : ((i & 1 || -1) * (i + 1 >> 1) * size);
+        })
+      .fillStyle(function(d, i) {
+          return (i & 1 ? red : blue)((i >> 1) + 1);
+        });
+
+  this.band.add = function(type) {
+    return that.add(pv.Panel).extend(bands).add(type).extend(this);
+  };
+};
+
+pv.Layout.Horizon.prototype = pv.extend(pv.Layout)
+    .property("bands", Number)
+    .property("mode", String)
+    .property("backgroundStyle", pv.color)
+    .property("positiveStyle", pv.color)
+    .property("negativeStyle", pv.color);
+
+/**
+ * Default properties for horizon layouts. By default, there are two bands, the
+ * mode is "offset", the background style is "white", the positive style is
+ * blue, negative style is red.
+ *
+ * @type pv.Layout.Horizon
+ */
+pv.Layout.Horizon.prototype.defaults = new pv.Layout.Horizon()
+    .extend(pv.Layout.prototype.defaults)
+    .bands(2)
+    .mode("offset")
+    .backgroundStyle("white")
+    .positiveStyle("#1f77b4")
+    .negativeStyle("#d62728");
+
+/**
+ * The horizon mode: offset, mirror, or color. The default is "offset".
+ *
+ * @type string
+ * @name pv.Layout.Horizon.prototype.mode
+ */
+
+/**
+ * The number of bands. Must be at least one. The default value is two.
+ *
+ * @type number
+ * @name pv.Layout.Horizon.prototype.bands
+ */
+
+/**
+ * The positive band color; if non-null, the interior of positive bands are
+ * filled with the specified color. The default value of this property is blue.
+ * For accurate blending, this color should be fully opaque.
+ *
+ * @type pv.Color
+ * @name pv.Layout.Horizon.prototype.positiveStyle
+ */
+
+/**
+ * The negative band color; if non-null, the interior of negative bands are
+ * filled with the specified color. The default value of this property is red.
+ * For accurate blending, this color should be fully opaque.
+ *
+ * @type pv.Color
+ * @name pv.Layout.Horizon.prototype.negativeStyle
+ */
+
+/**
+ * The background color. The panel background is filled with the specified
+ * color, and the negative and positive bands are filled with an interpolated
+ * color between this color and the respective band color. The default value of
+ * this property is white. For accurate blending, this color should be fully
+ * opaque.
+ *
+ * @type pv.Color
+ * @name pv.Layout.Horizon.prototype.backgroundStyle
+ */