rubyvis 0.1.0 → 0.1.1

data/vendor/src/mark/Anchor.js

@@ -0,0 +1,81 @@
+/**
+ * Constructs a new mark anchor with default properties.
+ *
+ * @class Represents an anchor on a given mark. An anchor is itself a mark, but
+ * without a visual representation. It serves only to provide useful default
+ * properties that can be inherited by other marks. Each type of mark can define
+ * any number of named anchors for convenience. If the concrete mark type does
+ * not define an anchor implementation specifically, one will be inherited from
+ * the mark's parent class.
+ *
+ * <p>For example, the bar mark provides anchors for its four sides: left,
+ * right, top and bottom. Adding a label to the top anchor of a bar,
+ *
+ * <pre>bar.anchor("top").add(pv.Label);</pre>
+ *
+ * will render a text label on the top edge of the bar; the top anchor defines
+ * the appropriate position properties (top and left), as well as text-rendering
+ * properties for convenience (textAlign and textBaseline).
+ *
+ * <p>Note that anchors do not <i>inherit</i> from their targets; the positional
+ * properties are copied from the scene graph, which guarantees that the anchors
+ * are positioned correctly, even if the positional properties are not defined
+ * deterministically. (In addition, it also improves performance by avoiding
+ * re-evaluating expensive properties.) If you want the anchor to inherit from
+ * the target, use {@link pv.Mark#extend} before adding. For example:
+ *
+ * <pre>bar.anchor("top").extend(bar).add(pv.Label);</pre>
+ *
+ * The anchor defines it's own positional properties, but other properties (such
+ * as the title property, say) can be inherited using the above idiom. Also note
+ * that you can override positional properties in the anchor for custom
+ * behavior.
+ *
+ * @extends pv.Mark
+ * @param {pv.Mark} target the anchor target.
+ */
+pv.Anchor = function(target) {
+  pv.Mark.call(this);
+  this.target = target;
+  this.parent = target.parent;
+};
+
+pv.Anchor.prototype = pv.extend(pv.Mark)
+    .property("name", String);
+
+/**
+ * The anchor name. The set of supported anchor names is dependent on the
+ * concrete mark type; see the mark type for details. For example, bars support
+ * left, right, top and bottom anchors.
+ *
+ * <p>While anchor names are typically constants, the anchor name is a true
+ * property, which means you can specify a function to compute the anchor name
+ * dynamically. For instance, if you wanted to alternate top and bottom anchors,
+ * saying
+ *
+ * <pre>m.anchor(function() (this.index % 2) ? "top" : "bottom").add(pv.Dot);</pre>
+ *
+ * would have the desired effect.
+ *
+ * @type string
+ * @name pv.Anchor.prototype.name
+ */
+
+/**
+ * Sets the prototype of this anchor to the specified mark. Any properties not
+ * defined on this mark may be inherited from the specified prototype mark, or
+ * its prototype, and so on. The prototype mark need not be the same type of
+ * mark as this mark. (Note that for inheritance to be useful, properties with
+ * the same name on different mark types should have equivalent meaning.)
+ *
+ * <p>This method differs slightly from the normal mark behavior in that the
+ * anchor's target is preserved.
+ *
+ * @param {pv.Mark} proto the new prototype.
+ * @returns {pv.Anchor} this anchor.
+ * @see pv.Mark#add
+ */
+pv.Anchor.prototype.extend = function(proto) {
+  this.proto = proto;
+  return this;
+};

data/vendor/src/mark/Area.js

