{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 0,
  "height": 0,
  "padding": 5,
  "autosize": {"type": "pad", "resize": true},

  "config": {
    "legend": {
      "gradientDirection": "horizontal",
      "gradientLength": 100,
      "layout": {
        "right": {
          "direction": {"signal": "direction"},
          "offset": {"signal": "offset"}
        }
      }
    }
  },

  "signals": [
    {
      "name": "direction", "value": "vertical",
      "bind": {"input": "select", "options": ["horizontal", "vertical"]}
    },
    {
      "name": "offset", "value": 18,
      "bind": {"input": "range", "min": 0, "max": 30, "step": 1}
    }
  ],

  "scales": [
    {
      "name": "sequence",
      "type": "linear",
      "range": {"scheme": "viridis"},
      "domain": [0, 100]
    },
    {
      "name": "stops",
      "type": "linear",
      "range": ["#f00", "#a44", "#666", "#4a4", "#0f0"],
      "domain": [-100, -35, 0, 35, 100]
    }
  ],

  "legends": [
    {
      "type": "gradient",
      "fill": "sequence",
      "orient": "left",
      "title": "Gradient",
      "offset": 0
    },
    {
      "type": "gradient",
      "stroke": "stops",
      "orient": "left",
      "title": "Multi-Stop",
      "offset": 0
    },
    {
      "type": "symbol",
      "stroke": "sequence",
      "orient": "right",
      "title": "Sequence",
      "encode": {
        "symbols": {
          "interactive": true,
          "update": {"fill": {"value": "transparent"}},
          "hover": {"fill": {"value": "#ccc"}}
        },
        "labels": {
          "interactive": true,
          "update": {"fill": {"value": "#000"}, "fontWeight": {"value": null}},
          "hover": {"fill": {"value": "firebrick"}, "fontWeight": {"value": "bold"}}
        }
      }
    },
    {
      "type": "symbol",
      "fill": "stops",
      "orient": "right",
      "title": "Stops",
      "values": [-100, -35, 0, 35, 100]
    },
    {
      "type": "symbol",
      "fill": "stops",
      "direction": "horizontal",
      "orient": "none",
      "title": "Orient None",
      "titleOrient": "bottom",
      "titleAnchor": "end",
      "values": [-50, 0, 50],
      "legendX": -100,
      "legendY": 105
    }
  ]
}