Notice: The architecture of this library is still evolving, so expect (many) backwards-incompatible changes

WebPPL visualization library. Demo: probmods.github.io/webppl-viz/.

Dependencies:

• webppl (0.9.2-b0139d4 or later)
• (optional) webppl-editor (eeb3208 or later)
• Cairo (see instructions for your operating system)

Installation:

cd ~                             # or however you get to the home directory
mkdir .webppl                    # make a folder called .webppl (if it doesn't already exist)
cd .webppl
npm install probmods/webppl-viz  # install this node package

Usage:

• Command-line: require as a WebPPL package. Example: webppl foo.wppl --require webppl-viz
• Browser: build (run grunt bundle) and then include webppl-viz.js and webppl-viz.css on your web page. (You can also bundle this with core webppl when building that for the browser.)

Plotting data

Methods for plotting raw data.

Bar plot

viz.bar(df, [options])

viz.bar(xs, ys, [options])

Options:

• horizontal (default: false). (TODO) draw a horizontal plot rather than vertical one.
• xLabel (default: x). x axis label.
• yLabel (default: y). y axis label.
• xType (default: nominal). type of x axis (nominal or quantitative).
• groupBy (default: none). Grouping variable for different bars.

Line plot

viz.line(df, [options])

viz.line(xs, ys, [options])

Options:

• xLabel (default: x). x axis label.
• yLabel (default: y). y axis label.
• groupBy (default: none). Grouping variable for different lines.
• xBounds (default: min and max of the supplied data). An array of [min,max] bounds for the x-axis.
• yBounds (default: min and max of the supplied data). An array of [min,max] bounds for the y-axis.
• strokeWidth (default: 2). The line stroke width, in pixels.

Scatter plot

viz.scatter(xs, ys, [options])

viz.scatter(df, [options])

Options:

• xLabel (default: x). x axis label.
• yLabel (default: y). y axis label.

Plotting distributions (basic)

Basic methods for visualizing samples and marginal distributions. These plot data that are up to 2-dimensional.

Table

viz.table(dist, [options])

viz.table(samples, [options])

Options:

• destructure (default = true). Expand support keys as columns of the table.
• log (default = false). If true, shows log probabilities.
• top (default = false). If a number n, only shows top n results.
• fileName (default = None). If provided, prints the table into that file in HTML format.

Histogram

viz.hist(samples, [options])

viz.hist(dist, [options])

Options:

• numBins (defaults to 30). For real-valued data, how many bins to aggregate data into.

Density plot

viz.density(samples, [options])

viz.density(dist, [options])

Options:

• bounds (default: min and max of the supplied samples). An array of bounds for density estimation

Heat map

viz.heatMap(samples, [options])

viz.heatMap(dist, [options])

Options:

• bandwidthX (TODO)
• bandwidthY (TODO)
• boundsX (TODO)
• boundsY (TODO)

Parallel coordinates

TODO: document this

Plotting distributions (complex)

More complex methods for visualizing smaples and distributions. These can plot data that are higher dimensional.

Marginals

viz.marginals(dist) shows each component of a joint distribution dist -- density plots for real components and histograms for categorical components.

Automatic visualization

viz.auto tries to automatically construct a useful visualization based on the types of the different components in the posterior.

Options:

• summarize (default = false). (TODO) For data with real-valued components, you can either try to show all the data (scatter plot) or summarize by showing a density estimate (heat map). This option has no effect if data is entirely categorical.

How it works

viz.auto uses the types of the components to constrain visualization. Let's use c to denote categorical variables and r for real variables (for now, ordinal variables are treated as categorical). Some examples of types:

How each type is visualized:

Development notes

grunt setup-demo       # make webppl and webppl-editor dependencies for demo
grunt bundle           # compile js + minify, make css
grunt browserify       # compiling js
grunt uglify           # minify js
grunt browserify-watch # watchified compile js
grunt css              # make css