Диаграммы возможных исходов

Вместо непрерывного распределения вероятностей диаграммы возможных исходов (Hypothetical Outcome Plots, HOPs) показывают набор выборок из распределения. Каждая выборка появляется как отдельный небольшой график или кадр анимации. Здесь кадры создаются с помощью событий timer Vega.

Пример, вдохновлённый публикацией The New York Times, показывает случайные выборки смоделированного временного ряда: например, продаж или занятости. Сигнал noise задаёт величину случайных колебаний, а trend — силу линейного тренда; ноль означает отсутствие тренда (плоское равномерное распределение). При достаточно большом шуме в данных без настоящего тренда могут казаться значимыми случайные изменения. Сравнение кадров помогает почувствовать масштаб этой изменчивости.

Спецификация Vega в JSON <>

{
  "$schema": "https://vega.github.io/schema/vega/v6.json",
  "description": "Диаграмма возможных исходов с анимированными выборками для отображения неопределённости.",
  "width": 300,
  "height": 200,

  "signals": [
    { "name": "baseline", "value": 5 },
    {
      "name": "noise", "value": 2,
      "bind": {"name": "Уровень шума", "input": "range", "min": 0, "max": 4, "step": 0.1}
    },
    {
      "name": "trend", "value": 0,
      "bind": {"name": "Тренд", "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}
        }
      }
    }
  ]
}