@@ -0,0 +1,268 @@
+/**
+ * Constructs a new area mark with default properties. Areas are not typically
+ * constructed directly, but by adding to a panel or an existing mark via
+ * {@link pv.Mark#add}.
+ *
+ * @class Represents an area mark: the solid area between two series of
+ * connected line segments. Unsurprisingly, areas are used most frequently for
+ * area charts.
+ *
+ * <p>Just as a line represents a polyline, the <tt>Area</tt> mark type
+ * represents a <i>polygon</i>. However, an area is not an arbitrary polygon;
+ * vertices are paired either horizontally or vertically into parallel
+ * <i>spans</i>, and each span corresponds to an associated datum. Either the
+ * width or the height must be specified, but not both; this determines whether
+ * the area is horizontally-oriented or vertically-oriented.  Like lines, areas
+ * can be stroked and filled with arbitrary colors.
+ *
+ * <p>See also the <a href="../../api/Area.html">Area guide</a>.
+ *
+ * @extends pv.Mark
+ */
+pv.Area = function() {
+  pv.Mark.call(this);
+};
+
+pv.Area.prototype = pv.extend(pv.Mark)
+    .property("width", Number)
+    .property("height", Number)
+    .property("lineWidth", Number)
+    .property("strokeStyle", pv.color)
+    .property("fillStyle", pv.color)
+    .property("segmented", Boolean)
+    .property("interpolate", String)
+    .property("tension", Number);
+
+pv.Area.prototype.type = "area";
+
+/**
+ * The width of a given span, in pixels; used for horizontal spans. If the width
+ * is specified, the height property should be 0 (the default). Either the top
+ * or bottom property should be used to space the spans vertically, typically as
+ * a multiple of the index.
+ *
+ * @type number
+ * @name pv.Area.prototype.width
+ */
+
+/**
+ * The height of a given span, in pixels; used for vertical spans. If the height
+ * is specified, the width property should be 0 (the default). Either the left
+ * or right property should be used to space the spans horizontally, typically
+ * as a multiple of the index.
+ *
+ * @type number
+ * @name pv.Area.prototype.height
+ */
+
+/**
+ * The width of stroked lines, in pixels; used in conjunction with
+ * <tt>strokeStyle</tt> to stroke the perimeter of the area. Unlike the
+ * {@link Line} mark type, the entire perimeter is stroked, rather than just one
+ * edge. The default value of this property is 1.5, but since the default stroke
+ * style is null, area marks are not stroked by default.
+ *
+ * <p>This property is <i>fixed</i> for non-segmented areas. See
+ * {@link pv.Mark}.
+ *
+ * @type number
+ * @name pv.Area.prototype.lineWidth
+ */
+
+/**
+ * The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
+ * stroke the perimeter of the area. Unlike the {@link Line} mark type, the
+ * entire perimeter is stroked, rather than just one edge. The default value of
+ * this property is null, meaning areas are not stroked by default.
+ *
+ * <p>This property is <i>fixed</i> for non-segmented areas. See
+ * {@link pv.Mark}.
+ *
+ * @type string
+ * @name pv.Area.prototype.strokeStyle
+ * @see pv.color
+ */
+
+/**
+ * The area fill style; if non-null, the interior of the polygon forming the
+ * area is filled with the specified color. The default value of this property
+ * is a categorical color.
+ *
+ * <p>This property is <i>fixed</i> for non-segmented areas. See
+ * {@link pv.Mark}.
+ *
+ * @type string
+ * @name pv.Area.prototype.fillStyle
+ * @see pv.color
+ */
+
+/**
+ * Whether the area is segmented; whether variations in fill style, stroke
+ * style, and the other properties are treated as fixed. Rendering segmented
+ * areas is noticeably slower than non-segmented areas.
+ *
+ * <p>This property is <i>fixed</i>. See {@link pv.Mark}.
+ *
+ * @type boolean
+ * @name pv.Area.prototype.segmented
+ */
+
+/**
+ * How to interpolate between values. Linear interpolation ("linear") is the
+ * default, producing a straight line between points. For piecewise constant
+ * functions (i.e., step functions), either "step-before" or "step-after" can be
+ * specified. To draw open uniform b-splines, specify "basis". To draw cardinal
+ * splines, specify "cardinal"; see also {@link #tension}.
+ *
+ * <p>This property is <i>fixed</i>. See {@link pv.Mark}.
+ *
+ * @type string
+ * @name pv.Area.prototype.interpolate
+ */
+
+/**
+ * The tension of cardinal splines; used in conjunction with
+ * interpolate("cardinal"). A value between 0 and 1 draws cardinal splines with
+ * the given tension. In some sense, the tension can be interpreted as the
+ * "length" of the tangent; a tension of 1 will yield all zero tangents (i.e.,
+ * linear interpolation), and a tension of 0 yields a Catmull-Rom spline. The
+ * default value is 0.7.
+ *
+ * <p>This property is <i>fixed</i>. See {@link pv.Mark}.
+ *
+ * @type number
+ * @name pv.Area.prototype.tension
+ */
+
+/**
+ * Default properties for areas. By default, there is no stroke and the fill
+ * style is a categorical color.
+ *
+ * @type pv.Area
+ */
+pv.Area.prototype.defaults = new pv.Area()
+    .extend(pv.Mark.prototype.defaults)
+    .lineWidth(1.5)
+    .fillStyle(pv.Colors.category20().by(pv.parent))
+    .interpolate("linear")
+    .tension(.7);
+
+/** @private Sets width and height to zero if null. */
+pv.Area.prototype.buildImplied = function(s) {
+  if (s.height == null) s.height = 0;
+  if (s.width == null) s.width = 0;
+  pv.Mark.prototype.buildImplied.call(this, s);
+};
+
+/** @private Records which properties may be fixed. */
+pv.Area.fixed = {
+  lineWidth: 1,
+  lineJoin: 1,
+  strokeStyle: 1,
+  fillStyle: 1,
+  segmented: 1,
+  interpolate: 1,
+  tension: 1
+};
+
+/**
+ * @private Make segmented required, such that this fixed property is always
+ * evaluated, even if the first segment is not visible. Also cache which
+ * properties are normally fixed.
+ */
+pv.Area.prototype.bind = function() {
+  pv.Mark.prototype.bind.call(this);
+  var binds = this.binds,
+      required = binds.required,
+      optional = binds.optional;
+  for (var i = 0, n = optional.length; i < n; i++) {
+    var p = optional[i];
+    p.fixed = p.name in pv.Area.fixed;
+    if (p.name == "segmented") {
+      required.push(p);
+      optional.splice(i, 1);
+      i--;
+      n--;
+    }
+  }
+
+  /* Cache the original arrays so they can be restored on build. */
+  this.binds.$required = required;
+  this.binds.$optional = optional;
+};
+
+/**
+ * @private Override the default build behavior such that fixed properties are
+ * determined dynamically, based on the value of the (always) fixed segmented
+ * property. Any fixed properties are only evaluated on the first instance,
+ * although their values are propagated to subsequent instances, so that they
+ * are available for property chaining and the like.
+ */
+pv.Area.prototype.buildInstance = function(s) {
+  var binds = this.binds;
+
+  /* Handle fixed properties on secondary instances. */
+  if (this.index) {
+    var fixed = binds.fixed;
+
+    /* Determine which properties are fixed. */
+    if (!fixed) {
+      fixed = binds.fixed = [];
+      function f(p) { return !p.fixed || (fixed.push(p), false); }
+      binds.required = binds.required.filter(f);
+      if (!this.scene[0].segmented) binds.optional = binds.optional.filter(f);
+    }
+
+    /* Copy fixed property values from the first instance. */
+    for (var i = 0, n = fixed.length; i < n; i++) {
+      var p = fixed[i].name;
+      s[p] = this.scene[0][p];
+    }
+  }
+
+  /* Evaluate all properties on the first instance. */
+  else {
+    binds.required = binds.$required;
+    binds.optional = binds.$optional;
+    binds.fixed = null;
+  }
+
+  pv.Mark.prototype.buildInstance.call(this, s);
+};
+
+/**
+ * Constructs a new area anchor with default properties. Areas support five
+ * different anchors:<ul>
+ *
+ * <li>top
+ * <li>left
+ * <li>center
+ * <li>bottom
+ * <li>right
+ *
+ * </ul>In addition to positioning properties (left, right, top bottom), the
+ * anchors support text rendering properties (text-align, text-baseline). Text
+ * is rendered to appear inside the area. The area anchor also propagates the
+ * interpolate, eccentricity, and tension properties such that an anchored area
+ * or line will match positions between control points.
+ *
+ * <p>For consistency with the other mark types, the anchor positions are
+ * defined in terms of their opposite edge. For example, the top anchor defines
+ * the bottom property, such that an area added to the top anchor grows upward.
+ *
+ * @param {string} name the anchor name; either a string or a property function.
+ * @returns {pv.Anchor}
+ */
+pv.Area.prototype.anchor = function(name) {
+  var scene;
+  return pv.Mark.prototype.anchor.call(this, name)
+    .interpolate(function() {
+       return this.scene.target[this.index].interpolate;
+      })
+    .eccentricity(function() {
+       return this.scene.target[this.index].eccentricity;
+      })
+    .tension(function() {
+        return this.scene.target[this.index].tension;
+      });
+};

