{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 570,
  "height": 330,
  "autosize": "fit",
  "padding": {
    "left": 15,
    "top": 15,
    "right": 15,
    "bottom": 15
  },
  "title": {
    "text": "SCATTER PLOT",
    "anchor": "start",
    "color": "#485465",
    "fontSize": 13,
    "fontWeight": 900,
    "font": "roboto"
  },
  "data": [
    {
      "name": "source",
      "values": [
        {
          "Variable A": 2,
          "Variable B": 12,
          "Depth": 4
        },
        {
          "Variable A": 4,
          "Variable B": 12,
          "Depth": 1
        },
        {
          "Variable A": 7,
          "Variable B": 9,
          "Depth": 5
        },
        {
          "Variable A": 7.5,
          "Variable B": 2,
          "Depth": 5
        },
        {
          "Variable A": 5,
          "Variable B": 12,
          "Depth": 4
        },
        {
          "Variable A": 2,
          "Variable B": 3,
          "Depth": 3
        },
        {
          "Variable A": 2,
          "Variable B": 7,
          "Depth": 3
        },
        {
          "Variable A": 3,
          "Variable B": 6,
          "Depth": 4
        },
        {
          "Variable A": 5,
          "Variable B": 11,
          "Depth": 3
        },
        {
          "Variable A": 5,
          "Variable B": 12,
          "Depth": 5
        },
        {
          "Variable A": 4,
          "Variable B": 10,
          "Depth": 3
        },
        {
          "Variable A": 3,
          "Variable B": 12,
          "Depth": 4
        },
        {
          "Variable A": null,
          "Variable B": 12,
          "Depth": 4
        },
        {
          "Variable A": 3,
          "Variable B": null,
          "Depth": 4
        }
      ],
      "transform": [
        {
          "type": "filter",
          "expr": "datum['Variable B'] != null && datum['Variable A'] != null && datum['Depth'] != null"
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "round": true,
      "nice": true,
      "padding": 0.1,
      "zero": true,
      "domain": {
        "data": "source",
        "field": "Variable B"
      },
      "range": "width"
    },
    {
      "name": "y",
      "type": "linear",
      "round": true,
      "nice": true,
      "padding": 0.1,
      "zero": true,
      "domain": {
        "data": "source",
        "field": "Variable A"
      },
      "range": "height"
    },
    {
      "name": "size",
      "type": "linear",
      "round": true,
      "nice": false,
      "zero": true,
      "domain": {
        "data": "source",
        "field": "Depth"
      },
      "range": [
        25,
        250
      ]
    }
  ],
  "axes": [
    {
      "scale": "x",
      "grid": false,
      "domain": true,
      "orient": "bottom",
      "ticks": false,
      "tickCount": 12,
      "labelPadding": 10,
      "title": "Variable B",
      "titleFont": "roboto",
      "titleColor": "#485465",
      "titleFontSize": 12,
      "titleFontWeight": 500,
      "titlePadding": 16,
      "labelColor": "#485465",
      "labelFontSize": 10,
      "labelFontWeight": 500,
      "labelFont": "roboto"
    },
    {
      "scale": "y",
      "grid": false,
      "domain": true,
      "labelPadding": 10,
      "orient": "left",
      "ticks": false,
      "tickCount": 7,
      "title": "Variable A",
      "titleFont": "roboto",
      "titleColor": "#485465",
      "titleFontSize": 12,
      "titleFontWeight": 500,
      "titlePadding": 16,
      "labelColor": "#485465",
      "labelFontSize": 10,
      "labelFontWeight": 500,
      "labelFont": "roboto"
    }
  ],
  "marks": [
    {
      "name": "mark_symbol",
      "type": "symbol",
      "from": {
        "data": "source"
      },
      "encode": {
        "update": {
          "x": {
            "scale": "x",
            "field": "Variable B"
          },
          "y": {
            "scale": "y",
            "field": "Variable A"
          },
          "size": {
            "scale": "size",
            "field": "Depth"
          },
          "shape": {
            "value": "circle"
          },
          "fill": {
            "value": "#53A8E2"
          }
        }
      }
    },
    {
      "name": "mark_outlier_text",
      "type": "text",
      "from": {
        "data": "mark_symbol"
      },
      "encode": {
        "update": {
          "x": {
            "field": "x"
          },
          "y": {
            "field": "y"
          },
          "dy": {
            "value": -20
          },
          "dx": {
            "value": -15
          },
          "text": {
            "signal": "datum.datum['Variable B'] < 5 && datum.datum['Variable A'] > 3 ? 'Outlier': '' "
          },
          "color": "#485465"
        }
      }
    }
  ]
}
