Hypothetical Outcome Plots (HOPs) Example

Rather than showing a continuous probability distribution, Hypothetical Outcome Plots (or HOPs) visualize a set of draws from a distribution, where each draw is shown as a new plot in either a small multiples or animated form. Here we use Vega’s timer event to produce animated frames.

This example – inspired by The New York Times – displays random draws for a simulated time-series of values (these could be sales or employment statistics). The noise signal determines the amount of random variation added to the signal. The trend signal determines the strength of a linear trend, where zero corresponds to no trend at all (a flat uniform distribution). When the noise is high enough, draws from a distribution without any underlying trend may cause us to “hallucinate” interesting variations! Viewing the different frames may help viewers get a more visceral sense of random variation.

Vega JSON Specification <>

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 300,
  "height": 200,

  "signals": [
    { "name": "baseline", "value": 5 },
    {
      "name": "noise", "value": 2,
      "bind": {"input": "range", "min": 0, "max": 4, "step": 0.1}
    },
    {
      "name": "trend", "value": 0,
      "bind": {"input": "range", "min": -1, "max": 1, "step": 0.1}
    },
    {
      "name": "sample", "value": 1,
      "on": [
        {
          "events": "timer{1000}",
          "update": "1 + ((sample + 1) % 3)"
        }
      ]
    }
  ],

  "data": [
    {
      "name": "steps",
      "transform": [
        {
          "type": "sequence",
          "start": 0, "stop": 12, "step": 1
        },
        {
          "type": "formula", "as": "month",
          "expr": "timeFormat(datetime(2015, datum.data, 1), '%b')"
        },
        {
          "type": "formula", "as": "value",
          "expr": "clamp(sample && (baseline - 0.5 * trend * (5.5 - datum.data) + noise * (2 * random() - 1)), 0, 10)"
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale", "type": "band",
      "domain": {"data": "steps", "field": "month"},
      "range": "width"
    },
    {
      "name": "yscale", "type": "linear",
      "domain": [0, 10],
      "range": "height"
    }
  ],

  "axes": [
    {"orient": "left", "scale": "yscale"},
    {"orient": "bottom", "scale": "xscale"}
  ],

  "marks": [
    {
      "type": "rect",
      "from": {"data": "steps"},
      "encode":{
        "enter": {
          "x": {"scale": "xscale", "field": "month"},
          "width": {"scale": "xscale", "band": 1, "offset": -1},
          "fill": {"value": "steelblue"}
        },
        "update": {
          "y": {"scale": "yscale", "field": "value"},
          "y2": {"scale": "yscale", "value": 0}
        }
      }
    }
  ]
}