mattijn
11/23/2017 - 10:12 PM
vega3_init_group_matrix_chart_EU.json
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"autosize": "pad",
"padding": 5,
"signals": [
{
"name": "kaart_width",
"value": 450
},
{
"name": "kaart_height",
"value": 400
},
{
"name": "matrix_location_x",
"value": 460
},
{
"name": "matrix_location_y",
"value": 0
},
{
"name": "matrix_x_step",
"value": 5
},
{
"name": "matrix_y_step",
"value": 5
},
{
"name": "matrix_width",
"update": "bandspace(domain('x').length, 0, -0.05) * matrix_x_step"
},
{
"name": "matrix_height",
"update": "bandspace(domain('y').length, 0, -0.05) * matrix_y_step"
},
{
"name": "WSO1_ID_key",
"value": [
324225,
358063
],
"bind": {
"input": "select",
"options": [
[
324225,
358063
],
[
712080,
712122,
717062,
722244
],
[
246838,
249259,
406541,
415472,
415883,
418315,
419896,
420039,
420834,
422115,
423441,
426972,
426996,
428470,
509086,
516560,
534160
]
]
}
},
{
"name": "parameter",
"value": "aa",
"bind": {
"input": "select",
"options": [
"aa",
"ac",
"ap",
"au",
"bd",
"bh",
"bi"
]
}
}
],
"data": [
{
"name": "matrix_data",
"url": "https://rawgit.com/mattijn/datasets/master/codebook.json",
"format": {
"type": "json"
}
},
{
"name": "kaart_data",
"url": "https://rawgit.com/mattijn/datasets/master/locations.json",
"format": {
"type": "json",
"property": "features"
},
"transform": [
{
"type": "filter",
"expr": "indexof(WSO1_ID_key, datum.properties.WSO1_ID) > -1"
},
{
"type": "formula",
"expr": "geoCentroid('projection', datum)",
"as": "centroid"
}
]
},
{
"name": "kaart_outline",
"url": "https://rawgit.com/mattijn/datasets/master/europe.topojson",
"format": {
"type": "topojson",
"feature": "europe"
}
}
],
"projections": [
{
"name": "projection",
"type": "mercator",
"scale": 350,
"rotate": [
0,
0,
0
],
"center": [
7,
53
],
"translate": [
{
"signal": "kaart_width / 2"
},
{
"signal": "kaart_height / 2"
}
]
}
],
"marks": [
{
"type": "group",
"name": "kaart",
"encode": {
"enter": {
"height": {
"signal": "kaart_height"
},
"width": {
"signal": "kaart_width"
},
"fill": {
"value": "#DAE3F4"
}
}
},
"marks": [
{
"type": "group",
"encode": {
"enter": {
"height": {
"field": {
"group": "height"
}
},
"width": {
"field": {
"group": "width"
}
},
"clip": {
"value": true
}
}
},
"marks": [
{
"type": "shape",
"from": {
"data": "kaart_outline"
},
"encode": {
"enter": {
"strokeWidth": {
"value": 0.2
},
"stroke": {
"value": "#CFDAF6"
},
"fill": {
"value": "#203864"
}
}
},
"transform": [
{
"type": "geoshape",
"projection": "projection"
}
]
},
{
"name": "circles",
"type": "symbol",
"from": {
"data": "kaart_data"
},
"encode": {
"enter": {
"fill": {
"value": "green"
},
"tooltip": {
"signal": "format(datum.properties.station, 'c')+' '+format(datum.properties.WSO1_ID, 'c')"
}
},
"update": {
"size": {
"value": 150
},
"stroke": {
"value": "white"
},
"strokeWidth": {
"value": 1.5
},
"x": {
"field": "centroid[0]"
},
"y": {
"field": "centroid[1]"
},
"zindex": {
"value": 2
}
},
"hover": {
"strokeWidth": {
"value": 1.5
},
"stroke": {
"value": "black"
},
"zindex": {
"value": 3
}
}
}
}
]
}
]
},
{
"type": "group",
"name": "matrix",
"encode": {
"enter": {
"x": {
"signal": "matrix_location_x"
},
"y": {
"signal": "matrix_location_y"
},
"height": {
"signal": "matrix_height"
},
"width": {
"signal": "matrix_width"
},
"fill": {
"value": "red"
}
}
},
"scales": [
{
"name": "matrix_x_scale",
"type": "band",
"domain": {
"data": "matrix_data",
"field": "X",
"sort": true
},
"range": {
"step": {
"signal": "matrix_x_step"
}
}
},
{
"name": "matrix_y_scale",
"type": "band",
"domain": {
"data": "matrix_data",
"field": "Y",
"sort": true
},
"range": {
"step": {
"signal": "matrix_y_step"
}
}
},
{
"name": "color",
"type": "sequential",
"domain": {
"data": "matrix_data",
"field": {
"signal": "parameter"
}
},
"range": {
"scheme": "yellowgreenblue"
},
"reverse": false
}
],
"axes": [
{
"scale": "matrix_x_scale",
"orient": "bottom",
"labels": false,
"tickCount": 5,
"offset": 0,
"zindex": 1,
"encode": {
"domain": {
"update": {
"strokeWidth": {
"value": 0
}
}
},
"ticks": {
"update": {
"strokeWidth": {
"value": 0
}
}
}
}
},
{
"scale": "matrix_y_scale",
"offset": 0,
"orient": "left",
"zindex": 1,
"labels": false,
"encode": {
"domain": {
"update": {
"strokeWidth": {
"value": 0
}
}
},
"ticks": {
"update": {
"strokeWidth": {
"value": 0
}
}
}
}
}
],
"legends": [
{
"fill": "color",
"encode": {
"labels": {
"update": {
"limit": {
"value": 256
}
}
}
},
"orient": "right",
"title": {
"signal": "parameter"
},
"type": "symbol"
}
],
"marks": [
{
"name": "matrix",
"type": "rect",
"from": {
"data": "matrix_data"
},
"encode": {
"update": {
"x": {
"scale": "matrix_x_scale",
"field": "X"
},
"y": {
"scale": "matrix_y_scale",
"field": "Y"
},
"width": {
"scale": "matrix_x_scale",
"band": 1,
"offset": 0
},
"height": {
"scale": "matrix_y_scale",
"band": 1,
"offset": 0
},
"fill": {
"scale": "color",
"field": {
"signal": "parameter"
}
},
"tooltip": {
"signal": "'XY coord:'+format(datum.XY, 'c')+' list:['+format(datum.locs, 'c')+']'"
},
"stroke": {
"value": "#000"
},
"strokeWidth": {
"value": 0.075
}
},
"hover": {
"stroke": {
"value": "#000"
},
"strokeWidth": {
"value": 0.75
}
}
}
}
]
}
]
}