Protovis cheat sheet. Property Description Area Bar Dot Line Wedge Label Rule. Style Description Area Bar Dot Line Wedge Label Rule.

Transcription

1 Protovis cheat sheet AREA BAR DOT LINE WEDGE right height width height outerradius innerradius Property Area Bar Dot Line Wedge Label Rule data the array of data used to position elements in a chart distance from the edge of the parent panel in pixels distance from the edge of the parent panel in pixels distance from the edge of the parent panel in pixels right distance from the right edge of the parent panel in pixels width width in pixels height height in pixels size the size (proportional to area) of the dot in pixels startangle the start angle of the wedge in radians endangle the end angle of the wedge in radians angle the angle subtended by the wedge in radians innerradius the inner radius of the wedge in pixels outerradius the outer radius of the wedge in pixels textalign horizontal alignment textbaseline vertical alignment textmargin margin to offset from the text anchor in pixels textangle rotation angle, in radians Style Area Bar Dot Line Wedge Label Rule fillstyle fill color (string) strokestyle stroke color (string) linewidth stroke thickness in pixels shape type of shape (e.g., "circle", "triangle", "square") font CSS2 font (e.g., "bold 12pt sans-serif") textstyle text color (string) Colors Colors are rendered in the RGB colorspace, regardless of format. SUPPORTED FORMATS #f00 // #rgb #ff0000 // #rrggbb rgb(255, 0, 0) rgb(100%, 0%, 0%) hsl(0, 100%, 50%) rgba(0, 0, 255, 0.5) hsla(120, 100%, 50%, 1) a color keyword.fillstyle(pv.ramp('black', 'white')).fillstyle(pv.scale.linear(0,.5, 1).range('red', 'yellow', 'green')).fillstyle(pv.colors("red", "orange", "yellow", "green", "blue", "violet")) Anchors BAR DOT WEDGE Anchor locations differ based on type of object. right center right LINKS Official site vis.stanford.edu/protovis/ kdmc tutorials kdmc.berkeley.edu/tutorials/ Google group groups.google.com/group/protovis Eager Eyes eagereyes.org/tutorials/

2 Commonly used Protovis code Class pv.anchor Represents an anchor on a given mark. pv.area Represents an area mark: the solid area between two series of connected line segments. pv.bar Represents a bar: an axis-aligned rectangle that can be stroked and filled. pv.behavior Represents a reusable interaction; applies an interactive behavior to a given mark. pv.behavior.drag Implements interactive dragging starting with mousedown events. pv.behavior.pan Implements interactive panning starting with mousedown events. pv.behavior.point Implements interactive fuzzy pointing, identifying marks that are in close proximity to the mouse cursor. pv.behavior.resize Implements interactive resizing of a selection starting with mousedown events. pv.behavior.select Implements interactive selecting starting with mousedown events. pv.behavior.zoom Implements interactive zooming using mousewheel events. pv.color Represents an abstract (possibly translucent) color. pv.color.hsl Represents a color in HSL space. pv.color.rgb Represents a color in RGB space. pv.colors A collection of standard color palettes for categorical encoding. pv.dot Represents a dot; a dot is simply a sized glyph centered at a given point that can also be stroked and filled. pv.flatten Represents a flatten operator for the specified array. pv.format Represents an abstract text formatter and parser. pv.format.date The format string is in the same format expected by the strftime function in C. pv.format.number Represents a number format, converting between a number and a string. pv.format.time Represents a time format, converting between a number representing a duration in milliseconds, and a string. pv.image Represents an image, either a static resource or a dynamically- generated pixel buffer. pv.label Represents a text label, allowing textual annotation of other marks or arbitrary text within the visualization. pv.line Represents a series of connected line segments, or polyline, that can be stroked with a configurable color and thickness. pv.mark Represents a data-driven graphical mark. pv.nest Represents a Nest operator for the specified array. pv.panel Represents a container mark. pv.rule Represents a horizontal or vertical rule. pv.scale Represents a scale; a function that performs a transformation from data domain to visual range. pv.scale.linear Represents a linear scale; a function that performs a linear transformation. pv.wedge Represents a wedge, or pie slice. Method pv.color(format) Returns the pv.color for the specified color format string. pv.colors() Returns a new categorical color encoding using the specified colors. pv.index() Returns this.index. pv.nodes() Given a flat array of values, returns a simple DOM with each value wrapped by a node that is a child of the root node. pv.normalize(array, f) Returns a normalized copy of the specified array, such that the sum of the returned elements sum to one. pv.radians(degrees) Returns the number of radians corresponding to the specified degrees. pv.ramp(start, end) Returns a linear color ramp from the specified start color to the specified end color. pv.range(start, s, step) Returns an array of numbers, starting at start, incrementing by step, until s is reached. pv.rgb(r, g, b, a) Constructs a new RGB color with the specified channel values. pv.search(array, value, f) Searches the specified array of numbers for the specified value using the binary search algorithm. pv.sum(array, f) Returns the sum of the specified array. pv.values(map) Returns all of the values (attribute values) of the specified object (a map).

