mattijn
10/15/2018 - 1:44 PM
vega4_pr2877_20_som.json
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"layout": {
"columns": 2,
"align": "none",
"offset": 10,
"padding": {"row": 10, "column": 10},
"bounds": "full"
},
"data": [
{"name": "brush_store"},
{
"transform": [
{"expr": "datum['U-matrix'] <= filter_u_matrix", "type": "filter"}
],
"url": "https://dmws.hkvservices.nl/dataportal/data.asmx/read?database=PR2877_21&key=somT1T2",
"name": "matrix_data",
"format": {
"parse": {
"U-matrix": "number",
"korreldiameter": "number",
"number of transects": "number",
"m3 aanzanding in duingebied": "number",
"X": "number",
"strandbreedte ": "number",
"helling buitentalud": "number",
"strandhelling": "number",
"Y": "number",
"orientatie": "number",
"XY": "number"
},
"type": "csv",
"delimiter": ","
}
},
{
"url": "https://dmws.hkvservices.nl/dataportal/data.asmx/read?database=PR2877_21&key=transectsT1T2",
"name": "map_data",
"format": {"property": "features", "type": "json"}
},
{
"url": "https://dmws.hkvservices.nl/dataportal/data.asmx/read?database=PR2877_20&key=transect_outline",
"name": "map_transect_outline",
"format": {"type": "json", "property": "features"}
},
{
"url": "https://dmws.hkvservices.nl/dataportal/data.asmx/read?database=PR2877_20&key=transect_centerpoint",
"name": "map_transect_centerpoint",
"format": {"type": "json"}
},
{
"transform": [
{"expr": "toNumber(datum[\"lon\"])", "type": "formula", "as": "lon"},
{"expr": "toNumber(datum[\"lat\"])", "type": "formula", "as": "lat"},
{
"as": ["layer_1_layer_1_x", "layer_1_layer_1_y"],
"fields": ["lon", "lat"],
"type": "geopoint",
"projection": "projection"
}
],
"source": "map_transect_centerpoint",
"name": "geopoint_transect_centerpoint"
},
{"source": "matrix_data", "name": "matrix_data_static"},
{
"transform": [
{
"expr": "!(length(data(\"brush_store\"))) || (vlInterval(\"brush_store\", datum))",
"type": "filter"
},
{
"from": "map_data",
"key": "properties.som_key",
"fields": ["XY"],
"type": "lookup",
"as": ["geo"]
},
{"expr": "datum.geo", "type": "filter"},
{
"expr": "geoCentroid('projection', datum.geo)",
"type": "formula",
"as": "centroid"
},
{"expr": "datum['U-matrix'] <= filter_u_matrix", "type": "filter"},
{
"sort": {"field": {"signal": "variable"}, "order": "descending"},
"type": "collect"
}
],
"source": "matrix_data",
"name": "data_0"
},
{
"transform": [
{
"from": "map_data",
"key": "properties.som_key",
"fields": ["XY"],
"type": "lookup",
"as": ["geo"]
},
{"expr": "datum.geo", "type": "filter"},
{
"expr": "geoCentroid('projection', datum.geo)",
"type": "formula",
"as": "centroid"
},
{"expr": "datum['U-matrix'] <= filter_u_matrix", "type": "filter"},
{
"sort": {"field": {"signal": "variable"}, "order": "descending"},
"type": "collect"
}
],
"source": "matrix_data",
"name": "data_1"
},
{
"url": "https://raw.githubusercontent.com/mattijn/datasets/master/provinces_NL.json",
"name": "map_outline",
"format": {"property": "features", "type": "json"}
}
],
"marks": [
{
"style": "cell",
"axes": [
{
"labels": false,
"offset": 0,
"zindex": 1,
"scale": "matrix_x",
"encode": {
"domain": {"update": {"strokeWidth": {"value": 0}}},
"ticks": {"update": {"strokeWidth": {"value": 0}}}
},
"orient": "bottom",
"tickCount": 5
},
{
"labels": false,
"offset": 0,
"zindex": 1,
"scale": "matrix_y",
"encode": {
"domain": {"update": {"strokeWidth": {"value": 0}}},
"ticks": {"update": {"strokeWidth": {"value": 0}}}
},
"orient": "left"
}
],
"name": "matrix_group",
"type": "group",
"marks": [
{
"encode": {
"update": {
"x": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"matrix_layer\"",
"signal": "brush_x[0]"
},
{"value": 0}
],
"y": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"matrix_layer\"",
"signal": "brush_y[0]"
},
{"value": 0}
],
"x2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"matrix_layer\"",
"signal": "brush_x[1]"
},
{"value": 0}
],
"y2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"matrix_layer\"",
"signal": "brush_y[1]"
},
{"value": 0}
]
},
"enter": {
"fillOpacity": {"value": 0.125},
"fill": {"value": "#333"}
}
},
"name": "brush_brush_bg",
"type": "rect",
"clip": true
},
{
"encode": {
"update": {
"x": {"scale": "matrix_x", "field": "X"},
"y": {"scale": "matrix_y", "field": "Y"},
"fill": {"scale": "color", "field": {"signal": "variable"}},
"stroke": {"value": "white"},
"strokeWidth": {"value": 0.25},
"fillOpacity": [
{
"value": 1,
"test": "!(length(data(\"brush_store\"))) || (vlInterval(\"brush_store\", datum))"
},
{"value": 0.25}
],
"width": {"scale": "matrix_x", "offset": -0.25, "band": 1},
"height": {"scale": "matrix_y", "offset": -0.25, "band": 1}
},
"hover": {"stroke": {"value": "#000"}, "strokeWidth": {"value": 2}}
},
"style": ["rect"],
"from": {"data": "matrix_data"},
"name": "matrix_layer_marks",
"type": "rect"
},
{
"encode": {
"update": {
"x": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"matrix_layer\"",
"signal": "brush_x[0]"
},
{"value": 0}
],
"y": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"matrix_layer\"",
"signal": "brush_y[0]"
},
{"value": 0}
],
"x2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"matrix_layer\"",
"signal": "brush_x[1]"
},
{"value": 0}
],
"y2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"matrix_layer\"",
"signal": "brush_y[1]"
},
{"value": 0}
]
},
"enter": {
"stroke": {"value": "white"},
"fill": {"value": "transparent"}
}
},
"name": "brush_brush",
"type": "rect",
"clip": true
}
],
"signals": [
{
"value": [],
"name": "brush_x",
"on": [
{
"update": "[x(unit), x(unit)]",
"events": [
{
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\"",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)"
],
"source": "scope",
"type": "mousedown"
},
{
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\"",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)"
],
"source": "scope",
"type": "touchstart"
}
]
},
{
"update": "[brush_x[0], clamp(x(unit), 0, matrix_width)]",
"events": [
{
"source": "window",
"consume": true,
"type": "mousemove",
"between": [
{
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\"",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)"
],
"source": "scope",
"type": "mousedown"
},
{"source": "window", "type": "mouseup"}
]
},
{
"source": "window",
"consume": true,
"type": "touchmove",
"between": [
{
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\"",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)"
],
"source": "scope",
"type": "touchstart"
},
{"source": "window", "type": "touchend"}
]
}
]
},
{"update": "[0, 0]", "events": {"signal": "brush_scale_trigger"}},
{
"update": "clampRange(panLinear(brush_translate_anchor.extent_x, brush_translate_delta.x / span(brush_translate_anchor.extent_x)), 0, matrix_width)",
"events": {"signal": "brush_translate_delta"}
},
{
"update": "clampRange(zoomLinear(brush_x, brush_zoom_anchor.x, brush_zoom_delta), 0, matrix_width)",
"events": {"signal": "brush_zoom_delta"}
}
]
},
{
"name": "brush_X",
"on": [
{
"update": "brush_x[0] === brush_x[1] ? null : invert(\"matrix_x\", brush_x)",
"events": {"signal": "brush_x"}
}
]
},
{
"value": [],
"name": "brush_y",
"on": [
{
"update": "[y(unit), y(unit)]",
"events": [
{
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\"",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)"
],
"source": "scope",
"type": "mousedown"
},
{
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\"",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)"
],
"source": "scope",
"type": "touchstart"
}
]
},
{
"update": "[brush_y[0], clamp(y(unit), 0, matrix_height)]",
"events": [
{
"source": "window",
"consume": true,
"type": "mousemove",
"between": [
{
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\"",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)"
],
"source": "scope",
"type": "mousedown"
},
{"source": "window", "type": "mouseup"}
]
},
{
"source": "window",
"consume": true,
"type": "touchmove",
"between": [
{
"filter": [
"!event.item || event.item.mark.name !== \"brush_brush\"",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)",
"inScope(event.item)"
],
"source": "scope",
"type": "touchstart"
},
{"source": "window", "type": "touchend"}
]
}
]
},
{"update": "[0, 0]", "events": {"signal": "brush_scale_trigger"}},
{
"update": "clampRange(panLinear(brush_translate_anchor.extent_y, brush_translate_delta.y / span(brush_translate_anchor.extent_y)), 0, matrix_height)",
"events": {"signal": "brush_translate_delta"}
},
{
"update": "clampRange(zoomLinear(brush_y, brush_zoom_anchor.y, brush_zoom_delta), 0, matrix_height)",
"events": {"signal": "brush_zoom_delta"}
}
]
},
{
"name": "brush_Y",
"on": [
{
"update": "brush_y[0] === brush_y[1] ? null : invert(\"matrix_y\", brush_y)",
"events": {"signal": "brush_y"}
}
]
},
{
"update": "(!isArray(brush_X) || (invert(\"matrix_x\", brush_x)[0] === brush_X[0] && invert(\"matrix_x\", brush_x)[1] === brush_X[1])) && (!isArray(brush_Y) || (invert(\"matrix_y\", brush_y)[0] === brush_Y[0] && invert(\"matrix_y\", brush_y)[1] === brush_Y[1])) ? brush_scale_trigger : {}",
"name": "brush_scale_trigger"
},
{
"name": "brush_tuple",
"on": [
{
"update": "brush_X && brush_Y ? {unit: \"matrix_layer\", intervals: [{encoding: \"x\", field: \"X\", extent: brush_X}, {encoding: \"y\", field: \"Y\", extent: brush_Y}]} : null",
"events": [{"signal": "brush_X"}, {"signal": "brush_Y"}]
}
]
},
{
"value": {},
"name": "brush_translate_anchor",
"on": [
{
"update": "{x: x(unit), y: y(unit), extent_x: slice(brush_x), extent_y: slice(brush_y)}",
"events": [
{
"source": "scope",
"type": "mousedown",
"markname": "brush_brush"
},
{
"source": "scope",
"type": "touchstart",
"markname": "brush_brush"
}
]
}
]
},
{
"value": {},
"name": "brush_translate_delta",
"on": [
{
"update": "{x: brush_translate_anchor.x - x(unit), y: brush_translate_anchor.y - y(unit)}",
"events": [
{
"source": "window",
"consume": true,
"type": "mousemove",
"between": [
{
"source": "scope",
"type": "mousedown",
"markname": "brush_brush"
},
{"source": "window", "type": "mouseup"}
]
},
{
"source": "window",
"consume": true,
"type": "touchmove",
"between": [
{
"source": "scope",
"type": "touchstart",
"markname": "brush_brush"
},
{"source": "window", "type": "touchend"}
]
}
]
}
]
},
{
"name": "brush_zoom_anchor",
"on": [
{
"update": "{x: x(unit), y: y(unit)}",
"events": [
{
"source": "scope",
"consume": true,
"type": "wheel",
"markname": "brush_brush"
},
{
"filter": "event.touches.length===2",
"source": "scope",
"consume": true,
"type": "touchstart",
"markname": "brush_brush"
}
]
}
]
},
{
"name": "brush_zoom_delta",
"on": [
{
"update": "pow(1.001, event.deltaY * pow(16, event.deltaMode))",
"events": [
{
"source": "scope",
"consume": true,
"type": "wheel",
"markname": "brush_brush"
}
],
"force": true
},
{
"update": "dist1 / dist2",
"events": {"signal": "dist2"},
"force": true
}
]
},
{
"name": "brush_modify",
"on": [
{
"update": "modify(\"brush_store\", brush_tuple, true)",
"events": {"signal": "brush_tuple"}
}
]
},
{
"value": 0,
"name": "dist2",
"on": [
{
"update": "pinchDistance(event)",
"events": {
"filter": "event.touches.length===2",
"type": "touchstart"
}
},
{"update": "dist1", "events": {"signal": "dist1"}}
]
},
{
"value": 0,
"name": "dist1",
"on": [
{
"update": "pinchDistance(event)",
"events": {
"filter": "event.touches.length===2",
"consume": true,
"type": "touchmove"
}
}
]
}
],
"encode": {
"update": {
"x": {"signal": "matrix_x"},
"y": {"signal": "matrix_y"},
"width": {"signal": "matrix_width"},
"height": {"signal": "matrix_height"}
}
}
},
{
"style": "cell",
"title": {"anchor": "start", "text": "map element", "orient": "top"},
"name": "map_group",
"type": "group",
"marks": [
{
"transform": [{"type": "geoshape", "projection": "projection"}],
"from": {"data": "map_outline"},
"encode": {
"enter": {
"stroke": {"value": "#3D3D3D"},
"fill": {"value": "#030303"},
"strokeWidth": {"value": 1}
}
},
"type": "shape"
},
{
"transform": [{"type": "geoshape", "projection": "projection"}],
"encode": {
"enter": {
"fillOpacity": {"value": 0.8},
"stroke": {"value": "lightgray"},
"fill": {"value": "gray"},
"strokeWidth": {"value": 2}
}
},
"from": {"data": "map_transect_outline"},
"name": "geoshape_transect_outline",
"type": "shape"
},
{
"encode": {
"enter": {
"x": {"field": "layer_1_layer_1_x"},
"fontSize": {"value": 13},
"fill": {"value": "white"},
"text": {"field": "profieltype"},
"y": {"field": "layer_1_layer_1_y"},
"baseline": {"value": "middle"},
"dx": {"value": -40},
"dy": {"value": -10},
"fontWeight": {"value": "bold"},
"align": {"value": "center"}
}
},
"interactive": false,
"from": {"data": "geopoint_transect_centerpoint"},
"type": "text"
},
{
"encode": {
"update": {
"stroke": {"value": "white"},
"x": {"field": "centroid[0]"},
"fill": {"value": "white"},
"y": {"field": "centroid[1]"},
"strokeWidth": {"value": 0.2},
"zindex": {"value": 2},
"size": {"value": 20}
},
"hover": {
"stroke": {"value": "black"},
"strokeWidth": {"value": 1.5},
"zindex": {"value": 3}
}
},
"from": {"data": "data_1"},
"name": "circles_static",
"type": "symbol"
},
{
"encode": {
"update": {
"stroke": {"value": "white"},
"x": {"field": "centroid[0]"},
"fill": {"scale": "color", "field": {"signal": "variable"}},
"y": {"field": "centroid[1]"},
"strokeWidth": {"value": 0.2},
"zindex": {"value": 2},
"size": {"scale": "size", "field": {"signal": "variable"}}
},
"hover": {
"stroke": {"value": "black"},
"strokeWidth": {"value": 1.5},
"zindex": {"value": 3}
}
},
"from": {"data": "data_0"},
"name": "circles",
"type": "symbol"
}
],
"encode": {
"update": {
"fill": {"value": "white"},
"width": {"signal": "map_width"},
"clip": {"value": true},
"height": {"signal": "map_height"}
}
}
}
],
"title": {"anchor": "start", "text": "T1T2", "orient": "top"},
"config": {
"style": {"text": {"baseline": "middle"}},
"title": {"fontSize": 18, "offset": 10},
"legend": {"orient": "bottom", "offset": 30},
"axisY": {"minExtent": 30}
},
"padding": 5,
"scales": [
{
"range": [50, 1500],
"domain": {
"fields": [{"data": "matrix_data", "field": {"signal": "variable"}}],
"sort": true
},
"name": "size"
},
{
"domain": {
"fields": [{"data": "matrix_data", "field": {"signal": "variable"}}],
"sort": true
},
"name": "color",
"type": "sequential",
"zero": false,
"range": [
"#3D3D3D",
"#F0F8FF",
"cornflowerblue",
"mediumseagreen",
"#FFEE00",
"darkorange",
"firebrick"
],
"nice": false
},
{
"paddingOuter": 0,
"paddingInner": 0,
"domain": {"data": "matrix_data_static", "field": "X", "sort": true},
"name": "matrix_x",
"type": "band",
"range": {"step": {"signal": "matrix_x_step"}}
},
{
"paddingOuter": 0,
"paddingInner": 0,
"domain": {"data": "matrix_data_static", "field": "Y", "sort": true},
"name": "matrix_y",
"type": "band",
"range": {"step": {"signal": "matrix_y_step"}}
}
],
"signals": [
{"value": 10, "name": "matrix_x_step"},
{"value": 600, "name": "matrix_width"},
{"value": 10, "name": "matrix_y_step"},
{"value": 500, "name": "matrix_height"},
{"value": 0, "name": "matrix_x"},
{"value": 0, "name": "matrix_y"},
{"value": 400, "name": "map_width"},
{"value": 500, "name": "map_height"},
{
"value": "U-matrix",
"name": "variable",
"bind": {
"input": "select",
"options": [
"U-matrix",
"helling buitentalud",
"strandhelling",
"korreldiameter",
"m3 aanzanding",
"orientatie",
"strandbreedte ",
"number of transects"
]
}
},
{
"value": 2,
"name": "filter_u_matrix",
"bind": {"input": "range", "step": 0.1, "min": 0.2, "max": 2}
},
{
"value": {},
"name": "unit",
"on": [
{
"update": "isTuple(group()) ? group() : unit",
"events": [{"type": "mousemove"}, {"type": "touchmove"}]
}
]
}
],
"autosize": "pad",
"legends": [
{
"fill": "color",
"orient": "none",
"encode": {
"legend": {"enter": {"x": {"value": 612}, "y": {"value": 525}}},
"title": {
"update": {"fontSize": {"value": 20}, "limit": {"value": 600}}
}
},
"title": {"signal": "variable"},
"type": "gradient",
"direction": "horizontal",
"gradientLength": 400,
"labelOffset": 10,
"labelFontSize": 25
}
],
"projections": [
{
"rotate": [0, 0, 0],
"scale": 280000,
"name": "projection",
"type": "mercator",
"translate": [{"signal": "map_width / 2"}, {"signal": "map_height / 2"}],
"center": [4.645169, 52.748243]
}
]
}