Skip to content
Visualization for WebPPL
JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs More robust runningInBrowser() #81 Jun 13, 2017
scripts cdnUpload: switch from bundle/ to docs/ Dec 8, 2016
src
test
.gitignore Seed with erindb/webppl-viz (use-editor2 branch) Jan 28, 2016
Gruntfile.js Grunt: switch from bundle/ to docs/, remove uglify from default task Dec 8, 2016
LICENSE.md Add MIT license Sep 19, 2016
README.md Add cd to install instructions May 2, 2018
npm-shrinkwrap.json get rid of child process Mar 29, 2017
package.json automatically open graphs if process.env.WEBPPL_VIZ_AUTOOPEN is set Apr 21, 2018

README.md

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:

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:

Support element Type Notes
String c
Integer r
Real number r
Object concatenation of component types The type of {fruit: 'apple', price: 3.6} is rc
Array concatenation of component types The type of [9.2, 8.1, 'candy bar'] is rrc

How each type is visualized:

Type Visualization
c histogram
r density plot
cc bar plot (but if both dimensions have size >5, then heat map)
cr density curve, colors for different categorical groups
rr scatter plot (TODO
ccc trellis frequency table
ccr trellis density plot, colors for different categorical groups
crr trellis scatter plot (TODO
rrr+ parallel coordinates plot
cccc trellis frequency table (TODO)
cccr trellis scatter plot (TODO
ccrr trellis scatter plot / heat map (TODO)
crrr trellis parallel coordinates plot (TODO)
ccrrr trellis parallel coordinates plot (TODO)

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
You can’t perform that action at this time.