Plots

Wave provides a versatile plotting API based on Leland Wilkinson's Grammar of Graphics.

A plot is a layered graphic, created using ui.plot(). Each layer displays marks, described by ui.mark(). The layers are rendered on top of each other to produce the final plot.

ui.mark() describes a collection of marks, not one mark. Since each ui.mark() describes one layer in the plot, it follows that all the marks on a layer are of the same type (its geometry). A mark's type can be one of point, interval, line, path, area, polygon, schema, edge.

There are two ways to add plots to a page:

  • Use a plot card (ui.plot_card()) and set its plot attribute using ui.plot().
  • Use a form card (ui.form_card()), insert a visualization (ui.visualization()) and set its plot attribute using ui.plot().

Here's a short example that renders a scatterplot of random values between [0, 1].

import random
from h2o_wave import site, data, ui
page = site['/demo']
v = page.add('example', ui.plot_card(
box='1 1 4 5',
title='Point',
data=data('price performance', 50, rows=[(random.random(), random.random()) for _ in range(50)]),
plot=ui.plot([
ui.mark(type='point', x='=price', y='=performance')
])
))
page.save()

ui.plot() accepts a list of marks. This example renders annotations on top of a scatterplot, like this:

ui.plot([
ui.mark(type='point', x='=price', y='=performance', x_min=0, x_max=100, y_min=0, y_max=100), # the plot
ui.mark(x=50, y=50, label='point'),
ui.mark(x=40, label='vertical line'),
ui.mark(y=40, label='horizontal line'),
ui.mark(x=70, x0=60, label='vertical region'),
ui.mark(y=70, y0=60, label='horizontal region'),
ui.mark(x=30, x0=20, y=30, y0=20, label='rectangular region')
])

Point

  • Basic: Make a scatterplot.
  • Shapes: Make a scatterplot with categories encoded as mark shapes.
  • Sizes: Make a scatterplot with mark sizes mapped to a continuous variable (a "bubble plot").
  • Map: Make a plot to compare quantities across categories. Similar to a heatmap, but using size-encoding instead of color-encoding.
  • Groups: Make a scatterplot with categories encoded as colors.
  • Annotation: Add annotations (points, lines and regions) to a plot.
  • Custom: Customize a plot's fill/stroke color, size and opacity.

Interval

Columns

  • Basic: Make a column plot.
  • Groups: Make a grouped column plot.
  • Range: Make a column plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.
  • Labels: Make a column plot with labels on each bar.
  • Stacked: Make a stacked column plot.
  • Stacked, Grouped: Make a column plot with both stacked and grouped bars.
  • Annotation: Add annotations to a column plot.
  • Theta: Make a "racetrack" plot (a column plot in polar coordinates).

Bars

  • Basic: Make a bar plot.
  • Groups: Make a grouped bar plot.
  • Range: Make a bar plot with each bar representing high/low (or start/end) values. Transposing this produces a gantt plot.
  • Stacked: Make a stacked bar plot.
  • Stacked, Grouped: Make a bar plot with both stacked and grouped bars.
  • Annotation: Add annotations to a bar plot.
  • Polar: Make a rose plot (a bar plot in polar coordinates).
  • Polar, Stacked: Make a stacked rose plot (a stacked bar plot in polar coordinates).
  • Helix: Make a bar plot in helical coordinates.

Line

  • Basic: Make a line plot.
  • Groups: Make a multi-series line plot.
  • Smooth: Make a line plot using a smooth curve.
  • Step: Make a line plot with a step curve.
  • Step, After: Make a line plot with a step-after curve.
  • Step, Before: Make a line plot with a step-before curve.
  • Labels: Add labels to a line plot.
  • Labels, Stroked: Customize label rendering: add a subtle outline to labels to improve readability.
  • Labels, Occlusion: Make a line plot with non-overlapping labels.
  • Annotation: Add annotations to a line plot.

Path

  • Basic: Make a path plot.
  • Point: Make a path plot with an additional layer of points.
  • Smooth: Make a path plot with a smooth curve.

Area

  • Basic: Make an area plot.
  • Groups: Make an area plot showing multiple categories.
  • Negative: Make an area plot showing positive and negative values.
  • Range: Make an area plot representing a range (band) of values.
  • Smooth: Make an area plot with a smooth curve.
  • Stacked: Make a stacked area plot.

Area + Line

  • Area + Line: Make an area plot with an additional line layer on top.
  • Area + Smooth: Make a combined area + line plot using a smooth curve.
  • Area + Groups: Make an combined area + line plot showing multiple categories.

Polygon

Schema

Other

  • Axis Titles: Display custom axis titles on a plot.
  • Form: Display a plot inside a form.