{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic area chart example.",
  "width": 500,
  "height": 200,
  "padding": 5,
  "data": [{"name": "con"}, {"name": "dis"}],

  "signals": [
    {
      "name": "mousex",
      "description": "x position of mouse",
      "update": "0",
      "on": [{"events": "mousemove", "update": "1-x()/width"}]
    },
    {
      "name": "xscale",
      "description": "The transform of the x scale",
      "value": 1.0,
      "bind": {
        "input": "range",
        "min": 0.1,
        "max": 1
        }
    },
    {
      "name": "yscale",
      "description": "The transform of the y scale",
      "value": 1.0,
      "bind": {
        "input": "range",
        "min": 0.1,
        "max": 1
        }
    }
  ],

  "scales": [{
    "name": "xscale",
    "type": "pow",
    "exponent": {"signal": "xscale"},
    "range": "width",
    "zero": false,
    "nice": false,
    "domain": {
      "fields": [
        { "data": "con", "field": "x"},
        { "data": "dis", "field": "x"}
        ]
      }
  }, {
    "name": "yscale",
    "type": "pow",
    "exponent": {"signal": "yscale"},
    "range": "height",
    "nice": true,
    "zero": true,
    "domain": {
      "fields": [
        { "data": "con", "field": "y"},
        { "data": "dis", "field": "y"}
        ]
    }
  }
  ],

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

  "marks": [
    {
      "type": "area",
      "from": {"data": "con"},
      "encode": {
        "enter": {
          "tooltip": {"signal": "datum.cdf"}
        },
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "y2": {"scale": "yscale", "value": 0},
          "fill": {
              "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'blue'}, {offset: 1.0, color: 'blue'} ] }"
            },
          "interpolate": {"value": "monotone"},
          "fillOpacity": {"value": 1}
        }
      }
    },
    {
      "type": "rect",
      "from": {"data": "dis"},
      "encode": {
        "enter": {
          "y2": {"scale": "yscale", "value": 0},
          "width": {"value": 1}
        },
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"}
        }
      }
    },
    {
      "type": "symbol",
      "from": {"data": "dis"},
      "encode": {
        "enter": {
          "shape": {"value": "circle"},
          "width": {"value": 5},
          "tooltip": {"signal": "datum.y"}
        },
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"}
        }
      }
    }
  ]
}