Cacher is the code snippet organizer for pro developers

{
  "schema": {
    "language": "vega",
    "version": "3.0"
  },
  "width": 500,
  "height": 300,
  "padding": {
    "top": 0,
    "left": 0,
    "right": 0,
    "bottom": 0
  },
  "data": [
    {
      "name": "points",
      "values": [
        {
          "y": 10,
          "x": 0,
          "z": 12.4170319576795
        },
        {
          "y": 10,
          "x": 14707.9677734375,
          "z": 11.0252979743922
        },
        {
          "y": 10,
          "x": 24409.978515625,
          "z": 9.47221753147811
        },
        {
          "y": 10,
          "x": 33685.5,
          "z": 8.68576461191986
        }
      ],
      "transform": [
        {
          "type": "formula",
          "expr": "'(' + datum.x + '), (' + datum.z + ')'",
          "as": "tooltip"
        }
      ]
    },
    {
      "name": "highlightedPoint",
      "source": "points",
      "transform": [
        {
          "type": "filter",
          "expr": "hover && hover.datum.x === datum.x && hover.datum.z === datum.z"
        }
      ]
    }
  ],
  "signals": [
    {
      "name": "hover",
      "value": null,
      "on": [
        {
          "events": "@cell:mouseover",
          "update": "datum"
        },
        {
          "events": "@cell:mouseout",
          "update": "null"
        }
      ]
    },
    {
      "name": "title",
      "value": "x z",
      "update": "hover ? 'x: ' + format(hover.datum.x, ',.2f') + ' z: ' + format(hover.datum.z, ',.2f')  : 'hover for value'"
    },
    {
      "name": "zLocationHighligthed",
      "value": "z",
      "update": "hover ? - height + hover.y  : -15"
    },
    {
      "name": "xLocationHighligthed",
      "value": "x",
      "update": "hover ? width - hover.x  : 0"
    },
    {
      "name": "x_scale_move",
      "value": 4,
      "on": [
        {
          "events": "mousemove",
          "update": "invert('xscale', clamp(x(), 0, width))"
        }
      ]
    },
    {
      "name": "cell_stroke",
      "value": null,
      "on": [
        {
          "events": "dblclick",
          "update": "cell_stroke ? null : 'brown'"
        },
        {
          "events": "mousedown!",
          "update": "cell_stroke"
        }
      ]
    }        
  ],
  "marks": [
    {
      "name": "symbols",
      "type": "symbol",
      "role": "point",
      "from": {
        "data": "points"
      },
      "interactive": false,
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "z"
          },
          "size": {
            "value": 100
          },
          "shape": {
            "value": "circle"
          },
          "opacity": {
            "value": 1
          },
          "strokeWidth": {
            "value": 1.5
          },
          "stroke": {
            "value": "white"
          },
          "fill": {
            "value": "steelblue"
          },
          "fillOpacity": {
            "value": 0.5
          }
        }
      }
    },
    {
      "name": "voron",
      "type": "symbol",
      "role": "point",
      "from": {
        "data": "points"
      },
      "interactive": false,
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "y"
          },
          "size": {
            "value": 10
          },
          "stroke": {
            "value": "brown"
          },       
          "opacity": {"value":0.5}
        }
      }
    },
    {
      "type": "path",
      "name": "cell",
      "from": {
        "data": "voron"
      },
      "encode": {
        "enter": {
          "fill": {
            "value": "transparent"
          },
          "stroke": {
            "value": "red"
          },
          "strokeWidth": {
            "value": 0.35
          }
        },
        "update": {
          "path": {
            "field": "path"
          },
          "stroke": {
            "signal": "cell_stroke"
          },
          "fill": {
            "value": "rgba(0,0,0,0)"
          }
        }
      },
      "transform": [
        {
          "type": "voronoi",
          "x": "datum.x",
          "y": "datum.y",
          "size": [
            {
              "signal": "width"
            },
            {
              "signal": "height"
            }
          ]
        }
      ]
    },
    {
      "type": "symbol",
      "from": {
        "data": "highlightedPoint"
      },
      "interactive": false,
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "z"
          },
          "strokeWidth": {
            "value": 30
          },
          "size": {
            "value": 250
          },
          "stroke": {
            "value": "#00B4AA"
          },
          "strokeOpacity": {
            "value": 0.3
          },
          "tooltip": {
            "field": "tooltip"
          }
        }
      }
    },
    {
      "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": "zLocationHighligthed"
              },
              "text": {
                "signal": "title"
              },
              "fontSize": {
                "value": 16
              },
              "align": {
                "value": "left"
              }
            }
          }
        }
      ]
    },
    {
      "type": "line",
      "from": {
        "data": "points"
      },
      "interactive": false,
      "encode": {
        "enter": {
          "x": {
            "scale": "xscale",
            "field": "x"
          },
          "y": {
            "scale": "yscale",
            "field": "z"
          },
          "stroke": {
            "value": "#00B4AA"
          }
        }
      }
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "range": "width",
      "zero": false,
      "domain": {
        "data": "points",
        "field": "x"
      }
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "round": true,
      "nice": true,
      "zero": false,
      "domain": {
        "data": "points",
        "field": "z"
      }
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "format": "f",
      "scale": "xscale",
      "title": "x",
      "titlePadding": -4,
      "offset": 10,
      "grid": true,
      "zindex": 0
    },
    {
      "scale": "yscale",
      "format": "f",
      "orient": "left",
      "title": "z",
      "grid": true,
      "offset": 10,
      "zindex": 0
    }
  ]
}