{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic area chart example",
  "width": 500,
  "height": 100,
  "autosize": "fit",
  "padding": 5,
  "data": [
    {
      "name": "con"
    },
    {
      "name": "dis"
    }
  ],
  "signals": [
    {
      "name": "xscale",
      "description": "The transform of the x scale",
      "value": false,
      "bind": {
        "input": "checkbox",
        "name": "log x scale"
      }
    },
    {
      "name": "yscale",
      "description": "The transform of the y scale",
      "value": false,
      "bind": {
        "input": "checkbox",
        "name": "log y scale"
      }
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "pow",
      "exponent": {
        "signal": "xscale ? 0.1 : 1"
      },
      "range": "width",
      "zero": false,
      "nice": false,
      "domain": {
        "fields": [
          {
            "data": "con",
            "field": "x"
          },
          {
            "data": "dis",
            "field": "x"
          }
        ]
      }
    },
    {
      "name": "yscale",
      "type": "pow",
      "exponent": {
        "signal": "yscale ? 0.1 : 1"
      },
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {
        "fields": [
          {
            "data": "con",
            "field": "y"
          },
          {
            "data": "dis",
            "field": "y"
          }
        ]
      }
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "labelColor": "#727d93",
      "tickColor": "#fff",
      "tickOpacity": 0.0,
      "domainColor": "#fff",
      "domainOpacity": 0.0,
      "format": "~s",
      "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"
          }
        }
      }
    }
  ]
}