mattijn
12/14/2017 - 10:42 PM
vega3_som_EU_river_extremes
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"autosize": "pad",
"padding": 5,
"data": [
{
"name": "brush_store"
},
{
"name": "matrix_data",
"url": "https://rawgit.com/mattijn/datasets/master/eu_extreme_discharge_som.csv",
"format": {
"type": "csv",
"parse": {
"X": "number",
"Y": "number",
"U-matrix": "number",
"Annual maxima of daily discharge": "number",
"Annual maxima of daily precipitation": "number",
"Annual maxima of daily precipitation and snowmelt": "number",
"Annual maxima of daily snowmelt": "number",
"Annual maxima of daily total runoff coefficient": "number",
"Annual mean of daily discharge": "number",
"Annual mean of daily near-surface air temperature": "number",
"Annual mean of daily precipitation": "number",
"Annual mean of daily total runoff coefficient": "number",
"Area": "number",
"Average elevation": "number",
"Average water capacity": "number",
"Build-up areas": "number",
"Circularity": "number",
"Clay": "number",
"Confidence": "number",
"Eolian deposits": "number",
"Forests": "number",
"Glaciers": "number",
"Gravel": "number",
"Irrigated agriculture": "number",
"Lakes": "number",
"Marshes": "number",
"Peat": "number",
"River network density": "number",
"River slopeness": "number",
"Sand": "number",
"Silt": "number",
"Slopeness (average)": "number",
"Soil sealing": "number",
"Soil texture (dimensionless index from 1 to 13)": "number",
"Steepness (equation)": "number",
"Time of concentration": "number",
"Total area": "number",
"Unconsolidated deposits": "number",
"Total events in node": "number"
}
},
"transform": [
{
"type": "filter",
"expr": "datum['U-matrix'] <= filter_u_matrix"
}
]
},
{
"name": "map_data",
"url": "https://rawgit.com/mattijn/datasets/master/eu_extreme_discharge_locations.json",
"format": {
"type": "json",
"property": "features"
},
"transform": []
},
{
"name": "data_0",
"source": "matrix_data",
"transform": [
{
"type": "filter",
"expr": "!(length(data(\"brush_store\"))) || (vlInterval(\"brush_store\", datum))"
},
{
"type": "lookup",
"from": "map_data",
"key": "properties.som_key",
"fields": [
"XY"
],
"as": [
"geo"
]
},
{
"type": "filter",
"expr": "datum.geo"
},
{
"type": "formula",
"expr": "geoCentroid('projection', datum.geo)",
"as": "centroid"
},
{
"type": "filter",
"expr": "datum['U-matrix'] <= filter_u_matrix"
}
]
},
{
"name": "map_outline",
"url": "https://rawgit.com/mattijn/datasets/master/europe.topojson",
"format": {
"type": "topojson",
"feature": "europe"
}
}
],
"signals": [
{
"name": "matrix_x_step",
"value": 12
},
{
"name": "matrix_width",
"update": "bandspace(domain('matrix_x').length, 0, 0) * matrix_x_step"
},
{
"name": "matrix_y_step",
"value": 12
},
{
"name": "matrix_height",
"update": "bandspace(domain('matrix_y').length, 0, 0) * matrix_y_step"
},
{
"name": "matrix_x",
"value": 0
},
{
"name": "matrix_y",
"value": 0
},
{
"name": "map_width",
"value": 600
},
{
"name": "map_height",
"value": 600
},
{
"name": "variable",
"value": "Annual mean of daily precipitation",
"bind": {
"input": "select",
"options": [
"U-matrix",
"Annual maxima of daily discharge",
"Annual maxima of daily precipitation",
"Annual maxima of daily precipitation and snowmelt",
"Annual maxima of daily snowmelt",
"Annual maxima of daily total runoff coefficient",
"Annual mean of daily discharge",
"Annual mean of daily near-surface air temperature",
"Annual mean of daily precipitation",
"Annual mean of daily total runoff coefficient",
"Area",
"Average elevation",
"Average water capacity",
"Build-up areas",
"Circularity",
"Clay",
"Confidence",
"Eolian deposits",
"Forests",
"Glaciers",
"Gravel",
"Irrigated agriculture",
"Lakes",
"Marshes",
"Peat",
"River network density",
"River slopeness",
"Sand",
"Silt",
"Slopeness (average)",
"Soil sealing",
"Soil texture (dimensionless index from 1 to 13)",
"Steepness (equation)",
"Time of concentration",
"Total area",
"Unconsolidated deposits",
"Total events in node"
]
}
},
{
"name": "filter_u_matrix",
"value": 9.2,
"bind": {
"input": "range",
"min": 0.2,
"max": 9.2,
"step": 0.2
}
},
{
"name": "unit",
"value": {},
"on": [
{
"events": "mousemove",
"update": "isTuple(group()) ? group() : unit"
}
]
}
],
"projections": [
{
"name": "projection",
"type": "mercator",
"scale": 475,
"rotate": [
0,
0,
0
],
"center": [
7,
56
],
"translate": [
{
"signal": "map_width / 2"
},
{
"signal": "map_height / 2"
}
]
}
],
"layout": {
"padding": {
"row": 10,
"column": 10
},
"offset": 10,
"columns": 3,
"bounds": "full",
"align": "none"
},
"title": {
"text": "A self-organizing map of European rivers using variables representing the geographical characteristics of their catchments",
"orient": "top",
"anchor": "start"
},
"marks": [
{
"type": "group",
"name": "matrix_group",
"style": "cell",
"title": {
"text": "matrix element: create box to filter locations (use scroll to change box-size)",
"anchor": "start",
"orient": "bottom"
},
"encode": {
"update": {
"x": {
"signal": "matrix_x"
},
"y": {
"signal": "matrix_x"
},
"width": {
"signal": "matrix_width"
},
"height": {
"signal": "matrix_height"
}
}
},
"signals": [
{
"name": "brush_x",
"value": [],
"on": [
{
"events": {
"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)"
]
},
"update": "[x(unit), x(unit)]"
},
{
"events": {
"source": "window",
"type": "mousemove",
"consume": true,
"between": [
{
"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)"
]
},
{
"source": "window",
"type": "mouseup"
}
]
},
"update": "[brush_x[0], clamp(x(unit), 0, matrix_width)]"
},
{
"events": {
"signal": "brush_scale_trigger"
},
"update": "[0, 0]"
},
{
"events": {
"signal": "brush_translate_delta"
},
"update": "clampRange(panLinear(brush_translate_anchor.extent_x, brush_translate_delta.x / span(brush_translate_anchor.extent_x)), 0, matrix_width)"
},
{
"events": {
"signal": "brush_zoom_delta"
},
"update": "clampRange(zoomLinear(brush_x, brush_zoom_anchor.x, brush_zoom_delta), 0, matrix_width)"
}
]
},
{
"name": "brush_X",
"on": [
{
"events": {
"signal": "brush_x"
},
"update": "brush_x[0] === brush_x[1] ? null : invert(\"matrix_x\", brush_x)"
}
]
},
{
"name": "brush_y",
"value": [],
"on": [
{
"events": {
"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)"
]
},
"update": "[y(unit), y(unit)]"
},
{
"events": {
"source": "window",
"type": "mousemove",
"consume": true,
"between": [
{
"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)"
]
},
{
"source": "window",
"type": "mouseup"
}
]
},
"update": "[brush_y[0], clamp(y(unit), 0, matrix_height)]"
},
{
"events": {
"signal": "brush_scale_trigger"
},
"update": "[0, 0]"
},
{
"events": {
"signal": "brush_translate_delta"
},
"update": "clampRange(panLinear(brush_translate_anchor.extent_y, brush_translate_delta.y / span(brush_translate_anchor.extent_y)), 0, matrix_height)"
},
{
"events": {
"signal": "brush_zoom_delta"
},
"update": "clampRange(zoomLinear(brush_y, brush_zoom_anchor.y, brush_zoom_delta), 0, matrix_height)"
}
]
},
{
"name": "brush_Y",
"on": [
{
"events": {
"signal": "brush_y"
},
"update": "brush_y[0] === brush_y[1] ? null : invert(\"matrix_y\", brush_y)"
}
]
},
{
"name": "brush_scale_trigger",
"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_tuple",
"on": [
{
"events": [
{
"signal": "brush_X"
},
{
"signal": "brush_Y"
}
],
"update": "brush_X && brush_Y ? {unit: \"matrix_layer\", intervals: [{encoding: \"x\", field: \"X\", extent: brush_X}, {encoding: \"y\", field: \"Y\", extent: brush_Y}]} : null"
}
]
},
{
"name": "brush_translate_anchor",
"value": {},
"on": [
{
"events": [
{
"source": "scope",
"type": "mousedown",
"markname": "brush_brush"
}
],
"update": "{x: x(unit), y: y(unit), extent_x: slice(brush_x), extent_y: slice(brush_y)}"
}
]
},
{
"name": "brush_translate_delta",
"value": {},
"on": [
{
"events": [
{
"source": "window",
"type": "mousemove",
"consume": true,
"between": [
{
"source": "scope",
"type": "mousedown",
"markname": "brush_brush"
},
{
"source": "window",
"type": "mouseup"
}
]
}
],
"update": "{x: brush_translate_anchor.x - x(unit), y: brush_translate_anchor.y - y(unit)}"
}
]
},
{
"name": "brush_zoom_anchor",
"on": [
{
"events": [
{
"source": "scope",
"type": "wheel",
"consume": true,
"markname": "brush_brush"
}
],
"update": "{x: x(unit), y: y(unit)}"
}
]
},
{
"name": "brush_zoom_delta",
"on": [
{
"events": [
{
"source": "scope",
"type": "wheel",
"consume": true,
"markname": "brush_brush"
}
],
"force": true,
"update": "pow(1.001, event.deltaY * pow(16, event.deltaMode))"
}
]
},
{
"name": "brush_modify",
"on": [
{
"events": {
"signal": "brush_tuple"
},
"update": "modify(\"brush_store\", brush_tuple, true)"
}
]
}
],
"marks": [
{
"name": "brush_brush_bg",
"type": "rect",
"clip": true,
"encode": {
"enter": {
"fill": {
"value": "#333"
},
"fillOpacity": {
"value": 0.125
}
},
"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
}
]
}
}
},
{
"name": "matrix_layer_marks",
"type": "rect",
"style": [
"rect"
],
"from": {
"data": "matrix_data"
},
"encode": {
"update": {
"x": {
"scale": "matrix_x",
"field": "X"
},
"width": {
"scale": "matrix_x",
"band": 1,
"offset": -0.75
},
"y": {
"scale": "matrix_y",
"field": "Y"
},
"height": {
"scale": "matrix_y",
"band": 1,
"offset": -0.75
},
"fill": {
"scale": "color",
"field": {
"signal": "variable"
}
},
"fillOpacity": [
{
"test": "!(length(data(\"brush_store\"))) || (vlInterval(\"brush_store\", datum))",
"value": 1
},
{
"value": 0.25
}
],
"stroke": {
"value": "white"
},
"strokeWidth": {
"value": 0.25
}
},
"hover": {
"stroke": {
"value": "#000"
},
"strokeWidth": {
"value": 2
}
}
}
},
{
"name": "brush_brush",
"type": "rect",
"clip": true,
"encode": {
"enter": {
"fill": {
"value": "transparent"
},
"stroke": {
"value": "white"
}
},
"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
}
]
}
}
}
],
"axes": [
{
"scale": "matrix_x",
"orient": "bottom",
"labels": false,
"tickCount": 5,
"offset": 0,
"zindex": 1,
"encode": {
"domain": {
"update": {
"strokeWidth": {
"value": 0
}
}
},
"ticks": {
"update": {
"strokeWidth": {
"value": 0
}
}
}
}
},
{
"scale": "matrix_y",
"offset": 0,
"orient": "left",
"zindex": 1,
"labels": false,
"encode": {
"domain": {
"update": {
"strokeWidth": {
"value": 0
}
}
},
"ticks": {
"update": {
"strokeWidth": {
"value": 0
}
}
}
}
}
]
},
{
"type": "group",
"name": "map_group",
"style": "cell",
"title": {
"text": "map element",
"anchor": "start",
"orient": "top"
},
"encode": {
"update": {
"width": {
"signal": "map_width"
},
"height": {
"signal": "map_height"
},
"clip": {
"value": true
},
"fill": {
"value": "#3D3D3D"
}
}
},
"marks": [
{
"type": "shape",
"from": {
"data": "map_outline"
},
"encode": {
"enter": {
"stroke": {
"value": "#3D3D3D"
},
"strokeWidth": {
"value": 1
},
"fill": {
"value": "#030303"
}
}
},
"transform": [
{
"type": "geoshape",
"projection": "projection"
}
]
},
{
"name": "circles",
"type": "symbol",
"from": {
"data": "data_0"
},
"encode": {
"update": {
"fill": {
"scale": "color",
"field": {
"signal": "variable"
}
},
"size": {
"scale": "size",
"field": {
"signal": "variable"
}
},
"stroke": {
"value": "white"
},
"strokeWidth": {
"value": 0.2
},
"x": {
"field": "centroid[0]"
},
"y": {
"field": "centroid[1]"
},
"zindex": {
"value": 2
}
},
"hover": {
"strokeWidth": {
"value": 1.5
},
"stroke": {
"value": "black"
},
"zindex": {
"value": 3
}
}
}
}
]
}
],
"scales": [
{
"name": "size",
"domain": {
"fields": [
{
"data": "matrix_data",
"field": {
"signal": "variable"
}
}
],
"sort": true
},
"range": [
20,
100
]
},
{
"name": "color",
"type": "sequential",
"domain": {
"fields": [
{
"data": "matrix_data",
"field": {
"signal": "variable"
}
}
],
"sort": true
},
"range": [
"#3D3D3D",
"#F0F8FF",
"cornflowerblue",
"mediumseagreen",
"#FFEE00",
"darkorange",
"firebrick"
],
"nice": false,
"zero": false
},
{
"name": "matrix_x",
"type": "band",
"domain": {
"data": "matrix_data",
"field": "X",
"sort": true
},
"range": {
"step": {
"signal": "matrix_x_step"
}
},
"paddingInner": 0,
"paddingOuter": 0
},
{
"name": "matrix_y",
"type": "band",
"domain": {
"data": "matrix_data",
"field": "Y",
"sort": true
},
"range": {
"step": {
"signal": "matrix_y_step"
}
},
"paddingInner": 0,
"paddingOuter": 0
}
],
"legends": [
{
"fill": "color",
"encode": {
"title": {
"update": {
"fontSize": {
"value": 14
},
"limit": {
"value": 400
}
}
}
},
"title": {
"signal": "variable"
},
"type": "gradient"
}
],
"config": {
"axisY": {
"minExtent": 30
},
"style": {
"text": {
"baseline": "middle"
}
},
"legend": {
"offset": 30,
"orient": "bottom-left"
},
"title": {
"offset": 10,
"fontSize": 18
}
}
}