Cacher is the code snippet organizer for pro developers

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 500,
  "height": 300,
  "autosize": "none",

 "signals": [
    { "name": "tx", "update": "width / 2" },
    { "name": "ty", "update": "height / 2" },
    {
      "name": "scale",
      "value": 15000,
      "on": [{
        "events": {"type": "wheel", "consume": true},
        "update": "clamp(scale * pow(1.0025, -event.deltaY * pow(16, event.deltaMode)), 15000, 1000000)"
      }]
    },
    {
      "name": "angles",
      "value": [0, 0],
      "on": [{
        "events": "mousedown",
        "update": "[rotateX, centerY]"
      }]
    },
    {
      "name": "cloned",
      "value": null,
      "on": [{
        "events": "mousedown",
        "update": "copy('projection')"
      }]
    },
    {
      "name": "start",
      "value": null,
      "on": [{
        "events": "mousedown",
        "update": "invert(cloned, xy())"
      }]
    },
    {
      "name": "drag", "value": null,
      "on": [{
        "events": "[mousedown, window:mouseup] > window:mousemove",
        "update": "invert(cloned, xy())"
      }]
    },
    {
      "name": "delta", "value": null,
      "on": [{
        "events": {"signal": "drag"},
        "update": "[drag[0] - start[0], start[1] - drag[1]]"
      }]
    },
    {
      "name": "rotateX", "value": 0,
      "on": [{
        "events": {"signal": "delta"},
        "update": "angles[0] + delta[0]"
      }]
    },
    {
      "name": "centerY", "value": 53.203693,
      "on": [{
        "events": {"signal": "delta"},
        "update": "clamp(angles[1] + delta[1], -60, 60)"
      }]
    }
  ],

  "data": [
    {
      "name": "baggervakken",
      "url": "https://rawgit.com/mattijn/datasets/master/prioritering_refined_wgs84.geojson",
      "format": {
        "type": "json",
        "property": "features"
      },
      "transform":[
        {
          "type": "formula", "expr": "geoCentroid('projection', datum)","as": "centroid"
        }        
      ]
    },
    {
      "name": "graticule",
      "transform": [
        { "type": "graticule", "step": [0.25, 0.15] }
      ]
    }    
  ],  
  "projections": [
    {
      "name": "projection",
      "type": "mercator",
      "scale": {"signal": "scale"},
      "rotate": [{"signal": "rotateX"}, 0, 0],
      "center": [5.509454, {"signal": "centerY"}],
      "translate": [{"signal": "width / 2"}, {"signal": "height / 2"}]
    }
  ],

  "scales": [
    {
      "name": "size",
      "domain": {"data": "baggervakken", "field": "properties.Percentage_cut_tov_NGD"},
      "range": [0, 2000]
    },
    {
      "name": "color",
      "type": "sequential",
      "nice": true,
      "domain": {"data": "baggervakken", "field": "properties.Percentage_cut_tov_NGD"},
      "range": {"scheme": "RedYellowGreen"},
      "reverse":true
    }
  ],

  "legends": [
    {
      "title": "% requires dredging",
      "orient": "bottom-right",
      "type": "gradient",
      "fill": "color",
      "format": "f"
    }
  ],
  "marks": [

    {
      "type": "shape",
      "from": {"data": "graticule"},
      "encode": {
        "enter": {
          "strokeWidth": {"value": 1},
          "stroke": {"value": "#ddd"},
          "fill": {"value": null}
        }
      },
      "transform": [
        { "type": "geoshape", "projection": "projection" }
      ]
    },        
    {
      "type": "shape",
      "from": {
        "data": "baggervakken"
      },
      "encode": {
        "update": {
          "strokeWidth": {"value": 1},
          "stroke": {"value": "#777"},
          "fill": {"value": "transparent"}
        }
      },
      "transform": [
        {
          "type": "geoshape", "projection": "projection"
        }
      ]
    },
    {
      "name": "circles",
      "type": "symbol",
      "from": {"data": "baggervakken"},
      "encode": {
        "update": {
          "size": {"scale": "size", "field": "properties.Percentage_cut_tov_NGD"},
          "fill": {"scale": "color", "field": "properties.Percentage_cut_tov_NGD"},
          "stroke": {"value": "white"},
          "strokeWidth": {"value": 1.5},
          "x": {"field": "centroid[0]"},
          "y": {"field": "centroid[1]"},
          "tooltip": {"signal": "format(datum.properties.Percentage_cut_tov_NGD, '.0f')+'% of `'+format(datum.properties.Objectnaam, 'c')+'` requires dredging according to Nautic Guaranteed Depth'"},
          "zindex": {"value": 2}
        },
        "hover": {
          "strokeWidth": {"value": 1.5},
          "stroke": {"value": "black"},
          "zindex": {"value": 3}
        }        
      },
      "transform": [
        {
          "type": "force",
          "static": true,
          "forces": [
            {"force": "collide", "radius": {"expr": "1 + sqrt(datum.size) / 3"}},
            {"force": "x", "x": "datum.centroid[0]"},
            {"force": "y", "y": "datum.centroid[1]"}
          ]
        }
      ]
    }    
  ]
}