rubyvis 0.6.0 → 0.6.1

data/vendor/protovis/src/mark/Line.js

@@ -1,195 +0,0 @@
-/**
- * Constructs a new line mark with default properties. Lines are not typically
- * constructed directly, but by adding to a panel or an existing mark via
- * {@link pv.Mark#add}.
- *
- * @class Represents a series of connected line segments, or <i>polyline</i>,
- * that can be stroked with a configurable color and thickness. Each
- * articulation point in the line corresponds to a datum; for <i>n</i> points,
- * <i>n</i>-1 connected line segments are drawn. The point is positioned using
- * the box model. Arbitrary paths are also possible, allowing radar plots and
- * other custom visualizations.
- *
- * <p>Like areas, lines can be stroked and filled with arbitrary colors. In most
- * cases, lines are only stroked, but the fill style can be used to construct
- * arbitrary polygons.
- *
- * <p>See also the <a href="../../api/Line.html">Line guide</a>.
- *
- * @extends pv.Mark
- */
-pv.Line = function() {
-  pv.Mark.call(this);
-};
-
-pv.Line.prototype = pv.extend(pv.Mark)
-    .property("lineWidth", Number)
-    .property("lineJoin", String)
-    .property("strokeStyle", pv.color)
-    .property("fillStyle", pv.color)
-    .property("segmented", Boolean)
-    .property("interpolate", String)
-    .property("eccentricity", Number)
-    .property("tension", Number);
-
-pv.Line.prototype.type = "line";
-
-/**
- * The width of stroked lines, in pixels; used in conjunction with
- * <tt>strokeStyle</tt> to stroke the line.
- *
- * @type number
- * @name pv.Line.prototype.lineWidth
- */
-
-/**
- * The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
- * stroke the line. The default value of this property is a categorical color.
- *
- * @type string
- * @name pv.Line.prototype.strokeStyle
- * @see pv.color
- */
-
-/**
- * The type of corners where two lines meet. Accepted values are "bevel",
- * "round" and "miter". The default value is "miter".
- *
- * <p>For segmented lines, only "miter" joins and "linear" interpolation are
- * currently supported. Any other value, including null, will disable joins,
- * producing disjoint line segments. Note that the miter joins must be computed
- * manually (at least in the current SVG renderer); since this calculation may
- * be expensive and unnecessary for small lines, specifying null can improve
- * performance significantly.
- *
- * <p>This property is <i>fixed</i>. See {@link pv.Mark}.
- *
- * @type string
- * @name pv.Line.prototype.lineJoin
- */
-
-/**
- * The line fill style; if non-null, the interior of the line is closed and
- * filled with the specified color. The default value of this property is a
- * null, meaning that lines are not filled by default.
- *
- * <p>This property is <i>fixed</i>. See {@link pv.Mark}.
- *
- * @type string
- * @name pv.Line.prototype.fillStyle
- * @see pv.color
- */
-
-/**
- * Whether the line is segmented; whether variations in stroke style, line width
- * and the other properties are treated as fixed. Rendering segmented lines is
- * noticeably slower than non-segmented lines.
- *
- * <p>This property is <i>fixed</i>. See {@link pv.Mark}.
- *
- * @type boolean
- * @name pv.Line.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 a clockwise circular arc between points, specify "polar";
- * to draw a counterclockwise circular arc between points, specify
- * "polar-reverse". 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.Line.prototype.interpolate
- */
-
-/**
- * The eccentricity of polar line segments; used in conjunction with
- * interpolate("polar"). The default value of 0 means that line segments are
- * drawn as circular arcs. A value of 1 draws a straight line. A value between 0
- * and 1 draws an elliptical arc with the given eccentricity.
- *
- * @type number
- * @name pv.Line.prototype.eccentricity
- */
-
-/**
- * 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.Line.prototype.tension
- */
-
-/**
- * Default properties for lines. By default, there is no fill and the stroke
- * style is a categorical color. The default interpolation is linear.
- *
- * @type pv.Line
- */
-pv.Line.prototype.defaults = new pv.Line()
-    .extend(pv.Mark.prototype.defaults)
-    .lineJoin("miter")
-    .lineWidth(1.5)
-    .strokeStyle(pv.Colors.category10().by(pv.parent))
-    .interpolate("linear")
-    .eccentricity(0)
-    .tension(.7);
-
-/** @private Reuse Area's implementation for segmented bind & build. */
-pv.Line.prototype.bind = pv.Area.prototype.bind;
-pv.Line.prototype.buildInstance = pv.Area.prototype.buildInstance;
-
-/**
- * Constructs a new line anchor with default properties. Lines 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 line. 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.Line.prototype.anchor = function(name) {
-  return pv.Area.prototype.anchor.call(this, name)
-    .textAlign(function(d) {
-        switch (this.name()) {
-          case "left": return "right";
-          case "bottom":
-          case "top":
-          case "center": return "center";
-          case "right": return "left";
-        }
-      })
-    .textBaseline(function(d) {
-        switch (this.name()) {
-          case "right":
-          case "left":
-          case "center": return "middle";
-          case "top": return "bottom";
-          case "bottom": return "top";
-        }
-      });
-};

data/vendor/protovis/src/mark/Mark.js

@@ -1,1237 +0,0 @@
-/**
- * Constructs a new mark with default properties. Marks, with the exception of
- * the root panel, are not typically constructed directly; instead, they are
- * added to a panel or an existing mark via {@link pv.Mark#add}.
- *
- * @class Represents a data-driven graphical mark. The <tt>Mark</tt> class is
- * the base class for all graphical marks in Protovis; it does not provide any
- * specific rendering functionality, but together with {@link Panel} establishes
- * the core framework.
- *
- * <p>Concrete mark types include familiar visual elements such as bars, lines
- * and labels. Although a bar mark may be used to construct a bar chart, marks
- * know nothing about charts; it is only through their specification and
- * composition that charts are produced. These building blocks permit many
- * combinatorial possibilities.
- *
- * <p>Marks are associated with <b>data</b>: a mark is generated once per
- * associated datum, mapping the datum to visual <b>properties</b> such as
- * position and color. Thus, a single mark specification represents a set of
- * visual elements that share the same data and visual encoding. The type of
- * mark defines the names of properties and their meaning. A property may be
- * static, ignoring the associated datum and returning a constant; or, it may be
- * dynamic, derived from the associated datum or index. Such dynamic encodings
- * can be specified succinctly using anonymous functions. Special properties
- * called event handlers can be registered to add interactivity.
- *
- * <p>Protovis uses <b>inheritance</b> to simplify the specification of related
- * marks: a new mark can be derived from an existing mark, inheriting its
- * properties. The new mark can then override properties to specify new
- * behavior, potentially in terms of the old behavior. In this way, the old mark
- * serves as the <b>prototype</b> for the new mark. Most mark types share the
- * same basic properties for consistency and to facilitate inheritance.
- *
- * <p>The prioritization of redundant properties is as follows:<ol>
- *
- * <li>If the <tt>width</tt> property is not specified (i.e., null), its value
- * is the width of the parent panel, minus this mark's left and right margins;
- * the left and right margins are zero if not specified.
- *
- * <li>Otherwise, if the <tt>right</tt> margin is not specified, its value is
- * the width of the parent panel, minus this mark's width and left margin; the
- * left margin is zero if not specified.
- *
- * <li>Otherwise, if the <tt>left</tt> property is not specified, its value is
- * the width of the parent panel, minus this mark's width and the right margin.
- *
- * </ol>This prioritization is then duplicated for the <tt>height</tt>,
- * <tt>bottom</tt> and <tt>top</tt> properties, respectively.
- *
- * <p>While most properties are <i>variable</i>, some mark types, such as lines
- * and areas, generate a single visual element rather than a distinct visual
- * element per datum. With these marks, some properties may be <b>fixed</b>.
- * Fixed properties can vary per mark, but not <i>per datum</i>! These
- * properties are evaluated solely for the first (0-index) datum, and typically
- * are specified as a constant. However, it is valid to use a function if the
- * property varies between panels or is dynamically generated.
- *
- * <p>See also the <a href="../../api/">Protovis guide</a>.
- */
-pv.Mark = function() {
-  /*
-   * TYPE 0 constant defs
-   * TYPE 1 function defs
-   * TYPE 2 constant properties
-   * TYPE 3 function properties
-   * in order of evaluation!
-   */
-  this.$properties = [];
-  this.$handlers = {};
-};
-
-/** @private Records which properties are defined on this mark type. */
-pv.Mark.prototype.properties = {};
-
-/** @private Records the cast function for each property. */
-pv.Mark.cast = {};
-
-/**
- * @private Defines and registers a property method for the property with the
- * given name.  This method should be called on a mark class prototype to define
- * each exposed property. (Note this refers to the JavaScript
- * <tt>prototype</tt>, not the Protovis mark prototype, which is the {@link
- * #proto} field.)
- *
- * <p>The created property method supports several modes of invocation: <ol>
- *
- * <li>If invoked with a <tt>Function</tt> argument, this function is evaluated
- * for each associated datum. The return value of the function is used as the
- * computed property value. The context of the function (<tt>this</tt>) is this
- * mark. The arguments to the function are the associated data of this mark and
- * any enclosing panels. For example, a linear encoding of numerical data to
- * height is specified as
- *
- * <pre>m.height(function(d) d * 100);</pre>
- *
- * The expression <tt>d * 100</tt> will be evaluated for the height property of
- * each mark instance. The return value of the property method (e.g.,
- * <tt>m.height</tt>) is this mark (<tt>m</tt>)).<p>
- *
- * <li>If invoked with a non-function argument, the property is treated as a
- * constant. The return value of the property method (e.g., <tt>m.height</tt>)
- * is this mark.<p>
- *
- * <li>If invoked with no arguments, the computed property value for the current
- * mark instance in the scene graph is returned. This facilitates <i>property
- * chaining</i>, where one mark's properties are defined in terms of another's.
- * For example, to offset a mark's location from its prototype, you might say
- *
- * <pre>m.top(function() this.proto.top() + 10);</pre>
- *
- * Note that the index of the mark being evaluated (in the above example,
- * <tt>this.proto</tt>) is inherited from the <tt>Mark</tt> class and set by
- * this mark. So, if the fifth element's top property is being evaluated, the
- * fifth instance of <tt>this.proto</tt> will similarly be queried for the value
- * of its top property. If the mark being evaluated has a different number of
- * instances, or its data is unrelated, the behavior of this method is
- * undefined. In these cases it may be better to index the <tt>scene</tt>
- * explicitly to specify the exact instance.
- *
- * </ol><p>Property names should follow standard JavaScript method naming
- * conventions, using lowerCamel-style capitalization.
- *
- * <p>In addition to creating the property method, every property is registered
- * in the {@link #properties} map on the <tt>prototype</tt>. Although this is an
- * instance field, it is considered immutable and shared by all instances of a
- * given mark type. The <tt>properties</tt> map can be queried to see if a mark
- * type defines a particular property, such as width or height.
- *
- * @param {string} name the property name.
- * @param {function} [cast] the cast function for this property.
- */
-pv.Mark.prototype.property = function(name, cast) {
-  if (!this.hasOwnProperty("properties")) {
-    this.properties = pv.extend(this.properties);
-  }
-  this.properties[name] = true;
-
-  /*
-   * Define the setter-getter globally, since the default behavior should be the
-   * same for all properties, and since the Protovis inheritance chain is
-   * independent of the JavaScript inheritance chain. For example, anchors
-   * define a "name" property that is evaluated on derived marks, even though
-   * those marks don't normally have a name.
-   */
-  pv.Mark.prototype.propertyMethod(name, false, pv.Mark.cast[name] = cast);
-  return this;
-};
-
-/**
- * @private Defines a setter-getter for the specified property.
- *
- * <p>If a cast function has been assigned to the specified property name, the
- * property function is wrapped by the cast function, or, if a constant is
- * specified, the constant is immediately cast. Note, however, that if the
- * property value is null, the cast function is not invoked.
- *
- * @param {string} name the property name.
- * @param {boolean} [def] whether is a property or a def.
- * @param {function} [cast] the cast function for this property.
- */
-pv.Mark.prototype.propertyMethod = function(name, def, cast) {
-  if (!cast) cast = pv.Mark.cast[name];
-  this[name] = function(v) {
-
-      /* If this is a def, use it rather than property. */
-      if (def && this.scene) {
-        var defs = this.scene.defs;
-        if (arguments.length) {
-          defs[name] = {
-            id: (v == null) ? 0 : pv.id(),
-            value: ((v != null) && cast) ? cast(v) : v
-          };
-          return this;
-        }
-        return defs[name] ? defs[name].value : null;
-      }
-
-      /* If arguments are specified, set the property value. */
-      if (arguments.length) {
-        var type = !def << 1 | (typeof v == "function");
-        this.propertyValue(name, (type & 1 && cast) ? function() {
-            var x = v.apply(this, arguments);
-            return (x != null) ? cast(x) : null;
-          } : (((v != null) && cast) ? cast(v) : v)).type = type;
-        return this;
-      }
-
-      return this.instance()[name];
-    };
-};
-
-/** @private Sets the value of the property <i>name</i> to <i>v</i>. */
-pv.Mark.prototype.propertyValue = function(name, v) {
-  var properties = this.$properties, p = {name: name, id: pv.id(), value: v};
-  for (var i = 0; i < properties.length; i++) {
-    if (properties[i].name == name) {
-      properties.splice(i, 1);
-      break;
-    }
-  }
-  properties.push(p);
-  return p;
-};
-
-/* Define all global properties. */
-pv.Mark.prototype
-    .property("data")
-    .property("visible", Boolean)
-    .property("left", Number)
-    .property("right", Number)
-    .property("top", Number)
-    .property("bottom", Number)
-    .property("cursor", String)
-    .property("title", String)
-    .property("reverse", Boolean)
-    .property("antialias", Boolean)
-    .property("events", String)
-    .property("id", String);
-
-/**
- * The mark type; a lower camelCase name. The type name controls rendering
- * behavior, and unless the rendering engine is extended, must be one of the
- * built-in concrete mark types: area, bar, dot, image, label, line, panel,
- * rule, or wedge.
- *
- * @type string
- * @name pv.Mark.prototype.type
- */
-
-/**
- * The mark prototype, possibly undefined, from which to inherit property
- * functions. The mark prototype is not necessarily of the same type as this
- * mark. Any properties defined on this mark will override properties inherited
- * either from the prototype or from the type-specific defaults.
- *
- * @type pv.Mark
- * @name pv.Mark.prototype.proto
- */
-
-/**
- * The mark anchor target, possibly undefined.
- *
- * @type pv.Mark
- * @name pv.Mark.prototype.target
- */
-
-/**
- * The enclosing parent panel. The parent panel is generally undefined only for
- * the root panel; however, it is possible to create "offscreen" marks that are
- * used only for inheritance purposes.
- *
- * @type pv.Panel
- * @name pv.Mark.prototype.parent
- */
-
-/**
- * The child index. -1 if the enclosing parent panel is null; otherwise, the
- * zero-based index of this mark into the parent panel's <tt>children</tt> array.
- *
- * @type number
- */
-pv.Mark.prototype.childIndex = -1;
-
-/**
- * The mark index. The value of this field depends on which instance (i.e.,
- * which element of the data array) is currently being evaluated. During the
- * build phase, the index is incremented over each datum; when handling events,
- * the index is set to the instance that triggered the event.
- *
- * @type number
- */
-pv.Mark.prototype.index = -1;
-
-/**
- * The current scale factor, based on any enclosing transforms. The current
- * scale can be used to create scale-independent graphics. For example, to
- * define a dot that has a radius of 10 irrespective of any zooming, say:
- *
- * <pre>dot.shapeRadius(function() 10 / this.scale)</pre>
- *
- * Note that the stroke width and font size are defined irrespective of scale
- * (i.e., in screen space) already. Also note that when a transform is applied
- * to a panel, the scale affects only the child marks, not the panel itself.
- *
- * @type number
- * @see pv.Panel#transform
- */
-pv.Mark.prototype.scale = 1;
-
-/**
- * @private The scene graph. The scene graph is an array of objects; each object
- * (or "node") corresponds to an instance of this mark and an element in the
- * data array. The scene graph can be traversed to lookup previously-evaluated
- * properties.
- *
- * @name pv.Mark.prototype.scene
- */
-
-/**
- * The root parent panel. This may be undefined for "offscreen" marks that are
- * created for inheritance purposes only.
- *
- * @type pv.Panel
- * @name pv.Mark.prototype.root
- */
-
-/**
- * The data property; an array of objects. The size of the array determines the
- * number of marks that will be instantiated; each element in the array will be
- * passed to property functions to compute the property values. Typically, the
- * data property is specified as a constant array, such as
- *
- * <pre>m.data([1, 2, 3, 4, 5]);</pre>
- *
- * However, it is perfectly acceptable to define the data property as a
- * function. This function might compute the data dynamically, allowing
- * different data to be used per enclosing panel. For instance, in the stacked
- * area graph example (see {@link #scene}), the data function on the area mark
- * dereferences each series.
- *
- * @type array
- * @name pv.Mark.prototype.data
- */
-
-/**
- * The visible property; a boolean determining whether or not the mark instance
- * is visible. If a mark instance is not visible, its other properties will not
- * be evaluated. Similarly, for panels no child marks will be rendered.
- *
- * @type boolean
- * @name pv.Mark.prototype.visible
- */
-
-/**
- * The left margin; the distance, in pixels, between the left edge of the
- * enclosing panel and the left edge of this mark. Note that in some cases this
- * property may be redundant with the right property, or with the conjunction of
- * right and width.
- *
- * @type number
- * @name pv.Mark.prototype.left
- */
-
-/**
- * The right margin; the distance, in pixels, between the right edge of the
- * enclosing panel and the right edge of this mark. Note that in some cases this
- * property may be redundant with the left property, or with the conjunction of
- * left and width.
- *
- * @type number
- * @name pv.Mark.prototype.right
- */
-
-/**
- * The top margin; the distance, in pixels, between the top edge of the
- * enclosing panel and the top edge of this mark. Note that in some cases this
- * property may be redundant with the bottom property, or with the conjunction
- * of bottom and height.
- *
- * @type number
- * @name pv.Mark.prototype.top
- */
-
-/**
- * The bottom margin; the distance, in pixels, between the bottom edge of the
- * enclosing panel and the bottom edge of this mark. Note that in some cases
- * this property may be redundant with the top property, or with the conjunction
- * of top and height.
- *
- * @type number
- * @name pv.Mark.prototype.bottom
- */
-
-/**
- * The cursor property; corresponds to the CSS cursor property. This is
- * typically used in conjunction with event handlers to indicate interactivity.
- *
- * @type string
- * @name pv.Mark.prototype.cursor
- * @see <a href="http://www.w3.org/TR/CSS2/ui.html#propdef-cursor">CSS2 cursor</a>
- */
-
-/**
- * The title property; corresponds to the HTML/SVG title property, allowing the
- * general of simple plain text tooltips.
- *
- * @type string
- * @name pv.Mark.prototype.title
- */
-
-/**
- * The events property; corresponds to the SVG pointer-events property,
- * specifying how the mark should participate in mouse events. The default value
- * is "painted". Supported values are:
- *
- * <p>"painted": The given mark may receive events when the mouse is over a
- * "painted" area. The painted areas are the interior (i.e., fill) of the mark
- * if a 'fillStyle' is specified, and the perimeter (i.e., stroke) of the mark
- * if a 'strokeStyle' is specified.
- *
- * <p>"all": The given mark may receive events when the mouse is over either the
- * interior (i.e., fill) or the perimeter (i.e., stroke) of the mark, regardless
- * of the specified fillStyle and strokeStyle.
- *
- * <p>"none": The given mark may not receive events.
- *
- * @type string
- * @name pv.Mark.prototype.events
- */
-
-/**
- * The reverse property; a boolean determining whether marks are ordered from
- * front-to-back or back-to-front. SVG does not support explicit z-ordering;
- * shapes are rendered in the order they appear. Thus, by default, marks are
- * rendered in data order. Setting the reverse property to false reverses the
- * order in which they are rendered; however, the properties are still evaluated
- * (i.e., built) in forward order.
- *
- * @type boolean
- * @name pv.Mark.prototype.reverse
- */
-
-/**
- * The instance identifier, for correspondence across animated transitions. If
- * no identifier is specified, correspondence is determined using the mark
- * index. Identifiers are not global, but local to a given mark.
- *
- * @type String
- * @name pv.Mark.prototype.id
- */
-
-/**
- * Default properties for all mark types. By default, the data array is the
- * parent data as a single-element array; if the data property is not specified,
- * this causes each mark to be instantiated as a singleton with the parents
- * datum. The visible property is true by default, and the reverse property is
- * false.
- *
- * @type pv.Mark
- */
-pv.Mark.prototype.defaults = new pv.Mark()
-    .data(function(d) { return [d]; })
-    .visible(true)
-    .antialias(true)
-    .events("painted");
-
-/**
- * Sets the prototype of this mark 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.)
- *
- * @param {pv.Mark} proto the new prototype.
- * @returns {pv.Mark} this mark.
- * @see #add
- */
-pv.Mark.prototype.extend = function(proto) {
-  this.proto = proto;
-  this.target = proto.target;
-  return this;
-};
-
-/**
- * Adds a new mark of the specified type to the enclosing parent panel, whilst
- * simultaneously setting the prototype of the new mark to be this mark.
- *
- * @param {function} type the type of mark to add; a constructor, such as
- * <tt>pv.Bar</tt>.
- * @returns {pv.Mark} the new mark.
- * @see #extend
- */
-pv.Mark.prototype.add = function(type) {
-  return this.parent.add(type).extend(this);
-};
-
-/**
- * Defines a custom property on this mark. Custom properties are currently
- * fixed, in that they are initialized once per mark set (i.e., per parent panel
- * instance). Custom properties can be used to store local state for the mark,
- * such as data needed by other properties (e.g., a custom scale) or interaction
- * state.
- *
- * <p>WARNING We plan on changing this feature in a future release to define
- * standard properties, as opposed to <i>fixed</i> properties that behave
- * idiosyncratically within event handlers. Furthermore, we recommend storing
- * state in an external data structure, rather than tying it to the
- * visualization specification as with defs.
- *
- * @param {string} name the name of the local variable.
- * @param {function} [v] an optional initializer; may be a constant or a
- * function.
- */
-pv.Mark.prototype.def = function(name, v) {
-  this.propertyMethod(name, true);
-  return this[name](arguments.length > 1 ? v : null);
-};
-
-/**
- * Returns an anchor with the specified name. All marks support the five
- * standard anchor names:<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 mark by default.
- *
- * <p>To facilitate stacking, anchors are defined in terms of their opposite
- * edge. For example, the top anchor defines the bottom property, such that the
- * mark extends upwards; the bottom anchor instead defines the top property,
- * such that the mark extends downwards. See also {@link pv.Layout.Stack}.
- *
- * <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. See the {@link pv.Anchor#name} property for details.
- *
- * @param {string} name the anchor name; either a string or a property function.
- * @returns {pv.Anchor} the new anchor.
- */
-pv.Mark.prototype.anchor = function(name) {
-  if (!name) name = "center"; // default anchor name
-  return new pv.Anchor(this)
-    .name(name)
-    .data(function() {
-        return this.scene.target.map(function(s) { return s.data; });
-      })
-    .visible(function() {
-        return this.scene.target[this.index].visible;
-      })
-    .id(function() {
-        return this.scene.target[this.index].id;
-      })
-    .left(function() {
-        var s = this.scene.target[this.index], w = s.width || 0;
-        switch (this.name()) {
-          case "bottom":
-          case "top":
-          case "center": return s.left + w / 2;
-          case "left": return null;
-        }
-        return s.left + w;
-      })
-    .top(function() {
-        var s = this.scene.target[this.index], h = s.height || 0;
-        switch (this.name()) {
-          case "left":
-          case "right":
-          case "center": return s.top + h / 2;
-          case "top": return null;
-        }
-        return s.top + h;
-      })
-    .right(function() {
-        var s = this.scene.target[this.index];
-        return this.name() == "left" ? s.right + (s.width || 0) : null;
-      })
-    .bottom(function() {
-        var s = this.scene.target[this.index];
-        return this.name() == "top" ? s.bottom + (s.height || 0) : null;
-      })
-    .textAlign(function() {
-        switch (this.name()) {
-          case "bottom":
-          case "top":
-          case "center": return "center";
-          case "right": return "right";
-        }
-        return "left";
-      })
-    .textBaseline(function() {
-        switch (this.name()) {
-          case "right":
-          case "left":
-          case "center": return "middle";
-          case "top": return "top";
-        }
-        return "bottom";
-      });
-};
-
-/** @deprecated Replaced by {@link #target}. */
-pv.Mark.prototype.anchorTarget = function() {
-  return this.target;
-};
-
-/**
- * Alias for setting the left, right, top and bottom properties simultaneously.
- *
- * @see #left
- * @see #right
- * @see #top
- * @see #bottom
- * @returns {pv.Mark} this.
- */
-pv.Mark.prototype.margin = function(n) {
-  return this.left(n).right(n).top(n).bottom(n);
-};
-
-/**
- * @private Returns the current instance of this mark in the scene graph. This
- * is typically equivalent to <tt>this.scene[this.index]</tt>, however if the
- * scene or index is unset, the default instance of the mark is returned. If no
- * default is set, the default is the last instance. Similarly, if the scene or
- * index of the parent panel is unset, the default instance of this mark in the
- * last instance of the enclosing panel is returned, and so on.
- *
- * @returns a node in the scene graph.
- */
-pv.Mark.prototype.instance = function(defaultIndex) {
-  var scene = this.scene || this.parent.instance(-1).children[this.childIndex],
-      index = !arguments.length || this.hasOwnProperty("index") ? this.index : defaultIndex;
-  return scene[index < 0 ? scene.length - 1 : index];
-};
-
-/**
- * @private Find the instances of this mark that match source.
- *
- * @see pv.Anchor
- */
-pv.Mark.prototype.instances = function(source) {
-  var mark = this, index = [], scene;
-
-  /* Mirrored descent. */
-  while (!(scene = mark.scene)) {
-    source = source.parent;
-    index.push({index: source.index, childIndex: mark.childIndex});
-    mark = mark.parent;
-  }
-  while (index.length) {
-    var i = index.pop();
-    scene = scene[i.index].children[i.childIndex];
-  }
-
-  /*
-   * When the anchor target is also an ancestor, as in the case of adding
-   * to a panel anchor, only generate one instance per panel. Also, set
-   * the margins to zero, since they are offset by the enclosing panel.
-   */
-  if (this.hasOwnProperty("index")) {
-    var s = pv.extend(scene[this.index]);
-    s.right = s.top = s.left = s.bottom = 0;
-    return [s];
-  }
-  return scene;
-};
-
-/**
- * @private Returns the first instance of this mark in the scene graph. This
- * method can only be called when the mark is bound to the scene graph (for
- * example, from an event handler, or within a property function).
- *
- * @returns a node in the scene graph.
- */
-pv.Mark.prototype.first = function() {
-  return this.scene[0];
-};
-
-/**
- * @private Returns the last instance of this mark in the scene graph. This
- * method can only be called when the mark is bound to the scene graph (for
- * example, from an event handler, or within a property function). In addition,
- * note that mark instances are built sequentially, so the last instance of this
- * mark may not yet be constructed.
- *
- * @returns a node in the scene graph.
- */
-pv.Mark.prototype.last = function() {
-  return this.scene[this.scene.length - 1];
-};
-
-/**
- * @private Returns the previous instance of this mark in the scene graph, or
- * null if this is the first instance.
- *
- * @returns a node in the scene graph, or null.
- */
-pv.Mark.prototype.sibling = function() {
-  return (this.index == 0) ? null : this.scene[this.index - 1];
-};
-
-/**
- * @private Returns the current instance in the scene graph of this mark, in the
- * previous instance of the enclosing parent panel. May return null if this
- * instance could not be found.
- *
- * @returns a node in the scene graph, or null.
- */
-pv.Mark.prototype.cousin = function() {
-  var p = this.parent, s = p && p.sibling();
-  return (s && s.children) ? s.children[this.childIndex][this.index] : null;
-};
-
-/**
- * Renders this mark, including recursively rendering all child marks if this is
- * a panel. This method finds all instances of this mark and renders them. This
- * method descends recursively to the level of the mark to be rendered, finding
- * all visible instances of the mark. After the marks are rendered, the scene
- * and index attributes are removed from the mark to restore them to a clean
- * state.
- *
- * <p>If an enclosing panel has an index property set (as is the case inside in
- * an event handler), then only instances of this mark inside the given instance
- * of the panel will be rendered; otherwise, all visible instances of the mark
- * will be rendered.
- */
-pv.Mark.prototype.render = function() {
-  var parent = this.parent,
-      stack = pv.Mark.stack;
-
-  /* For the first render, take it from the top. */
-  if (parent && !this.root.scene) {
-    this.root.render();
-    return;
-  }
-
-  /* Record the path to this mark. */
-  var indexes = [];
-  for (var mark = this; mark.parent; mark = mark.parent) {
-    indexes.unshift(mark.childIndex);
-  }
-
-  /** @private */
-  function render(mark, depth, scale) {
-    mark.scale = scale;
-    if (depth < indexes.length) {
-      stack.unshift(null);
-      if (mark.hasOwnProperty("index")) {
-        renderInstance(mark, depth, scale);
-      } else {
-        for (var i = 0, n = mark.scene.length; i < n; i++) {
-          mark.index = i;
-          renderInstance(mark, depth, scale);
-        }
-        delete mark.index;
-      }
-      stack.shift();
-    } else {
-      mark.build();
-
-      /*
-       * In the update phase, the scene is rendered by creating and updating
-       * elements and attributes in the SVG image. No properties are evaluated
-       * during the update phase; instead the values computed previously in the
-       * build phase are simply translated into SVG. The update phase is
-       * decoupled (see pv.Scene) to allow different rendering engines.
-       */
-      pv.Scene.scale = scale;
-      pv.Scene.updateAll(mark.scene);
-    }
-    delete mark.scale;
-  }
-
-  /**
-   * @private Recursively renders the current instance of the specified mark.
-   * This is slightly tricky because `index` and `scene` properties may or may
-   * not already be set; if they are set, it means we are rendering only a
-   * specific instance; if they are unset, we are rendering all instances.
-   * Furthermore, we must preserve the original context of these properties when
-   * rendering completes.
-   *
-   * <p>Another tricky aspect is that the `scene` attribute should be set for
-   * any preceding children, so as to allow property chaining. This is
-   * consistent with first-pass rendering.
-   */
-  function renderInstance(mark, depth, scale) {
-    var s = mark.scene[mark.index], i;
-    if (s.visible) {
-      var childIndex = indexes[depth],
-          child = mark.children[childIndex];
-
-      /* Set preceding child scenes. */
-      for (i = 0; i < childIndex; i++) {
-        mark.children[i].scene = s.children[i];
-      }
-
-      /* Set current child scene, if necessary. */
-      stack[0] = s.data;
-      if (child.scene) {
-        render(child, depth + 1, scale * s.transform.k);
-      } else {
-        child.scene = s.children[childIndex];
-        render(child, depth + 1, scale * s.transform.k);
-        delete child.scene;
-      }
-
-      /* Clear preceding child scenes. */
-      for (i = 0; i < childIndex; i++) {
-        delete mark.children[i].scene;
-      }
-    }
-  }
-
-  /* Bind this mark's property definitions. */
-  this.bind();
-
-  /* The render context is the first ancestor with an explicit index. */
-  while (parent && !parent.hasOwnProperty("index")) parent = parent.parent;
-
-  /* Recursively render all instances of this mark. */
-  this.context(
-      parent ? parent.scene : undefined,
-      parent ? parent.index : -1,
-      function() { render(this.root, 0, 1); });
-};
-
-/** @private Stores the current data stack. */
-pv.Mark.stack = [];
-
-/**
- * @private In the bind phase, inherited property definitions are cached so they
- * do not need to be queried during build.
- */
-pv.Mark.prototype.bind = function() {
-  var seen = {}, types = [[], [], [], []], data, required = [];
-
-  /** Scans the proto chain for the specified mark. */
-  function bind(mark) {
-    do {
-      var properties = mark.$properties;
-      for (var i = properties.length - 1; i >= 0 ; i--) {
-        var p = properties[i];
-        if (!(p.name in seen)) {
-          seen[p.name] = p;
-          switch (p.name) {
-            case "data": data = p; break;
-            case "visible": case "id": required.push(p); break;
-            default: types[p.type].push(p); break;
-          }
-        }
-      }
-    } while (mark = mark.proto);
-  }
-
-  /* Scan the proto chain for all defined properties. */
-  bind(this);
-  bind(this.defaults);
-  types[1].reverse();
-  types[3].reverse();
-
-  /* Any undefined properties are null. */
-  var mark = this;
-  do for (var name in mark.properties) {
-    if (!(name in seen)) {
-      types[2].push(seen[name] = {name: name, type: 2, value: null});
-    }
-  } while (mark = mark.proto);
-
-  /* Define setter-getter for inherited defs. */
-  var defs = types[0].concat(types[1]);
-  for (var i = 0; i < defs.length; i++) {
-    this.propertyMethod(defs[i].name, true);
-  }
-
-  /* Setup binds to evaluate constants before functions. */
-  this.binds = {
-    properties: seen,
-    data: data,
-    defs: defs,
-    required: required,
-    optional: pv.blend(types)
-  };
-};
-
-/**
- * @private Evaluates properties and computes implied properties. Properties are
- * stored in the {@link #scene} array for each instance of this mark.
- *
- * <p>As marks are built recursively, the {@link #index} property is updated to
- * match the current index into the data array for each mark. Note that the
- * index property is only set for the mark currently being built and its
- * enclosing parent panels. The index property for other marks is unset, but is
- * inherited from the global <tt>Mark</tt> class prototype. This allows mark
- * properties to refer to properties on other marks <i>in the same panel</i>
- * conveniently; however, in general it is better to reference mark instances
- * specifically through the scene graph rather than depending on the magical
- * behavior of {@link #index}.
- *
- * <p>The root scene array has a special property, <tt>data</tt>, which stores
- * the current data stack. The first element in this stack is the current datum,
- * followed by the datum of the enclosing parent panel, and so on. The data
- * stack should not be accessed directly; instead, property functions are passed
- * the current data stack as arguments.
- *
- * <p>The evaluation of the <tt>data</tt> and <tt>visible</tt> properties is
- * special. The <tt>data</tt> property is evaluated first; unlike the other
- * properties, the data stack is from the parent panel, rather than the current
- * mark, since the data is not defined until the data property is evaluated.
- * The <tt>visible</tt> property is subsequently evaluated for each instance;
- * only if true will the {@link #buildInstance} method be called, evaluating
- * other properties and recursively building the scene graph.
- *
- * <p>If this mark is being re-built, any old instances of this mark that no
- * longer exist (because the new data array contains fewer elements) will be
- * cleared using {@link #clearInstance}.
- *
- * @param parent the instance of the parent panel from the scene graph.
- */
-pv.Mark.prototype.build = function() {
-  var scene = this.scene, stack = pv.Mark.stack;
-  if (!scene) {
-    scene = this.scene = [];
-    scene.mark = this;
-    scene.type = this.type;
-    scene.childIndex = this.childIndex;
-    if (this.parent) {
-      scene.parent = this.parent.scene;
-      scene.parentIndex = this.parent.index;
-    }
-  }
-
-  /* Resolve anchor target. */
-  if (this.target) scene.target = this.target.instances(scene);
-
-  /* Evaluate defs. */
-  if (this.binds.defs.length) {
-    var defs = scene.defs;
-    if (!defs) scene.defs = defs = {};
-    for (var i = 0; i < this.binds.defs.length; i++) {
-      var p = this.binds.defs[i], d = defs[p.name];
-      if (!d || (p.id > d.id)) {
-        defs[p.name] = {
-          id: 0, // this def will be re-evaluated on next build
-          value: (p.type & 1) ? p.value.apply(this, stack) : p.value
-        };
-      }
-    }
-  }
-
-  /* Evaluate special data property. */
-  var data = this.binds.data;
-  data = data.type & 1 ? data.value.apply(this, stack) : data.value;
-
-  /* Create, update and delete scene nodes. */
-  stack.unshift(null);
-  scene.length = data.length;
-  for (var i = 0; i < data.length; i++) {
-    pv.Mark.prototype.index = this.index = i;
-    var s = scene[i];
-    if (!s) scene[i] = s = {};
-    s.data = stack[0] = data[i];
-    this.buildInstance(s);
-  }
-  pv.Mark.prototype.index = -1;
-  delete this.index;
-  stack.shift();
-
-  return this;
-};
-
-/**
- * @private Evaluates the specified array of properties for the specified
- * instance <tt>s</tt> in the scene graph.
- *
- * @param s a node in the scene graph; the instance of the mark to build.
- * @param properties an array of properties.
- */
-pv.Mark.prototype.buildProperties = function(s, properties) {
-  for (var i = 0, n = properties.length; i < n; i++) {
-    var p = properties[i], v = p.value; // assume case 2 (constant)
-    switch (p.type) {
-      case 0:
-      case 1: v = this.scene.defs[p.name].value; break;
-      case 3: v = v.apply(this, pv.Mark.stack); break;
-    }
-    s[p.name] = v;
-  }
-};
-
-/**
- * @private Evaluates all of the properties for this mark for the specified
- * instance <tt>s</tt> in the scene graph. The set of properties to evaluate is
- * retrieved from the {@link #properties} array for this mark type (see {@link
- * #type}).  After these properties are evaluated, any <b>implied</b> properties
- * may be computed by the mark and set on the scene graph; see
- * {@link #buildImplied}.
- *
- * <p>For panels, this method recursively builds the scene graph for all child
- * marks as well. In general, this method should not need to be overridden by
- * concrete mark types.
- *
- * @param s a node in the scene graph; the instance of the mark to build.
- */
-pv.Mark.prototype.buildInstance = function(s) {
-  this.buildProperties(s, this.binds.required);
-  if (s.visible) {
-    this.buildProperties(s, this.binds.optional);
-    this.buildImplied(s);
-  }
-};
-
-/**
- * @private Computes the implied properties for this mark for the specified
- * instance <tt>s</tt> in the scene graph. Implied properties are those with
- * dependencies on multiple other properties; for example, the width property
- * may be implied if the left and right properties are set. This method can be
- * overridden by concrete mark types to define new implied properties, if
- * necessary.
- *
- * @param s a node in the scene graph; the instance of the mark to build.
- */
-pv.Mark.prototype.buildImplied = function(s) {
-  var l = s.left;
-  var r = s.right;
-  var t = s.top;
-  var b = s.bottom;
-
-  /* Assume width and height are zero if not supported by this mark type. */
-  var p = this.properties;
-  var w = p.width ? s.width : 0;
-  var h = p.height ? s.height : 0;
-
-  /* Compute implied width, right and left. */
-  var width = this.parent ? this.parent.width() : (w + l + r);
-  if (w == null) {
-    w = width - (r = r || 0) - (l = l || 0);
-  } else if (r == null) {
-    if (l == null) {
-      l = r = (width - w) / 2;
-    } else {
-      r = width - w - l;
-    }
-  } else if (l == null) {
-    l = width - w - r;
-  }
-
-  /* Compute implied height, bottom and top. */
-  var height = this.parent ? this.parent.height() : (h + t + b);
-  if (h == null) {
-    h = height - (t = t || 0) - (b = b || 0);
-  } else if (b == null) {
-    if (t == null) {
-      b = t = (height - h) / 2;
-    } else {
-      b = height - h - t;
-    }
-  } else if (t == null) {
-    t = height - h - b;
-  }
-
-  s.left = l;
-  s.right = r;
-  s.top = t;
-  s.bottom = b;
-
-  /* Only set width and height if they are supported by this mark type. */
-  if (p.width) s.width = w;
-  if (p.height) s.height = h;
-
-  /* Set any null colors to pv.Color.transparent. */
-  if (p.textStyle && !s.textStyle) s.textStyle = pv.Color.transparent;
-  if (p.fillStyle && !s.fillStyle) s.fillStyle = pv.Color.transparent;
-  if (p.strokeStyle && !s.strokeStyle) s.strokeStyle = pv.Color.transparent;
-};
-
-/**
- * Returns the current location of the mouse (cursor) relative to this mark's
- * parent. The <i>x</i> coordinate corresponds to the left margin, while the
- * <i>y</i> coordinate corresponds to the top margin.
- *
- * @returns {pv.Vector} the mouse location.
- */
-pv.Mark.prototype.mouse = function() {
-
-  /* Compute xy-coordinates relative to the panel. */
-  var x = pv.event.pageX || 0,
-      y = pv.event.pageY || 0,
-      n = this.root.canvas();
-  do {
-    x -= n.offsetLeft;
-    y -= n.offsetTop;
-  } while (n = n.offsetParent);
-
-  /* Compute the inverse transform of all enclosing panels. */
-  var t = pv.Transform.identity,
-      p = this.properties.transform ? this : this.parent,
-      pz = [];
-  do { pz.push(p); } while (p = p.parent);
-  while (p = pz.pop()) t = t.translate(p.left(), p.top()).times(p.transform());
-  t = t.invert();
-
-  return pv.vector(x * t.k + t.x, y * t.k + t.y);
-};
-
-/**
- * Registers an event handler for the specified event type with this mark. When
- * an event of the specified type is triggered, the specified handler will be
- * invoked. The handler is invoked in a similar method to property functions:
- * the context is <tt>this</tt> mark instance, and the arguments are the full
- * data stack. Event handlers can use property methods to manipulate the display
- * properties of the mark:
- *
- * <pre>m.event("click", function() this.fillStyle("red"));</pre>
- *
- * Alternatively, the external data can be manipulated and the visualization
- * redrawn:
- *
- * <pre>m.event("click", function(d) {
- *     data = all.filter(function(k) k.name == d);
- *     vis.render();
- *   });</pre>
- *
- * The return value of the event handler determines which mark gets re-rendered.
- * Use defs ({@link #def}) to set temporary state from event handlers.
- *
- * <p>The complete set of event types is defined by SVG; see the reference
- * below. The set of supported event types is:<ul>
- *
- * <li>click
- * <li>mousedown
- * <li>mouseup
- * <li>mouseover
- * <li>mousemove
- * <li>mouseout
- *
- * </ul>Since Protovis does not specify any concept of focus, it does not
- * support key events; these should be handled outside the visualization using
- * standard JavaScript. In the future, support for interaction may be extended
- * to support additional event types, particularly those most relevant to
- * interactive visualization, such as selection.
- *
- * <p>TODO In the current implementation, event handlers are not inherited from
- * prototype marks. They must be defined explicitly on each interactive mark. In
- * addition, only one event handler for a given event type can be defined; when
- * specifying multiple event handlers for the same type, only the last one will
- * be used.
- *
- * @see <a href="http://www.w3.org/TR/SVGTiny12/interact.html#SVGEvents">SVG events</a>
- * @param {string} type the event type.
- * @param {function} handler the event handler.
- * @returns {pv.Mark} this.
- */
-pv.Mark.prototype.event = function(type, handler) {
-  this.$handlers[type] = pv.functor(handler);
-  return this;
-};
-
-/** @private Evaluates the function <i>f</i> with the specified context. */
-pv.Mark.prototype.context = function(scene, index, f) {
-  var proto = pv.Mark.prototype,
-      stack = pv.Mark.stack,
-      oscene = pv.Mark.scene,
-      oindex = proto.index;
-
-  /** @private Sets the context. */
-  function apply(scene, index) {
-    pv.Mark.scene = scene;
-    proto.index = index;
-    if (!scene) return;
-
-    var that = scene.mark,
-        mark = that,
-        ancestors = [];
-
-    /* Set ancestors' scene and index; populate data stack. */
-    do {
-      ancestors.push(mark);
-      stack.push(scene[index].data);
-      mark.index = index;
-      mark.scene = scene;
-      index = scene.parentIndex;
-      scene = scene.parent;
-    } while (mark = mark.parent);
-
-    /* Set ancestors' scale; requires top-down. */
-    for (var i = ancestors.length - 1, k = 1; i > 0; i--) {
-      mark = ancestors[i];
-      mark.scale = k;
-      k *= mark.scene[mark.index].transform.k;
-    }
-
-    /* Set children's scene and scale. */
-    if (that.children) for (var i = 0, n = that.children.length; i < n; i++) {
-      mark = that.children[i];
-      mark.scene = that.scene[that.index].children[i];
-      mark.scale = k;
-    }
-  }
-
-  /** @private Clears the context. */
-  function clear(scene, index) {
-    if (!scene) return;
-    var that = scene.mark,
-        mark;
-
-    /* Reset children. */
-    if (that.children) for (var i = 0, n = that.children.length; i < n; i++) {
-      mark = that.children[i];
-      delete mark.scene;
-      delete mark.scale;
-    }
-
-    /* Reset ancestors. */
-    mark = that;
-    do {
-      stack.pop();
-      if (mark.parent) {
-        delete mark.scene;
-        delete mark.scale;
-      }
-      delete mark.index;
-    } while (mark = mark.parent);
-  }
-
-  /* Context switch, invoke the function, then switch back. */
-  clear(oscene, oindex);
-  apply(scene, index);
-  try {
-    f.apply(this, stack);
-  } finally {
-    clear(scene, index);
-    apply(oscene, oindex);
-  }
-};
-
-/** @private Execute the event listener, then re-render. */
-pv.Mark.dispatch = function(type, scene, index) {
-  var m = scene.mark, p = scene.parent, l = m.$handlers[type];
-  if (!l) return p && pv.Mark.dispatch(type, p, scene.parentIndex);
-  m.context(scene, index, function() {
-      m = l.apply(m, pv.Mark.stack);
-      if (m && m.render) m.render();
-    });
-  return true;
-};
-
-pv.Mark.prototype.transition = function() {
-  return new pv.Transition(this);
-};
-
-pv.Mark.prototype.on = function(state) {
-  return this["$" + state] = new pv.Transient(this);
-};