mattijn
12/3/2017 - 10:12 PM
vega3_matrix_chart_combo_fwd.json
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"autosize": "pad",
"padding": 5,
"data": [
{
"name": "brush_store"
},
{
"name": "source_0",
"url": "https://rawgit.com/mattijn/datasets/master/codebook.json",
"format": {
"type": "json"
}
},
{
"name": "data_0",
"source": "source_0",
"transform": [
{
"type": "filter",
"expr": "!(length(data(\"brush_store\"))) || (vlInterval(\"brush_store\", datum))"
},
{
"type": "extent", "field": "X",
"signal": "extent"
},
{
"type": "bin", "signal": "bins",
"field": "X", "extent": {"signal": "extent"},
"maxbins": 10
}
]
}
],
"signals": [
{
"name": "concat_0_x_step",
"value": 7
},
{
"name": "concat_0_width",
"update": "bandspace(domain('concat_0_x').length, 0, 0) * concat_0_x_step"
},
{
"name": "concat_0_y_step",
"value": 7
},
{
"name": "concat_0_height",
"update": "bandspace(domain('concat_0_y').length, 0, 0) * concat_0_y_step"
},
{
"name": "concat_0_x",
"value": 0
},
{
"name": "concat_0_y",
"value": 0
},
{
"name": "concat_1_x_step",
"value": 7
},
{
"name": "concat_1_width",
"update": "bandspace(domain('concat_1_x').length, 0, 0) * concat_1_x_step"
},
{
"name": "concat_1_y_step",
"value": 7
},
{
"name": "concat_1_height",
"update": "bandspace(domain('concat_1_y').length, 0, 0) * concat_1_y_step"
},
{
"name": "parameter",
"value": "aa",
"bind": {
"input": "select",
"options": [
"aa",
"ac",
"ap",
"au",
"bd",
"bh",
"bi"
]
}
},
{
"name": "unit",
"value": {},
"on": [
{
"events": "mousemove",
"update": "isTuple(group()) ? group() : unit"
}
]
}
],
"layout": {
"padding": {
"row": 10,
"column": 10
},
"offset": 10,
"columns": 2,
"bounds": "full",
"align": "none"
},
"marks": [
{
"type": "group",
"name": "concat_0_group",
"style": "cell",
"encode": {
"update": {
"x": {
"signal": "concat_0_x"
},
"y": {
"signal": "concat_0_x"
},
"width": {
"signal": "concat_0_width"
},
"height": {
"signal": "concat_0_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, concat_0_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, concat_0_width)"
},
{
"events": {
"signal": "brush_zoom_delta"
},
"update": "clampRange(zoomLinear(brush_x, brush_zoom_anchor.x, brush_zoom_delta), 0, concat_0_width)"
}
]
},
{
"name": "brush_X",
"on": [
{
"events": {
"signal": "brush_x"
},
"update": "brush_x[0] === brush_x[1] ? null : invert(\"concat_0_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, concat_0_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, concat_0_height)"
},
{
"events": {
"signal": "brush_zoom_delta"
},
"update": "clampRange(zoomLinear(brush_y, brush_zoom_anchor.y, brush_zoom_delta), 0, concat_0_height)"
}
]
},
{
"name": "brush_Y",
"on": [
{
"events": {
"signal": "brush_y"
},
"update": "brush_y[0] === brush_y[1] ? null : invert(\"concat_0_y\", brush_y)"
}
]
},
{
"name": "brush_scale_trigger",
"update": "(!isArray(brush_X) || (invert(\"concat_0_x\", brush_x)[0] === brush_X[0] && invert(\"concat_0_x\", brush_x)[1] === brush_X[1])) && (!isArray(brush_Y) || (invert(\"concat_0_y\", brush_y)[0] === brush_Y[0] && invert(\"concat_0_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: \"concat_0_layer_0\", 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 === \"concat_0_layer_0\"",
"signal": "brush_x[0]"
},
{
"value": 0
}
],
"y": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0_layer_0\"",
"signal": "brush_y[0]"
},
{
"value": 0
}
],
"x2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0_layer_0\"",
"signal": "brush_x[1]"
},
{
"value": 0
}
],
"y2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0_layer_0\"",
"signal": "brush_y[1]"
},
{
"value": 0
}
]
}
}
},
{
"name": "concat_0_layer_0_marks",
"type": "rect",
"style": [
"rect"
],
"from": {
"data": "source_0"
},
"encode": {
"update": {
"x": {
"scale": "concat_0_x",
"field": "X"
},
"width": {
"scale": "concat_0_x",
"band": 1,
"offset": 0
},
"y": {
"scale": "concat_0_y",
"field": "Y"
},
"height": {
"scale": "concat_0_y",
"band": 1,
"offset": 0
},
"fill": [
{
"test": "!(length(data(\"brush_store\"))) || (vlInterval(\"brush_store\", datum))",
"scale": "color",
"field": {
"signal": "parameter"
}
},
{
"value": "grey"
}
],
"stroke": {
"value": "white"
},
"strokeWidth": {
"value": 0.15
}
}
}
},
{
"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 === \"concat_0_layer_0\"",
"signal": "brush_x[0]"
},
{
"value": 0
}
],
"y": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0_layer_0\"",
"signal": "brush_y[0]"
},
{
"value": 0
}
],
"x2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0_layer_0\"",
"signal": "brush_x[1]"
},
{
"value": 0
}
],
"y2": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"concat_0_layer_0\"",
"signal": "brush_y[1]"
},
{
"value": 0
}
]
}
}
}
],
"axes": [
{
"scale": "concat_0_x",
"orient": "bottom",
"labels": false,
"tickCount": 5,
"offset": 0,
"zindex": 1,
"encode": {
"domain": {
"update": {
"strokeWidth": {
"value": 0
}
}
},
"ticks": {
"update": {
"strokeWidth": {
"value": 0
}
}
}
}
},
{
"scale": "concat_0_y",
"offset": 0,
"orient": "left",
"zindex": 1,
"labels": false,
"encode": {
"domain": {
"update": {
"strokeWidth": {
"value": 0
}
}
},
"ticks": {
"update": {
"strokeWidth": {
"value": 0
}
}
}
}
} ]
},
{
"type": "group",
"name": "concat_1_group",
"style": "cell",
"encode": {
"update": {
"width": {
"signal": "concat_1_width"
},
"height": {
"signal": "concat_1_height"
}
}
},
"marks": [
{
"name": "concat_1_marks",
"type": "rect",
"style": [
"bar"
],
"from": {
"data": "data_0"
},
"encode": {
"update": {
"x": {
"scale": "concat_1_x",
"field": "X"
},
"width": {
"scale": "concat_1_x",
"band": 1,
"offset": 0
},
"y": {
"scale": "concat_1_y",
"field": "Y"
},
"height": {
"scale": "concat_1_y",
"band": 1,
"offset": 0
},
"fill": {
"scale": "color",
"field": {
"signal": "parameter"
}
}
}
}
}
],
"axes": [
{
"scale": "concat_1_x",
"orient": "bottom",
"labels": false,
"tickCount": 5,
"offset": 0,
"zindex": 1,
"encode": {
"domain": {
"update": {
"strokeWidth": {
"value": 0
}
}
},
"ticks": {
"update": {
"strokeWidth": {
"value": 0
}
}
}
}
},
{
"scale": "concat_1_y",
"offset": 0,
"orient": "left",
"zindex": 1,
"labels": false,
"encode": {
"domain": {
"update": {
"strokeWidth": {
"value": 0
}
}
},
"ticks": {
"update": {
"strokeWidth": {
"value": 0
}
}
}
}
}
]
}
],
"scales": [
{
"name": "color",
"type": "sequential",
"domain": {
"fields": [
{
"data": "source_0",
"field": {
"signal": "parameter"
}
}
],
"sort": true
},
"range": "heatmap",
"nice": false,
"zero": false
},
{
"name": "concat_0_x",
"type": "band",
"domain": {
"data": "source_0",
"field": "X",
"sort": true
},
"range": {
"step": {
"signal": "concat_0_x_step"
}
},
"paddingInner": 0,
"paddingOuter": 0
},
{
"name": "concat_0_y",
"type": "band",
"domain": {
"data": "source_0",
"field": "Y",
"sort": true
},
"range": {
"step": {
"signal": "concat_0_y_step"
}
},
"paddingInner": 0,
"paddingOuter": 0
},
{
"name": "concat_1_x",
"type": "band",
"domain": {
"data": "data_0",
"field": "X",
"sort": true
},
"range": {
"step": {
"signal": "concat_1_x_step"
}
},
"paddingInner": 0,
"paddingOuter": 0
},
{
"name": "concat_1_y",
"type": "band",
"domain": {
"data": "data_0",
"field": "Y",
"sort": true
},
"range": {
"step": {
"signal": "concat_1_y_step"
}
},
"paddingInner": 0,
"paddingOuter": 0
}
],
"legends": [
{
"fill": "color",
"orient":"bottom-left",
"title": "Number of Records",
"type": "gradient"
}
],
"config": {
"axisY": {
"minExtent": 30
},
"style": {
"text": {
"baseline": "middle"
}
}
}
}