3 JavaScript JS Code Operators var creates a variable function() declares a function function(d) declares a function that will use the data array array A set of values grouped together under a single variable name and separated by commas e.g.: cars = new Array("Porche", "Ford", "Mazda") index Positions of data in arrays are ordered by number in an index that can be referenced in your code. The first position is always [0] this refers to the current object this.index specifies the current object of the data array return Creates an output in a function {activebar = this.index; return techstocks;} event Describes an action that triggers code. Can be mouse movement, keyboard input, etc. Can be used to set listeners and handelers e.g.:.event("point", function() {activebar = this.index; return techstocks;}) = sets identity (like a variable) == set values equal to each other e.g. (activebar == this.index) === strict equal both values must be equal and of the same type!= not equal!== strict not equal > greater than >= greater than or equal to < less than <= less than or equal to? A conditional operator. The first condition evaluates to true or false, the second is returned if true and third is returned if false. e.g.: (activebar == this.index)? "black" : "blue" Protovis Layouts Layouts pv.layout pv.layout.ar pv.layout.bullet pv.layout.cluster pv.layout.cluster.fill pv.layout.force pv.layout.grid pv.layout.hierarchy pv.layout.horizon pv.layout.indent pv.layout.matrix pv.layout.network pv.layout.network.link pv.layout.network.node pv.layout.pack pv.layout.partition pv.layout.partition.fill pv.layout.rollup pv.layout.stack pv.layout.tree pv.layout.treemap Represents an abstract layout, encapsulating a visualization technique such as a streamgraph or treemap. Implements a layout for arc diagrams. Constructs a new, empty bullet layout Implements a hierarchical layout using the cluster (or dendrogram) algorithm. A variant of cluster layout that is space-filling. Implements force-directed network layout as a node-link diagram. Implements a grid layout with regularly-sized rows and columns. Represents an abstract layout for hierarchy diagrams. Implements a horizon layout, which is a variation of a single-series area chart where the area is folded into multiple bands. Implements a hierarchical layout using the indent algorithm. Implements a network visualization using a matrix view. Represents an abstract layout for network diagrams. Represents a link in a network layout. Represents a node in a network layout. Implements a hierarchical layout using circle-packing. Implemeents a hierarchical layout using the partition (or sunburst, icicle) algorithm. A variant of partition layout that is space-filling. Implements a network visualization using a node-link diagram where nodes are rolled up along two dimensions. Implements a layout for stacked visualizations, ranging from simple stacked bar charts to more elaborate "streamgraphs" composed of stacked areas. Implements a node-link tree diagram using the Reingold-Tilford "tidy" tree layout algorithm. Implements a space-filling rectangular layout, with the hierarchy represented via containment.