data/vendor/src/mark/Bar.js

@@ -0,0 +1,93 @@
+/**
+ * Constructs a new bar mark with default properties. Bars are not typically
+ * constructed directly, but by adding to a panel or an existing mark via
+ * {@link pv.Mark#add}.
+ *
+ * @class Represents a bar: an axis-aligned rectangle that can be stroked and
+ * filled. Bars are used for many chart types, including bar charts, histograms
+ * and Gantt charts. Bars can also be used as decorations, for example to draw a
+ * frame border around a panel; in fact, a panel is a special type (a subclass)
+ * of bar.
+ *
+ * <p>Bars can be positioned in several ways. Most commonly, one of the four
+ * corners is fixed using two margins, and then the width and height properties
+ * determine the extent of the bar relative to this fixed location. For example,
+ * using the bottom and left properties fixes the bottom-left corner; the width
+ * then extends to the right, while the height extends to the top. As an
+ * alternative to the four corners, a bar can be positioned exclusively using
+ * margins; this is convenient as an inset from the containing panel, for
+ * example. See {@link pv.Mark} for details on the prioritization of redundant
+ * positioning properties.
+ *
+ * <p>See also the <a href="../../api/Bar.html">Bar guide</a>.
+ *
+ * @extends pv.Mark
+ */
+pv.Bar = function() {
+  pv.Mark.call(this);
+};
+
+pv.Bar.prototype = pv.extend(pv.Mark)
+    .property("width", Number)
+    .property("height", Number)
+    .property("lineWidth", Number)
+    .property("strokeStyle", pv.color)
+    .property("fillStyle", pv.color);
+
+pv.Bar.prototype.type = "bar";
+
+/**
+ * The width of the bar, in pixels. If the left position is specified, the bar
+ * extends rightward from the left edge; if the right position is specified, the
+ * bar extends leftward from the right edge.
+ *
+ * @type number
+ * @name pv.Bar.prototype.width
+ */
+
+/**
+ * The height of the bar, in pixels. If the bottom position is specified, the
+ * bar extends upward from the bottom edge; if the top position is specified,
+ * the bar extends downward from the top edge.
+ *
+ * @type number
+ * @name pv.Bar.prototype.height
+ */
+
+/**
+ * The width of stroked lines, in pixels; used in conjunction with
+ * <tt>strokeStyle</tt> to stroke the bar's border.
+ *
+ * @type number
+ * @name pv.Bar.prototype.lineWidth
+ */
+
+/**
+ * The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
+ * stroke the bar's border. The default value of this property is null, meaning
+ * bars are not stroked by default.
+ *
+ * @type string
+ * @name pv.Bar.prototype.strokeStyle
+ * @see pv.color
+ */
+
+/**
+ * The bar fill style; if non-null, the interior of the bar is filled with the
+ * specified color. The default value of this property is a categorical color.
+ *
+ * @type string
+ * @name pv.Bar.prototype.fillStyle
+ * @see pv.color
+ */
+
+/**
+ * Default properties for bars. By default, there is no stroke and the fill
+ * style is a categorical color.
+ *
+ * @type pv.Bar
+ */
+pv.Bar.prototype.defaults = new pv.Bar()
+    .extend(pv.Mark.prototype.defaults)
+    .lineWidth(1.5)
+    .fillStyle(pv.Colors.category20().by(pv.parent));

