Cacher is the code snippet organizer for pro developers

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "width": 800,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "voorland",
      "values": [{"x": 20, "y": 7.5}, {"x": 60, "y": 6.6}, {"x": 92, "y": 8}],
      "on": [
        {"trigger": "addPoint", "insert": "addPoint"},
        {"trigger": "remPoint", "remove": "remPoint"}
      ],
      "transform": [{"type": "collect", "sort": {"field": "x"}}]
    },
    {
      "name": "dijk",
      "values": [
        {"x": 92, "y": 8},
        {"x": 100, "y": 11.5},
        {"x": 103, "y": 12.2}
      ]
    },
    {
      "name": "ruw_profiel",
      "url": "https://ws.hkvservices.nl/continu-inzicht.ws/entry.asmx/Call?function=continuinzicht.daas.GetDataNearestDp&parameters={regio:%27ahn2_100m_rivieren%27,latitude:51.955613,longitude:5.603920,sridfrom:4326,sridto:28992,buffer:2000}",
      "format": {"type": "json", "property": "ruw_profiel"}
    },
    {"name": "total", "source": ["voorland", "dijk", "ruw_profiel"]}
  ],
  "signals": [
    {
      "name": "addPoint",
      "on": [
        {
          "events": "click[!event.shiftKey], mousedown[event.buttons && !event.shiftKey]{20}",
          "update": "{x: invert('xscale', x()), y: invert('yscale', y())}"
        }
      ]
    },
    {
      "name": "remPoint",
      "on": [
        {
          "events": "click[event.shiftKey], mousedown[event.buttons && event.shiftKey]{20}",
          "update": "datum"
        }
      ]
    },
    {
      "name": "dragging",
      "value": null,
      "on": [
        {"events": "@voorland_point:mouseover", "update": "datum"},
        {"events": "@voorland_point:mouseout", "update": "null"}
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "range": "width",
      "zero": false,
      "domain": {"data": "total", "field": "x"}
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "total", "field": "y"}
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "tickCount": 10,
      "title": "Afstand [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": "Hoogte [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}}
        }
      }
    }
  ],
  "title": {"text": "U4.prfl"},
  "marks": [
    {
      "type": "line",
      "interactive": false,
      "from": {"data": "voorland"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "stroke": {"value": "#ffcc66"},
          "strokeWidth": {"value": 2}
        }
      }
    },
    {
      "type": "line",
      "interactive": false,
      "from": {"data": "dijk"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "stroke": {"value": "green"},
          "strokeWidth": {"value": 2}
        }
      }
    },
    {
      "type": "line",
      "interactive": false,
      "from": {"data": "ruw_profiel"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "stroke": {"value": "black"},
          "strokeWidth": {"value": 0.5}
        }
      }
    },
    {
      "name": "voorland_point",
      "type": "symbol",
      "from": {"data": "voorland"},
      "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": "symbol",
      "from": {"data": "dijk"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "stroke": {"value": "green"},
          "fill": {"value": "green"},
          "strokeWidth": {"value": 1}
        },
        "hover": {
          "strokeWidth": {"value": 5},
          "stroke": {"value": "red"},
          "fill": {"value": "red"}
        }
      }
    },
    {
      "type": "area",
      "interactive": false,
      "from": {"data": "voorland"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "y2": {"scale": "yscale", "value": 0},
          "fill": {"value": "#ffff66"},
          "fillOpacity": {"value": 0.15}
        }
      }
    },
    {
      "type": "area",
      "interactive": false,
      "from": {"data": "dijk"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "y2": {"scale": "yscale", "value": 0},
          "fill": {"value": "#1C991C"},
          "fillOpacity": {"value": 0.15}
        }
      }
    }
  ]
}