Cacher is the code snippet organizer for pro developers

{
  "width": 720,
  "height": 350,
  "padding": 5,
  "data": [
    {
      "name": "points",
      "url": {"signal": "data_url"},
      "format": {
        "type": "json",
        "property": "series",
        "parse": {"value": "number", "timestamp": "date"}
      },
      "transform": [
        {"type": "flatten", "fields": ["events"], "as": ["events"]},
        {
          "type": "project",
          "fields": ["events.value", "events.timestamp"],
          "as": ["y", "x"]
        },
        {"type": "extent", "field": "x", "signal": "xext"},
        {"type": "extent", "field": "y", "signal": "yext"}
      ]
    }
  ],
  "signals": [
    {"name": "y_label", "value": "parameter"},
    {
      "name": "data_url",
      "value": "https://tsws.hkvservices.nl/mangrove.ws/entry.asmx/Call?function=mangrove.fews.GetTimeSeries&parameters=%7Bhost:%27webviewer.hkvfewsscheldestromen.nl%27,port:8080,region:%27FewsPiService%27,version:%271.22%27,onlyHeaders:%27false%27,start:%272019-02-14T10:37:52.089Z%27,end:%272019-02-28T10:37:52.089Z%27,filterid:%27HKV_WV%27,locations:%5B%27KGM1%27%5D,parameters:%5B%27WNSHDB1%27%5D%7D"
    },
    {"name": "xrange", "update": "[0, width]"},
    {"name": "yrange", "update": "[height, 0]"},
    {
      "name": "down",
      "value": null,
      "on": [
        {"events": "touchend", "update": "null"},
        {"events": "mousedown, touchstart", "update": "xy()"}
      ]
    },
    {
      "name": "xcur",
      "value": null,
      "on": [
        {"events": "mousedown, touchstart, touchend", "update": "slice(xdom)"}
      ]
    },
    {
      "name": "ycur",
      "value": null,
      "on": [
        {"events": "mousedown, touchstart, touchend", "update": "slice(ydom)"}
      ]
    },
    {
      "name": "delta",
      "value": [0, 0],
      "on": [
        {
          "events": [
            {
              "source": "window",
              "type": "mousemove",
              "consume": true,
              "between": [
                {"type": "mousedown"},
                {"source": "window", "type": "mouseup"}
              ]
            },
            {
              "type": "touchmove",
              "consume": true,
              "filter": "event.touches.length === 1"
            }
          ],
          "update": "down ? [down[0]-x(), y()-down[1]] : [0,0]"
        }
      ]
    },
    {
      "name": "anchor",
      "value": [0, 0],
      "on": [
        {
          "events": "wheel",
          "update": "[+invert('xscale', x()), invert('yscale', y())]"
        },
        {
          "events": {
            "type": "touchstart",
            "filter": "event.touches.length===2"
          },
          "update": "[(xdom[0] + xdom[1]) / 2, (ydom[0] + ydom[1]) / 2]"
        }
      ]
    },
    {
      "name": "zoom",
      "value": 1,
      "on": [
        {
          "events": "wheel!",
          "force": true,
          "update": "pow(1.001, event.deltaY * pow(16, event.deltaMode))"
        },
        {
          "events": {"signal": "dist2"},
          "force": true,
          "update": "dist1 / dist2"
        }
      ]
    },
    {
      "name": "dist1",
      "value": 0,
      "on": [
        {
          "events": {
            "type": "touchstart",
            "filter": "event.touches.length===2"
          },
          "update": "pinchDistance(event)"
        },
        {"events": {"signal": "dist2"}, "update": "dist2"}
      ]
    },
    {
      "name": "dist2",
      "value": 0,
      "on": [
        {
          "events": {
            "type": "touchmove",
            "consume": true,
            "filter": "event.touches.length===2"
          },
          "update": "pinchDistance(event)"
        }
      ]
    },
    {
      "name": "xdom",
      "update": "slice(xext)",
      "on": [
        {
          "events": {"signal": "delta"},
          "update": "[xcur[0] + span(xcur) * delta[0] / width, xcur[1] + span(xcur) * delta[0] / width]"
        },
        {
          "events": {"signal": "zoom"},
          "update": "[anchor[0] + (xdom[0] - anchor[0]) * zoom, anchor[0] + (xdom[1] - anchor[0]) * zoom]"
        }
      ]
    },
    {"name": "ydom", "update": "slice(yext)"},
    {"name": "hitAreaWidth", "value": 1},
    {
      "name": "hover",
      "value": {"x": 0, "y": 0},
      "on": [
        {
          "events": "@hit:mouseover",
          "update": "{x: scale('xscale', datum.x), y: scale('yscale', datum.y)}"
        }
      ]
    }
  ],
  "marks": [
    {
      "name": "hit",
      "type": "rect",
      "interactive": true,
      "clip": true,
      "from": {"data": "points"},
      "encode": {
        "update": {
          "xc": {"scale": "xscale", "field": "x"},
          "width": {"signal": "hitAreaWidth"}
        },
        "enter": {
          "y": {"value": 0},
          "height": {"signal": "height"},
          "fill": {"value": "transparent"},
          "tooltip": {
            "signal": "y_label+': ' +  format(datum.y, '.2f') + ' ('+ timeFormat(datum.x, '%d %b %Y %H:%M'+')')"
          }
        }
      }
    },
    {
      "type": "line",
      "from": {"data": "points"},
      "clip": true,
      "interactive": false,
      "encode": {
        "enter": {"stroke": {"value": "#337ab7"}},
        "update": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"}
        }
      }
    },
    {
      "type": "rule",
      "interactive": false,
      "encode": {
        "enter": {
          "stroke": {"value": "darkgrey"},
          "strokeWidth": {"value": 2},
          "y": {"value": 0},
          "y2": {"signal": "height"}
        },
        "update": {
          "x": {"signal": "hover.x"},
          "opacity": {"signal": "!hover.x && !hover.y ? 0 : 1"}
        }
      }
    },
    {
      "type": "symbol",
      "interactive": false,
      "clip": true,
      "encode": {
        "update": {
          "x": {"signal": "hover.x"},
          "y": {"signal": "hover.y"},
          "opacity": {"signal": "!hover.x && !hover.y ? 0 : 1"}
        },
        "enter": {"size": {"value": 30}, "fill": {"value": "orange"}}
      }
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "time",
      "zero": false,
      "domain": {"signal": "xdom"},
      "range": {"signal": "xrange"}
    },
    {
      "name": "yscale",
      "zero": false,
      "domain": {"signal": "ydom"},
      "range": {"signal": "yrange"}
    }
  ],
  "axes": [
    {"scale": "xscale", "orient": "bottom", "grid": true},
    {
      "scale": "yscale",
      "orient": "left",
      "title": {"signal": "y_label"},
      "grid": true
    }
  ],
  "config": {
    "axisY": {
      "titleAngle": 0,
      "titleX": -10,
      "titleY": -10,
      "titleAlign": "left"
    }
  }  
}