data/vendor/src/mark/Dot.js

@@ -0,0 +1,212 @@
+/**
+ * Constructs a new dot mark with default properties. Dots are not typically
+ * constructed directly, but by adding to a panel or an existing mark via
+ * {@link pv.Mark#add}.
+ *
+ * @class Represents a dot; a dot is simply a sized glyph centered at a given
+ * point that can also be stroked and filled. The <tt>size</tt> property is
+ * proportional to the area of the rendered glyph to encourage meaningful visual
+ * encodings. Dots can visually encode up to eight dimensions of data, though
+ * this may be unwise due to integrality. See {@link pv.Mark} for details on the
+ * prioritization of redundant positioning properties.
+ *
+ * <p>See also the <a href="../../api/Dot.html">Dot guide</a>.
+ *
+ * @extends pv.Mark
+ */
+pv.Dot = function() {
+  pv.Mark.call(this);
+};
+
+pv.Dot.prototype = pv.extend(pv.Mark)
+    .property("shape", String)
+    .property("shapeAngle", Number)
+    .property("shapeRadius", Number)
+    .property("shapeSize", Number)
+    .property("lineWidth", Number)
+    .property("strokeStyle", pv.color)
+    .property("fillStyle", pv.color);
+
+pv.Dot.prototype.type = "dot";
+
+/**
+ * The size of the shape, in square pixels. Square pixels are used such that the
+ * area of the shape is linearly proportional to the value of the
+ * <tt>shapeSize</tt> property, facilitating representative encodings. This is
+ * an alternative to using {@link #shapeRadius}.
+ *
+ * @see #shapeRadius
+ * @type number
+ * @name pv.Dot.prototype.shapeSize
+ */
+
+/**
+ * The radius of the shape, in pixels. This is an alternative to using
+ * {@link #shapeSize}.
+ *
+ * @see #shapeSize
+ * @type number
+ * @name pv.Dot.prototype.shapeRadius
+ */
+
+/**
+ * The shape name. Several shapes are supported:<ul>
+ *
+ * <li>cross
+ * <li>triangle
+ * <li>diamond
+ * <li>square
+ * <li>circle
+ * <li>tick
+ * <li>bar
+ *
+ * </ul>These shapes can be further changed using the {@link #angle} property;
+ * for instance, a cross can be turned into a plus by rotating. Similarly, the
+ * tick, which is vertical by default, can be rotated horizontally. Note that
+ * some shapes (cross and tick) do not have interior areas, and thus do not
+ * support fill style meaningfully.
+ *
+ * <p>Note: it may be more natural to use the {@link pv.Rule} mark for
+ * horizontal and vertical ticks. The tick shape is only necessary if angled
+ * ticks are needed.
+ *
+ * @type string
+ * @name pv.Dot.prototype.shape
+ */
+
+/**
+ * The shape rotation angle, in radians. Used to rotate shapes, such as to turn
+ * a cross into a plus.
+ *
+ * @type number
+ * @name pv.Dot.prototype.shapeAngle
+ */
+
+/**
+ * The width of stroked lines, in pixels; used in conjunction with
+ * <tt>strokeStyle</tt> to stroke the dot's shape.
+ *
+ * @type number
+ * @name pv.Dot.prototype.lineWidth
+ */
+
+/**
+ * The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
+ * stroke the dot's shape. The default value of this property is a categorical
+ * color.
+ *
+ * @type string
+ * @name pv.Dot.prototype.strokeStyle
+ * @see pv.color
+ */
+
+/**
+ * The fill style; if non-null, the interior of the dot is filled with the
+ * specified color. The default value of this property is null, meaning dots are
+ * not filled by default.
+ *
+ * @type string
+ * @name pv.Dot.prototype.fillStyle
+ * @see pv.color
+ */
+
+/**
+ * Default properties for dots. By default, there is no fill and the stroke
+ * style is a categorical color. The default shape is "circle" with radius 4.5.
+ *
+ * @type pv.Dot
+ */
+pv.Dot.prototype.defaults = new pv.Dot()
+    .extend(pv.Mark.prototype.defaults)
+    .shape("circle")
+    .lineWidth(1.5)
+    .strokeStyle(pv.Colors.category10().by(pv.parent));
+
+/**
+ * Constructs a new dot anchor with default properties. Dots support five
+ * different anchors:<ul>
+ *
+ * <li>top
+ * <li>left
+ * <li>center
+ * <li>bottom
+ * <li>right
+ *
+ * </ul>In addition to positioning properties (left, right, top bottom), the
+ * anchors support text rendering properties (text-align, text-baseline). Text is
+ * rendered to appear outside the dot. Note that this behavior is different from
+ * other mark anchors, which default to rendering text <i>inside</i> the mark.
+ *
+ * <p>For consistency with the other mark types, the anchor positions are
+ * defined in terms of their opposite edge. For example, the top anchor defines
+ * the bottom property, such that a bar added to the top anchor grows upward.
+ *
+ * @param {string} name the anchor name; either a string or a property function.
+ * @returns {pv.Anchor}
+ */
+pv.Dot.prototype.anchor = function(name) {
+  var scene;
+  return pv.Mark.prototype.anchor.call(this, name)
+    .left(function() {
+        var s = this.scene.target[this.index];
+        switch (this.name()) {
+          case "bottom":
+          case "top":
+          case "center": return s.left;
+          case "left": return null;
+        }
+        return s.left + s.shapeRadius;
+      })
+    .right(function() {
+        var s = this.scene.target[this.index];
+        return this.name() == "left" ? s.right + s.shapeRadius : null;
+      })
+    .top(function() {
+        var s = this.scene.target[this.index];
+        switch (this.name()) {
+          case "left":
+          case "right":
+          case "center": return s.top;
+          case "top": return null;
+        }
+        return s.top + s.shapeRadius;
+      })
+    .bottom(function() {
+        var s = this.scene.target[this.index];
+        return this.name() == "top" ? s.bottom + s.shapeRadius : null;
+      })
+    .textAlign(function() {
+        switch (this.name()) {
+          case "left": return "right";
+          case "bottom":
+          case "top":
+          case "center": return "center";
+        }
+        return "left";
+      })
+    .textBaseline(function() {
+        switch (this.name()) {
+          case "right":
+          case "left":
+          case "center": return "middle";
+          case "bottom": return "top";
+        }
+        return "bottom";
+      });
+};
+
+/** @private Sets radius based on size or vice versa. */
+pv.Dot.prototype.buildImplied = function(s) {
+  var r = s.shapeRadius, z = s.shapeSize;
+  if (r == null) {
+    if (z == null) {
+      s.shapeSize = 20.25;
+      s.shapeRadius = 4.5;
+    } else {
+      s.shapeRadius = Math.sqrt(z);
+    }
+  } else if (z == null) {
+    s.shapeSize = r * r;
+  }
+  pv.Mark.prototype.buildImplied.call(this, s);
+};