4 Other Protovis classes Classes pv.constraint pv.constraint.bound pv.constraint.collision pv.constraint.position pv.dom pv.dom.node pv.force pv.force.charge pv.force.drag pv.force.spring pv.geo.latlng pv.geo.projection pv.geo.projections pv.geo.scale pv.geo.scale#ticks pv.histogram pv.histogram.bin pv.particle pv.quadtree pv.quadtree.node pv.scale.log pv.scale.ordinal pv.scale.quantile pv.vector pv.version pv.scale.quantitative pv.scale.root pv.simulation pv.transform pv.tree Represents a constraint that acts on particles. Constrains particles to within fixed rectangular bounds. Constraints circles to avoid overlap. Constraints particles to a fixed position. Represets a DOM operator for the specified map. Represents a Node in the W3C Document Object Model. Represents a force that acts on particles. An n-body force, as defined by Coulomb's law or Newton's law of gravitation, inversely proportional to the square of the distance between particles. Implements a drag force, simulating friction. Implements a spring force, per Hooke's law. Represents a pair of geographic coordinates. Represents a geographic projection. Represents a geographic scale; a mapping between latitude-longitude coordinates and screen pixel coordinates. Tick functions for geographic scales. Represents a histogram operator. Represents a bin returned by the pv.histogram operator. A weighted particle that can participate in a force simulation. Represents a quadtree: a two-dimensional recursive spatial subdivision. A node in a quadtree. Represents a log scale. Represents an ordinal scale. Represents a quantile scale; a function that maps from a value within a sortable domain to a quantized numeric range. Represents a two-dimensional vector; a 2-tuple x, y. Protovis major and minor version numbers. Represents an abstract quantitative scale; a function that performs a numeric transformation. Represents a root scale; a function that performs a power transformation. Represents a particle simulation. Represents a transformation matrix. Represents a tree operator for the specified array.

5 Other Protovis methods Method pv.blend(arrays) pv.child() pv.cross(a, b) pv.degrees(radians) pv.deviation(array, f) pv.dict(keys, f) pv.dom(map) pv.entries(map) pv.flatten(map) pv.hsl(h, s, l, a)" pv.identity(x) pv.keys(map) pv.log(x, b) pv.logadjusted(x, b) pv.logceil(x, b) pv.logfloor(x, b) pv.logsymmetric(x, b) pv.max(array, f) pv.mean(array, f) pv.median(array, f) pv.min(array, f) pv.naturalorder(a, b) pv.nest(array) pv.numerate(keys, f) pv.parent() pv.permute(array, indexes, f) pv.random(start, s, step) pv.repeat(a, n) pv.reverseorder(a, b) pv.simulation(particles) pv.transpose(arrays) pv.tree(array) pv.uniq(array, f) pv.variance(array, f) pv.vector(x, y) Given the specified array of arrays, concatenates the arrays into a single array. Returns this.childindex. Given two arrays a and b, returns an array of all possible pairs of elements [ai, bj]. Returns the number of degrees corresponding to the specified radians. Returns an unbiased estimation of the standard deviation of a population, given the specified random sample. Returns a map constructed from the specified keys, using the function f to compute the value for each key. Returns a pv.dom operator for the given map. Returns all of the entries (key-value pairs) of the specified object (a map). Returns a pv.flatten operator for the specified map. Constructs a new HSL color with the specified values. Returns the passed-in argument, x; the identity function. Returns all of the property names (keys) of the specified object (a map). Returns the logarithm with a given base value. Computes a zero-symmetric logarithm, with adjustment to values between zero and the logarithm base. Rounds an input value up according to its logarithm. Rounds an input value down according to its logarithm. Computes a zero-symmetric logarithm. Returns the maximum value of the specified array. Returns the arithmetic mean, or average, of the specified array. Returns the median of the specified array. Returns the minimum value of the specified array of numbers. The comparator function for natural order. Returns a pv.nest operator for the specified array. Returns a map from key to index for the specified keys array. Returns this.parent.index. Returns a permutation of the specified array, using the specified array of indexes. Returns a random number in the range [start, s) that is a multiple of step. Concatenates the specified array with itself n times. The comparator function for reverse natural order. Constructs a new empty simulation. Given the specified array of arrays, transposes each element arrayij with arrayji. Returns a pv.tree operator for the specified array. Returns the unique elements in the specified array, in the order they appear. Returns the unweighted variance of the specified array. Returns a pv.vector for the specified x and y coordinate.