Cacher is the code snippet organizer for pro developers

{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": 800,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "data_points",
      "values": [{"x": 20, "y": 7.5}, {"x": 60, "y": 6.6}, {"x": 92, "y": 8}],
      "on": [
        {"trigger": "src", "modify": "src", "values": "drag"},
        {"trigger": "addPoint", "insert": "addPoint"},
        {"trigger": "remPoint", "remove": "remPoint"}
      ]
    }
  ],
  "signals": [
    {
      "name": "src",
      "value": "!datum",
      "on": [
        {"events": "@data_points_point:mousedown", "update": "datum"},
        {"events": "window:mouseup", "update": "!datum"}
      ]
    },
    {
      "name": "drag",
      "value": "datum",
      "on": [
        {
          "events": "window:mousemove, window:mousedown",
          "update": "{x: invert('xscale', clamp(x(), 0, width)), y: invert('yscale', clamp(y(),0,height))}"
        }
      ]
    },
    {
      "name": "addPoint",
      "on": [
        {
          "events": "mousedown[event.buttons && event.shiftKey && !event.altKey]{20}",
          "update": "{x: invert('xscale', x()), y: invert('yscale', y())}"
        }
      ]
    },
    {
      "name": "remPoint",
      "on": [
        {
          "events": "mousedown[event.buttons && !event.shiftKey && event.altKey]{20}",
          "update": "datum"
        }
      ]
    }    
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "range": "width",
      "zero": false,
      "domain": [0, 100]
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": [0, 10]
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "tickCount": 10,
      "title": "Distance [m]",
      "grid": true,
      "encode": {
        "grid": {
          "update": {"stroke": {"value": "#999"}, "strokeWidth": {"value": 0.1}}
        },
        "ticks": {"update": {"stroke": {"value": "black"}}},
        "labels": {
          "update": {
            "fill": {"value": "black"},
            "angle": {"value": 0},
            "fontSize": {"value": 12}
          }
        },
        "title": {"update": {"fontSize": {"value": 14}}},
        "domain": {
          "update": {"stroke": {"value": "black"}, "strokeWidth": {"value": 1}}
        }
      }
    },
    {
      "orient": "left",
      "scale": "yscale",
      "tickCount": 6,
      "title": "Height [m+NAP]",
      "grid": true,
      "encode": {
        "grid": {
          "update": {"stroke": {"value": "#999"}, "strokeWidth": {"value": 0.1}}
        },
        "ticks": {"update": {"stroke": {"value": "black"}}},
        "labels": {
          "update": {
            "fill": {"value": "black"},
            "angle": {"value": 0},
            "fontSize": {"value": 12}
          }
        },
        "title": {"update": {"fontSize": {"value": 14}}},
        "domain": {
          "update": {"stroke": {"value": "black"}, "strokeWidth": {"value": 1}}
        }
      }
    }
  ],
  "marks": [
    {
      "type": "line",
      "interactive": false,
      "from": {"data": "data_points"},
      "sort": {"field": "x"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "stroke": {"value": "#ffcc66"},
          "strokeWidth": {"value": 2}
        }
      }
    },
    {
      "name": "data_points_point",
      "type": "symbol",
      "from": {"data": "data_points"},
      "sort": {"field": "x"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "stroke": {"value": "#ffcc66"},
          "fill": {"value": "#ffcc66"},
          "strokeWidth": {"value": 1}
        },
        "hover": {
          "strokeWidth": {"value": 5},
          "stroke": {"value": "red"},
          "fill": {"value": "red"}
        }
      }
    },
    {
      "type": "area",
      "interactive": false,
      "from": {"data": "data_points"},
      "sort": {"field": "x"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "y2": {"scale": "yscale", "value": 0},
          "fill": {"value": "#ffff66"},
          "fillOpacity": {"value": 0.15}
        }
      }
    }
  ]
}