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/v5.json",
"description": "A hypothetical outcome plot that uses animated samples to convey uncertainty.",
"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}
}
}
}
]
}