Cacher is the code snippet organizer for pro developers

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 600,
  "height": 400,
  "autosize": {
    "type": "fit",
    "resize": true
  },
  "padding": 5,
  "signals": [
    {"name": "sA", "value": "2015 (huidige situatie)"},
    {"name": "sB", "value": "2015 (scenario)"},
    {"name": "areaName", "value": "Hier gebeurd het"}
  ],
  "data": [
    {
      "name": "source",
      "url": "https://tsws.hkvservices.nl/mangrove.ws/entry.asmx/Execute?function=morp.appfunctions.GetLocationRisk&parameters=%7B%22appid%22:37,%22longitude%22:5.5426025390625,%22latitude%22:52.5496360743823%7D&uid=&token="
    },
    {
      "name": "probabilities",
      "source": "source",
      "transform": [
        {"type": "flatten", "fields": ["data"], "as": ["probabilities"]},
        {
          "type": "project",
          "fields": [
            "probabilities.name",
            "probabilities.category",
            "probabilities.probability",
            "probabilities.waterdepth",
            "probabilities.returnPeriod"
          ],
          "as": [
            "name",
            "category",
            "probability",
            "waterdepth",
            "returnPeriod"
          ]
        },
        {
          "type": "filter",
          "expr": "datum.category == sA | datum.category == sB"
        }
      ]
    },
    {
      "name": "probabilities_impute",
      "source": "probabilities",
      "transform": [
        {
          "type": "impute",
          "groupby": ["category"],
          "key": "waterDepth",
          "field": "returnPeriod",
          "method": "value",
          "value": null
        }
      ]
    },
    {
      "name": "probabilities_sA",
      "source": "probabilities_impute",
      "transform": [
        {"type": "filter", "expr": "datum.category == sA"},
        {"type": "formula", "expr": "null", "as": "y_sB"},
        {
          "type": "project",
          "fields": [
            "probability",
            "waterdepth",
            "returnPeriod",
            "y_sB"
          ],
          "as": [
            "probability",
            "waterDepth",
            "returnPeriod",
            "returnPeriod2"
          ]
        }
      ]
    },
    {
      "name": "probabilities_sB",
      "source": "probabilities_impute",
      "transform": [
        {"type": "filter", "expr": "datum.category == sB"},
        {"type": "formula", "expr": "null", "as": "y_sA"},
        {
          "type": "project",
          "fields": [
            "probability",
            "waterdepth",
            "y_sA",
            "returnPeriod"
          ],
          "as": [
            "probability",
            "waterDepth",
            "returnPeriod",
            "returnPeriod2"
          ]
        }
      ]
    },
    {
      "name": "probabilities_area",
      "source": ["probabilities_sA", "probabilities_sB"],
      "transform": [
        {
          "type": "collect",
          "sort": {
            "field": ["waterDepth", "probability"],
            "order": ["ascending", "descending"]
          }
        },
        {
          "type": "window",
          "ops": ["prev_value", "prev_value"],
          "fields": ["returnPeriod", "returnPeriod2"],
          "as": ["returnPeriod", "returnPeriod2"]
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "domain": {"data": "probabilities", "field": "waterdepth"},
      "range": [0, {"signal": "width"}]
    },
    {
      "name": "yscale",
      "type": "log",
      "range": "height",
      "nice": true,      
      "domain": {"data": "probabilities", "field": "returnPeriod"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "probabilities", "field": "category"},
      "range": ["#00A4E4", "#FFA560", "#57E56E", "#FF4747", "#FFF159"]
    },
    {
      "name": "color_area",
      "type": "ordinal",
      "domain": [{"signal": "areaName"}],
      "range": "category"     
    }   
  ],
  "axes": [
    {
      "scale": "xscale",
      "orient": "bottom",
      "gridScale": "yscale",
      "grid": false,
      "tickCount": {
        "signal": "ceil(width/40)"
      },
      "domain": false,
      "labels": false,
      "maxExtent": 0,
      "minExtent": 0,
      "ticks": false,
      "zindex": 0
    },
    {
      "scale": "xscale",
      "orient": "bottom",
      "grid": true,
      "title": "Overstromingsdiepte in meter",       

      "labelFlush": true,
      "labelOverlap": true,
      "tickCount": {
        "signal": "ceil(width/40)"
      },

      "zindex": 0,
      "encode": {
        "title": {
          "update": {
            "fontSize": {
              "value": 18
            }
          }
        },
        "labels": {
          "update": {
            "fontSize": {
              "value": 14
            }
          }
        }
      }
    },
    {
      "scale": "yscale",
      "format": "0.2f",
      "orient": "left",
      "grid": false,
      "title": "Overschrijdingskans per jaar",
      "labelOverlap": true,
    
      "tickCount": {
        "signal": "ceil(height/40)"
      },
      "zindex": 0,
      "encode": {
        "title": {
          "update": {
            "fontSize": {
              "value": 18
            }
          }
        },
        "labels": {
          "update": {
            "fontSize": {
              "value": 14
            }
          }
        }
      }
    }
  ],
  "marks": [
    {
      "type": "area",
      "from": {"data": "probabilities_area"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "waterDepth"},
          "y": {"scale": "yscale", "field": "returnPeriod"},
          "y2": {"scale": "yscale", "field": "returnPeriod2"},
          "fill": {"scale": "color_area", "signal": "areaName"},
          "fillOpacity": {"value": 0.25}
        }
      }
    },
    {
      "type": "group",
      "sort": {"field": "datum.probability"},
      "from": {
        "facet": {
          "name": "series",
          "data": "probabilities",
          "groupby": "category"
        }
      },
      "marks": [
        {
          "name": "marks",
          "type": "line",
          "style": ["line"],
          "from": {"data": "series"},
          "encode": {
            "update": {
              "stroke": {"scale": "color", "field": "category"},
              "x": {"scale": "xscale", "field": "waterdepth"},
              "y": {"scale": "yscale", "field": "returnPeriod"}
            }
          }
        },
        {
          "name": "points",
          "type": "symbol",
          "from": {"data": "series"},
          "encode": {
            "update": {
              "x": {"scale": "xscale", "field": "waterdepth"},
              "y": {"scale": "yscale", "field": "returnPeriod"},
              "shape": {"value": "circle"},
              "size": {"value": 60},
              "fill": {"scale": "color", "field": "category"},
              "tooltip": {
                "format": ".2f",
                "signal": "{\"Overstromingsdiepte\": ''+datum [\"waterdepth\"]+ \" m\" , \"Overschrijdingsfrequentie\": \"1 / \" +format(datum[\"returnPeriod\"], \".0f\")}"
              }              
            }
          }
        }
      ]
    }
  ],
  "legends": [
    {
      "stroke": "color",
      "title": "Scenario",
      "fill": "color"
    },
    {
      "stroke": "color_area",
      "title": "Range",
      "fill": "color_area",
      "symbolOpacity":0.5
    }    
  ]  
}