{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic area chart example",
  "width": 500,
  "height": 100,
  "padding": 5,
  "data": [
    {
      "name": "con"
    },
    {
      "name": "dis"
    }
  ],
  "signals": [],
  "scales": [],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "labelColor": "#727d93",
      "tickColor": "#fff",
      "tickOpacity": 0.0,
      "domainColor": "#fff",
      "domainOpacity": 0.0,
      "format": "~g",
      "tickCount": 10
    }
  ],
  "marks": [
    {
      "type": "area",
      "from": {
        "data": "con"
      },
      "encode": {
        "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: '#4C78A8'}] }"
          },
          "interpolate": {
            "value": "monotone"
          },
          "fillOpacity": {
            "value": 1
          }
        }
      }
    },
    {
      "type": "rect",
      "from": {
        "data": "dis"
      },
      "encode": {
        "enter": {
          "width": {
            "value": 1
          }
        },
        "update": {
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "y"
          },
          "y2": {
            "scale": "yscale",
            "value": 0
          }
        }
      }
    },
    {
      "type": "symbol",
      "from": {
        "data": "dis"
      },
      "encode": {
        "enter": {
          "shape": {
            "value": "circle"
          },
          "size": [{ "value": 100 }],
          "tooltip": {
            "signal": "datum.y"
          }
        },
        "update": {
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "y"
          },
          "fill": {
            "value": "#1e4577"
          }
        }
      }
    }
  ]
}