{
  "$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": "select",
        "options": [0.1, 1],
        "labels": ["log", "linear"]
      }
    },
    {
      "name": "yscale",
      "description": "The transform of the y scale",
      "value": 1.0,
      "bind": {
        "input": "select",
        "options": [0.1, 1],
        "labels": ["log", "linear"]
      }
    }
  ],

  "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 }
  ],

  "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: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#1b6fac'}, {offset: 1.0, color: '#1b6fac'} ] }",
            "color": "#000"
          },
          "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" }
        }
      }
    }
  ]
}