Protovis cheat sheet

AREA
top left height bottom right left bottom

BAR
width height

DOT
left bottom

LINE
left

WEDGE
outerRadius left bottom bottom innerRadius

Property
data top left bottom right width height size startAngle endAngle angle innerRadius outerRadius textAlign textBaseline textMargin textAngle

Description
the array of data used to position elements in a chart distance from the top edge of the parent panel in pixels distance from the left edge of the parent panel in pixels distance from the bottom edge of the parent panel in pixels distance from the right edge of the parent panel in pixels width in pixels height in pixels the size (proportional to area) of the dot in pixels the start angle of the wedge in radians the end angle of the wedge in radians the angle subtended by the wedge in radians the inner radius of the wedge in pixels the outer radius of the wedge in pixels horizontal alignment vertical alignment margin to offset from the text anchor in pixels rotation angle, in radians

Area Bar

Dot

Line

Wedge Label Rule

Style
fillStyle strokeStyle lineWidth shape font textStyle

Description
fill color (string) stroke color (string) stroke thickness in pixels type of shape (e.g., "circle", "triangle", "square") CSS2 font (e.g., "bold 12pt sans-serif") text color (string)

Area Bar

Dot

Line

Wedge Label Rule

Colors
Colors are rendered in the RGB colorspace, regardless of format. SUPPORTED FORMATS #f00 // #rgb #ff0000 // #rrggbb hsl(0, 100%, 50%) rgba(0, 0, 255, 0.5) rgb(255, 0, 0) hsla(120, 100%, 50%, 1) rgb(100%, 0%, 0%) a color keyword

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/

.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
Anchor locations differ based on type of object.

BAR
top

DOT
top
right

WEDGE
1
1.2
0.7

left

left

center bottom

right

1.5

bottom

1.7

Commonly used Protovis code

Class
pv.Anchor pv.Area pv.Bar pv.Behavior pv.Behavior.drag pv.Behavior.pan pv.Behavior.point pv.Behavior.resize pv.Behavior.select pv.Behavior.zoom pv.Color pv.Color.Hsl pv.Color.Rgb pv.Colors pv.Dot pv.Flatten pv.Format pv.Format.date pv.Format.number pv.Format.time pv.Image pv.Label pv.Line pv.Mark pv.Nest pv.Panel pv.Rule pv.Scale pv.Scale.linear pv.Wedge

Description
Represents an anchor on a given mark. Represents an area mark: the solid area between two series of connected line segments. Represents a bar: an axis-aligned rectangle that can be stroked and filled. Represents a reusable interaction; applies an interactive behavior to a given mark. Implements interactive dragging starting with mousedown events. Implements interactive panning starting with mousedown events. Implements interactive fuzzy pointing, identifying marks that are in close proximity to the mouse cursor. Implements interactive resizing of a selection starting with mousedown events. Implements interactive selecting starting with mousedown events. Implements interactive zooming using mousewheel events. Represents an abstract (possibly translucent) color. Represents a color in HSL space. Represents a color in RGB space. A collection of standard color palettes for categorical encoding. Represents a dot; a dot is simply a sized glyph centered at a given point that can also be stroked and filled. Represents a flatten operator for the specified array. Represents an abstract text formatter and parser. The format string is in the same format expected by the strftime function in C. Represents a number format, converting between a number and a string. Represents a time format, converting between a number representing a duration in milliseconds, and a string. Represents an image, either a static resource or a dynamically- generated pixel buffer. Represents a text label, allowing textual annotation of other marks or arbitrary text within the visualization. Represents a series of connected line segments, or polyline, that can be stroked with a configurable color and thickness. Represents a data-driven graphical mark. Represents a Nest operator for the specified array. Represents a container mark. Represents a horizontal or vertical rule. Represents a scale; a function that performs a transformation from data domain to visual range. Represents a linear scale; a function that performs a linear transformation. Represents a wedge, or pie slice.

Method
pv.color(format) pv.colors() pv.index() pv.nodes()

Description

Returns the pv.Color for the specified color format string. Returns a new categorical color encoding using the specified colors. Returns this.index. 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, stop, step) Returns an array of numbers, starting at start, incrementing by step, until stop 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).

JavaScript
JS Code
var function() function(d) array

Description
creates a variable declares a function declares a function that will use the data array A set of values grouped together under a single variable name and separated by commas e.g.: cars = new Array("Porche", "Ford", "Mazda") 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] refers to the current object specifies the current object of the data array Creates an output in a function {activeBar = this.index; return techstocks;} 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;})

Operators
= == === != !== > >= < <= ?

Description
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"

index

this this.index return event

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

Description
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.

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

Description
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.

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, stop, 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)

Description
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, stop) 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.