squiggle/packages/components/src/vega-specs/spec-percentiles.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 500,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "facet",
      "values": [],
      "format": {
        "type": "json",
        "parse": {
          "timestamp": "date"
        }
      }
    },
    {
      "name": "table",
      "source": "facet",
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["x"],
          "ops": [
            "mean",
            "mean",
            "mean",
            "mean",
            "mean",
            "mean",
            "mean",
            "mean",
            "mean",
            "mean",
            "mean",
            "mean",
            "mean"
          ],
          "fields": [
            "p1",
            "p5",
            "p10",
            "p20",
            "p30",
            "p40",
            "p50",
            "p60",
            "p70",
            "p80",
            "p90",
            "p95",
            "p99"
          ],
          "as": [
            "p1",
            "p5",
            "p10",
            "p20",
            "p30",
            "p40",
            "p50",
            "p60",
            "p70",
            "p80",
            "p90",
            "p95",
            "p99"
          ]
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "nice": true,
      "domain": {
        "data": "facet",
        "field": "x"
      },
      "range": "width"
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {
        "data": "facet",
        "field": "p99"
      }
    }
  ],
  "signals": [
    {
      "name": "mousemove",
      "on": [{ "events": "mousemove", "update": "invert('xscale', x())" }]
    },
    {
      "name": "mouseout",
      "on": [{ "events": "mouseout", "update": "invert('xscale', x())" }]
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "grid": false,
      "labelColor": "#727d93",
      "tickColor": "#fff",
      "tickOpacity": 0.0,
      "domainColor": "#727d93",
      "domainOpacity": 0.1,
      "tickCount": 5
    },
    {
      "orient": "left",
      "scale": "yscale",
      "grid": false,
      "labelColor": "#727d93",
      "tickColor": "#fff",
      "tickOpacity": 0.0,
      "domainColor": "#727d93",
      "domainOpacity": 0.1,
      "tickCount": 5
    }
  ],
  "marks": [
    {
      "type": "rule",
      "encode": {
        "update": {
          "xscale": { "scale": "xscale", "signal": "mousemove" }
        }
      }
    },
    {
      "type": "area",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "fill": {
            "value": "#4C78A8"
          }
        },
        "update": {
          "interpolate": {
            "value": "monotone"
          },
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "p1"
          },
          "y2": {
            "scale": "yscale",
            "field": "p99"
          },
          "opacity": {
            "value": 0.05
          }
        }
      }
    },
    {
      "type": "area",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "fill": {
            "value": "#4C78A8"
          }
        },
        "update": {
          "interpolate": {
            "value": "monotone"
          },
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "p5"
          },
          "y2": {
            "scale": "yscale",
            "field": "p95"
          },
          "opacity": {
            "value": 0.1
          }
        }
      }
    },
    {
      "type": "area",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "fill": {
            "value": "#4C78A8"
          }
        },
        "update": {
          "interpolate": {
            "value": "monotone"
          },
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "p10"
          },
          "y2": {
            "scale": "yscale",
            "field": "p90"
          },
          "opacity": {
            "value": 0.15
          }
        }
      }
    },
    {
      "type": "area",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "fill": {
            "value": "#4C78A8"
          }
        },
        "update": {
          "interpolate": {
            "value": "monotone"
          },
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "p20"
          },
          "y2": {
            "scale": "yscale",
            "field": "p80"
          },
          "opacity": {
            "value": 0.2
          }
        }
      }
    },
    {
      "type": "area",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "fill": {
            "value": "#4C78A8"
          }
        },
        "update": {
          "interpolate": {
            "value": "monotone"
          },
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "p30"
          },
          "y2": {
            "scale": "yscale",
            "field": "p70"
          },
          "opacity": {
            "value": 0.2
          }
        }
      }
    },
    {
      "type": "area",
      "from": {
        "data": "table"
      },
      "encode": {
        "enter": {
          "fill": {
            "value": "#4C78A8"
          }
        },
        "update": {
          "interpolate": {
            "value": "monotone"
          },
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "p40"
          },
          "y2": {
            "scale": "yscale",
            "field": "p60"
          },
          "opacity": {
            "value": 0.2
          }
        }
      }
    },
    {
      "type": "line",
      "from": {
        "data": "table"
      },
      "encode": {
        "update": {
          "interpolate": {
            "value": "monotone"
          },
          "stroke": {
            "value": "#4C78A8"
          },
          "strokeWidth": {
            "value": 2
          },
          "opacity": {
            "value": 0.8
          },
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "p50"
          }
        }
      }
    }
  ]
}