{
    "$schema": "https://vega.github.io/schema/vega/v4.json",
    "width": 600,
    "height": 310,
    "padding": {"top": 30},
    "autosize": "fit",
    "signals": [
      {
        "name": "signal_gradientLength",
        "value": 200
      }
    ],
    "title": {
      "text": "Bubble Chart",
      "anchor": "start",
      "color": "#485465"
    },
  
    "data": [
      {
      "name": "table",
      "url": "https://api.myjson.com/bins/1h3p3i"
    }
    ],
    "scales": [
      {
      "name": "x",
      "type": "point",
      "round": true,
      "nice": true,
      "padding": 0.1,
      "zero": true,
      "domain": {"data": "table", "field": "category"},
      "range": "width"
    },
    {
      "name": "y",
      "type": "linear",
      "round": true,
      "nice": true,
      "padding": 0.1,
      "zero": true,
      "domain": {"data": "table", "field": "V1"},
      "range": "height"
    },
    {
      "name": "size",
      "type": "linear",
      "round": true,
      "nice": false,
      "zero": true,
      "domain": {"data": "table", "field": "Depth"},
      "range": [25, 500]
    },
    {
      "name": "label_axis",
      "type": "point",
      "round": true,
      "nice": false,
      "zero": false,
      "domain": {"data": "table", "field": "Label"},
      "range": "width"
    },
    {
      "name": "label",
      "type": "ordinal",
      "round": true,
      "nice": false,
      "zero": false,
      "domain": {"data": "table", "field": "Label"},
      "range": ["#f1be5c", "#6dd98a", "#e7625a"]
    },
    {
        "name": "color",
        "type": "quantize",
        "domain": {"data": "table", "field": "Depth"},
        "range": ["#f1be5c", "#6dd98a", "#e7625a"]
      }
    ],
    "axes": [
      {
      "scale": "x",
      "grid": false,
      "domain": true,
      "orient": "bottom",
      "ticks": false,
      "title": "Category",
      "titleFont": "roboto",
      "titleColor": "#485465",
      "titleFontSize": 12,
      "titleFontWeight": 500,
      "titlePadding": 16,
      "labelColor": "#485465",
      "labelFontSize": 10,
      "labelPadding": 10,
      "labelFontWeight": 500
    },
    {
      "scale": "y",
      "grid": false,
      "gridOpacity": 0.9,
      "gridColor": "#F0F2F4",
      "domain": true,
      "orient": "left",
      "ticks": false,
      "title": "Y Variable",
      "titleFont": "roboto",
      "titleColor": "#485465",
      "titleFontSize": 12,
      "titleFontWeight": 500,
      "titlePadding": 16,
      "labelColor": "#485465",
      "labelFontSize": 10,
      "labelFontWeight": 500,
      "labelPadding": 10,
      "labelFont": "roboto"
    },
    {
      "scale": "label_axis",
      "grid": true,
      "gridOpacity": 0.9,
      "gridColor": "#F0F2F4",
      "domain": false,
      "orient": "top",
      "ticks": false,
      "title": "Label",
      "titleFont": "roboto",
      "titleColor": "#485465",
      "titleFontSize": 12,
      "titleFontWeight": 500,
      "titlePadding": 16,
      "labelColor": "#485465",
      "labelFontSize": 10,
      "labelFontWeight": 500,
      "labelPadding": 10,
      "labelFont": "roboto"
    }
    ],
    "marks": [
      {
        "name": "circles",
        "type": "symbol",
        "from": {
          "data": "table"
        },
        "encode": {
          "enter": {
            "x": {"scale": "x", "field": "category"},
            "y": {"scale": "y", "field":"V1"},
            "size": {"scale": "size", "field": "Depth"},
            "shape": {"value": "circle"},
            "fill": {"scale": "label", "field": "Label"}
          }
        }
      }
    ],
    "legends": [
      {
      "type": "gradient",
      "orient": "none",
      "gradientLength": {"signal": "signal_gradientLength"},
      "gradientThickness": 10,
      "encode": {
          "labels": {
            "update": {
              "text": {
                "value": ""
              }
            }
          },
          "legend": {
            "update": {
              "x": {
                "signal": "width - signal_gradientLength"
              },
              "y": {
                "value": -90
              }
            }
          }
        },
        "direction": "horizontal",
        "fill": "color",
        "title": "Color Represents"
      }
    ]
  }