Cacher is the code snippet organizer for pro developers

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 500,
  "height": 400,
  "padding": {
    "top": 10,
    "left": 30,
    "bottom": 50,
    "right": 10
  },
  "autosize": "none",
  "data": [
    {
      "name": "table",
      "values": [
        {
          "u": 0,
          "v": 38,
          "c": 32
        },
        {
          "u": 2,
          "v": 31,
          "c": 32
        },
        {
          "u": 4,
          "v": 32,
          "c": 32
        },
        {
          "u": 6,
          "v": 27,
          "c": 32
        },
        {
          "u": 8,
          "v": 38,
          "c": 32
        },
        {
          "u": 10,
          "v": 33,
          "c": 32
        },
        {
          "u": 12,
          "v": 39,
          "c": 32
        },
        {
          "u": 14,
          "v": 34,
          "c": 32
        },
        {
          "u": 16,
          "v": 27,
          "c": 32
        },
        {
          "u": 18,
          "v": 39,
          "c": 32
        }
      ],
      "transform": [     
        {
          "type": "extent",
          "field": "u",
          "signal": "xext"
        },
        {
          "type": "extent",
          "field": "v",
          "signal": "yext"
        }
      ]
    },
    {
      "name": "voronMean",
      "source": "table",
      "transform": [ 
        {
          "type": "aggregate",
          "ops": [
            "mean"
          ],
          "fields": [
            "v"
          ],
          "as": [
            "mean_v"
          ]
        } ,
        {
          "type": "formula",
          "expr": "datum.v - datum.mean_v",
          "as": "voron_v"
        } 
      ]
    },
    {
      "name": "highlightedPoint",
      "source": "table",
      "transform": [
        {
          "type": "filter",
          "expr": "hovervoron && hovervoron.datum.u === datum.u && hovervoron.datum.c === datum.c"
        }
      ]
    }
  ],  
  "signals": [    
    {
      "name": "hover",
      "on": [
        {"events": "*:mouseover", "encode": "hover"},
        {"events": "*:mouseout",  "encode": "leave"},
        {"events": "*:mousedown", "encode": "select"},
        {"events": "*:mouseup",   "encode": "release"}
      ]
    },    
    {
      "name": "hovervoron",
      "value": null,
      "on": [                 
        {
          "events": "*:mouseover",
          "update": "datum"
        },           
        {
          "events": "*:mouseout",
          "update": "null"
        }
      ]
    },
    {
    "name": "title",
    "value": "x y", 
    "update": "hovervoron ? 'x: ' + format(hovervoron.datum.u, ',.2f') + ' y: ' + format(hovervoron.datum.v, ',.2f')  : 'hover for value'"
  },    
    {
      "name": "yLocationHighligthed", 
      "update": "hovervoron ? - height + hovervoron.y  : -15"
    },  
    {
      "name": "xoffset",
      "update": "-(height + padding.bottom)"
    },
    {
      "name": "yoffset",
      "update": "-(width + padding.left)"
    },
    {
      "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": 2,
      "on": [
        {
          "events": "wheel!",
          "force": true,
          "update": "pow(1.005, 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)",
      "react": false,
      "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)",
      "react": false,
      "on": [
        {
          "events": {
            "signal": "delta"
          },
          "update": "[ycur[0] + span(ycur) * delta[1] / height, ycur[1] + span(ycur) * delta[1] / height]"
        },
        {
          "events": {
            "signal": "zoom"
          },
          "update": "[anchor[1] + (ydom[0] - anchor[1]) * zoom, anchor[1] + (ydom[1] - anchor[1]) * zoom]"
        }
      ]
    },
    {
      "name": "size",
      "update": "clamp(20 / span(xdom), 1, 1000)"
    },
    {
      "name": "x_scale_move",
      "value": 4,
      "on": [
        {
          "events": "mousemove",
          "update": "invert('xscale', clamp(x(), 0, width))"
        }
      ]
    }    
  ],
  "scales": [
    {
      "name": "xscale",
      "zero": false,
      "domain": {
        "signal": "xdom"
      },
      "range": {
        "signal": "xrange"
      }
    },
    {
      "name": "yscale",
      "type": "linear",
      "zero": false,
      "domain": {
        "signal": "ydom"
      },
      "range": {
        "signal": "yrange"
      }
    }
  ],
  "axes": [
    {
      "scale": "xscale",
      "orient": "bottom",
      "domain": true,
      "encode": {
        "labels": {
          "enter": {
            "font": {
              "value": "Monaco, Courier New"
            }
          }
        }
      }
    },
    {
      "scale": "yscale",
      "orient": "left",
      "domain": true,
      "encode": {
        "labels": {
          "enter": {
            "font": {
              "value": "Monaco, Courier New"
            }
          }
        }
      }
    }
  ],
  "marks": [
    {
      "type": "line",
      "from": {
        "data": "table"
      },   
      "encode": {
        "update": {
          "x": {
            "scale": "xscale",
            "field": "u"
          },
          "y": {
            "scale": "yscale",
            "field": "v"
          },
          "stroke":{"value":"#00B4AA"},
          "strokeWidth": {
            "signal": "size"
          }
        }
      },
      "clip": true
    },
    {
      "name": "points",
      "type": "symbol",
      "zindex": 1,
      "from": {"data": "table"},
      "interactive": false,
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "u"},
          "y": {"scale": "yscale", "field": "v"},
         "size": {
            "value": 100
          },
          "shape": {
            "value": "circle"
          },
          "opacity": {
            "value": 1.0
          },
          "strokeWidth": {
            "value": 1.5
          },
          "stroke": {
            "value": "white"
          },
          "fill": {
            "value": "steelblue"
          },
          "fillOpacity": {
            "value": 0.5
          }          
        }
      },
      "clip": true
    },
    {
      "name": "voron",
      "type": "symbol",
      "role": "point",
      "from": {
        "data": "table"
      },
      "interactive": false,   
      "encode": {
        "update": {
          "fill": {"value": "gray"},
          "size": {"value": 36},
          "x": {"scale": "xscale", "field": "u"},
          "y": {"scale": "yscale", "field": "c"}
        }
      },
      "clip": true
    },    
    {
      "type": "path",
      "from": {"data": "voron"},
      "encode": {
        "update": {
          "fill": {"value": "transparent"},
          "stroke": {"value": "firebrick"},
          "strokeWidth": {"value": 0.35},
          "opacity":{"value":1}
        }
      },
      "transform": [
        {
          "type": "voronoi",
          "x": "datum.x", "y": "datum.y",
          "size": [{"signal": "width"}, {"signal": "height"}]
        }
      ]
    },
    {
      "type": "symbol",
      "from": {
        "data": "highlightedPoint"
      },
      "interactive": false,
      "encode": {
        "update": {
          "x": {
            "scale": "xscale",
            "field": "u"
          },
          "y": {
            "scale": "yscale",
            "field": "v"
          },
          "strokeWidth": {
            "value": 30
          },
          "size": {
            "value": 250
          },
          "stroke": {
            "value": "#00B4AA"
          },
          "strokeOpacity": {
            "value": 0.3
          },
          "tooltip": {
            "field": "tooltip"
          }
        }
      },
      "clip": true
    },    
    {
      "type": "rule",
      "interactive": false,
      "encode": {
        "update": {
          "x": {
            "scale": "xscale",
            "signal": "x_scale_move",
            "offset": 0.5
          },
          "y": {
            "value": 0
          },
          "y2": {
            "signal": "height"
          },
          "stroke": {
            "value": "orange"
          },
          "strokeWidth": {
            "value": 2
          },
          "opacity": {
            "value": 1
          }
        }
      }
    },
    {
      "type": "group",
      "encode": {
        "update": {
          "x": {
            "scale": "xscale",
            "signal": "x_scale_move",
            "offset": 10
          },
          "y2": {
            "field": {
              "group": "height"
            },
            "offset": 10
          }
        }
      },
      "marks": [
        {
          "type": "text",
          "encode": {
            "update": {
              "x": {
                "field": "tooltip"
              },
              "y": {
                "signal":"yLocationHighligthed"
              },
         "text": {
            "signal": "title"
          },
              "fontSize": {
                "value": 16
              },
              "align": {
                "value": "left"
              }
            }
          }
        }
      ]
    }      
  ]
}