{
"$schema": "https://vega.github.io/schema/vega/v3.json",
"width": 800,
"height": 200,
"padding": 5,
"data": [
{
"name": "voorland",
"values": [{"x": 20, "y": 7.5}, {"x": 60, "y": 6.6}, {"x": 92, "y": 8}],
"on": [
{"trigger": "addPoint", "insert": "addPoint"},
{"trigger": "remPoint", "remove": "remPoint"}
],
"transform": [{"type": "collect", "sort": {"field": "x"}}]
},
{
"name": "dijk",
"values": [
{"x": 92, "y": 8},
{"x": 100, "y": 11.5},
{"x": 103, "y": 12.2}
]
},
{
"name": "ruw_profiel",
"url": "https://ws.hkvservices.nl/continu-inzicht.ws/entry.asmx/Call?function=continuinzicht.daas.GetDataNearestDp¶meters={regio:%27ahn2_100m_rivieren%27,latitude:51.955613,longitude:5.603920,sridfrom:4326,sridto:28992,buffer:2000}",
"format": {"type": "json", "property": "ruw_profiel"}
},
{"name": "total", "source": ["voorland", "dijk", "ruw_profiel"]}
],
"signals": [
{
"name": "addPoint",
"on": [
{
"events": "click[!event.shiftKey], mousedown[event.buttons && !event.shiftKey]{20}",
"update": "{x: invert('xscale', x()), y: invert('yscale', y())}"
}
]
},
{
"name": "remPoint",
"on": [
{
"events": "click[event.shiftKey], mousedown[event.buttons && event.shiftKey]{20}",
"update": "datum"
}
]
},
{
"name": "dragging",
"value": null,
"on": [
{"events": "@voorland_point:mouseover", "update": "datum"},
{"events": "@voorland_point:mouseout", "update": "null"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "linear",
"range": "width",
"zero": false,
"domain": {"data": "total", "field": "x"}
},
{
"name": "yscale",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "total", "field": "y"}
}
],
"axes": [
{
"orient": "bottom",
"scale": "xscale",
"tickCount": 10,
"title": "Afstand [m]",
"grid": true,
"encode": {
"grid": {
"update": {"stroke": {"value": "#999"}, "strokeWidth": {"value": 0.1}}
},
"ticks": {"update": {"stroke": {"value": "black"}}},
"labels": {
"update": {
"fill": {"value": "black"},
"angle": {"value": 0},
"fontSize": {"value": 12}
}
},
"title": {"update": {"fontSize": {"value": 14}}},
"domain": {
"update": {"stroke": {"value": "black"}, "strokeWidth": {"value": 1}}
}
}
},
{
"orient": "left",
"scale": "yscale",
"tickCount": 6,
"title": "Hoogte [m+NAP]",
"grid": true,
"encode": {
"grid": {
"update": {"stroke": {"value": "#999"}, "strokeWidth": {"value": 0.1}}
},
"ticks": {"update": {"stroke": {"value": "black"}}},
"labels": {
"update": {
"fill": {"value": "black"},
"angle": {"value": 0},
"fontSize": {"value": 12}
}
},
"title": {"update": {"fontSize": {"value": 14}}},
"domain": {
"update": {"stroke": {"value": "black"}, "strokeWidth": {"value": 1}}
}
}
}
],
"title": {"text": "U4.prfl"},
"marks": [
{
"type": "line",
"interactive": false,
"from": {"data": "voorland"},
"encode": {
"update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
"stroke": {"value": "#ffcc66"},
"strokeWidth": {"value": 2}
}
}
},
{
"type": "line",
"interactive": false,
"from": {"data": "dijk"},
"encode": {
"update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
"stroke": {"value": "green"},
"strokeWidth": {"value": 2}
}
}
},
{
"type": "line",
"interactive": false,
"from": {"data": "ruw_profiel"},
"encode": {
"update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
"stroke": {"value": "black"},
"strokeWidth": {"value": 0.5}
}
}
},
{
"name": "voorland_point",
"type": "symbol",
"from": {"data": "voorland"},
"encode": {
"update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
"stroke": {"value": "#ffcc66"},
"fill": {"value": "#ffcc66"},
"strokeWidth": {"value": 1}
},
"hover": {
"strokeWidth": {"value": 5},
"stroke": {"value": "red"},
"fill": {"value": "red"}
}
}
},
{
"type": "symbol",
"from": {"data": "dijk"},
"encode": {
"update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
"stroke": {"value": "green"},
"fill": {"value": "green"},
"strokeWidth": {"value": 1}
},
"hover": {
"strokeWidth": {"value": 5},
"stroke": {"value": "red"},
"fill": {"value": "red"}
}
}
},
{
"type": "area",
"interactive": false,
"from": {"data": "voorland"},
"encode": {
"update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
"y2": {"scale": "yscale", "value": 0},
"fill": {"value": "#ffff66"},
"fillOpacity": {"value": 0.15}
}
}
},
{
"type": "area",
"interactive": false,
"from": {"data": "dijk"},
"encode": {
"update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
"y2": {"scale": "yscale", "value": 0},
"fill": {"value": "#1C991C"},
"fillOpacity": {"value": 0.15}
}
}
}
]
}