{ "$schema": "https://vega.github.io/schema/vega/v5.json", "background": "white", "padding": 5, "style": "cell", "data": [ {"name": "alex_store"}, {"name": "morgan_store"}, { "name": "source_0", "url": "data/cars.json", "format": {"type": "json"}, "transform": [ { "type": "aggregate", "groupby": ["Origin", "Cylinders"], "ops": ["count"], "fields": [null], "as": ["__count"] } ] } ], "signals": [ {"name": "x_step", "value": 20}, {"name": "width", "update": "bandspace(domain('x').length, 0, 0) * x_step"}, {"name": "y_step", "value": 20}, { "name": "height", "update": "bandspace(domain('y').length, 0, 0) * y_step" }, { "name": "unit", "value": {}, "on": [ {"events": "mousemove", "update": "isTuple(group()) ? group() : unit"} ] }, {"name": "alex", "update": "vlSelectionResolve(\"alex_store\", \"union\")"}, { "name": "morgan", "update": "vlSelectionResolve(\"morgan_store\", \"union\")" }, { "name": "alex_x", "value": [], "on": [ { "events": { "source": "scope", "type": "mousedown", "filter": [ "!event.shiftKey", "!event.item || event.item.mark.name !== \"alex_brush\"" ] }, "update": "[x(unit), x(unit)]" }, { "events": { "source": "scope", "type": "mousemove", "between": [ { "source": "scope", "type": "mousedown", "filter": [ "!event.shiftKey", "!event.item || event.item.mark.name !== \"alex_brush\"" ] }, {"source": "scope", "type": "mouseup"} ] }, "update": "[alex_x[0], clamp(x(unit), 0, width)]" }, {"events": {"signal": "alex_scale_trigger"}, "update": "[0, 0]"}, { "events": {"signal": "alex_translate_delta"}, "update": "clampRange(panLinear(alex_translate_anchor.extent_x, alex_translate_delta.x / span(alex_translate_anchor.extent_x)), 0, width)" }, { "events": {"signal": "alex_zoom_delta"}, "update": "clampRange(zoomLinear(alex_x, alex_zoom_anchor.x, alex_zoom_delta), 0, width)" }, { "events": [{"source": "scope", "type": "dblclick"}], "update": "[0, 0]" } ] }, { "name": "alex_Cylinders", "on": [ { "events": {"signal": "alex_x"}, "update": "alex_x[0] === alex_x[1] ? null : invert(\"x\", alex_x)" } ] }, { "name": "alex_y", "value": [], "on": [ { "events": { "source": "scope", "type": "mousedown", "filter": [ "!event.shiftKey", "!event.item || event.item.mark.name !== \"alex_brush\"" ] }, "update": "[y(unit), y(unit)]" }, { "events": { "source": "scope", "type": "mousemove", "between": [ { "source": "scope", "type": "mousedown", "filter": [ "!event.shiftKey", "!event.item || event.item.mark.name !== \"alex_brush\"" ] }, {"source": "scope", "type": "mouseup"} ] }, "update": "[alex_y[0], clamp(y(unit), 0, height)]" }, {"events": {"signal": "alex_scale_trigger"}, "update": "[0, 0]"}, { "events": {"signal": "alex_translate_delta"}, "update": "clampRange(panLinear(alex_translate_anchor.extent_y, alex_translate_delta.y / span(alex_translate_anchor.extent_y)), 0, height)" }, { "events": {"signal": "alex_zoom_delta"}, "update": "clampRange(zoomLinear(alex_y, alex_zoom_anchor.y, alex_zoom_delta), 0, height)" }, { "events": [{"source": "scope", "type": "dblclick"}], "update": "[0, 0]" } ] }, { "name": "alex_Origin", "on": [ { "events": {"signal": "alex_y"}, "update": "alex_y[0] === alex_y[1] ? null : invert(\"y\", alex_y)" } ] }, { "name": "alex_scale_trigger", "value": {}, "on": [ { "events": [{"scale": "x"}, {"scale": "y"}], "update": "(!isArray(alex_Cylinders) || (invert(\"x\", alex_x)[0] === alex_Cylinders[0] && invert(\"x\", alex_x)[1] === alex_Cylinders[1])) && (!isArray(alex_Origin) || (invert(\"y\", alex_y)[0] === alex_Origin[0] && invert(\"y\", alex_y)[1] === alex_Origin[1])) ? alex_scale_trigger : {}" } ] }, { "name": "alex_tuple", "on": [ { "events": [{"signal": "alex_Cylinders || alex_Origin"}], "update": "alex_Cylinders && alex_Origin ? {unit: \"\", fields: alex_tuple_fields, values: [alex_Cylinders,alex_Origin]} : null" } ] }, { "name": "alex_tuple_fields", "value": [ {"field": "Cylinders", "channel": "x", "type": "E"}, {"field": "Origin", "channel": "y", "type": "E"} ] }, { "name": "alex_translate_anchor", "value": {}, "on": [ { "events": [ { "source": "scope", "type": "mousedown", "filter": ["!event.shiftKey"], "markname": "alex_brush" } ], "update": "{x: x(unit), y: y(unit), extent_x: slice(alex_x), extent_y: slice(alex_y)}" } ] }, { "name": "alex_translate_delta", "value": {}, "on": [ { "events": [ { "source": "scope", "type": "mousemove", "between": [ { "source": "scope", "type": "mousedown", "filter": ["!event.shiftKey"], "markname": "alex_brush" }, {"source": "scope", "type": "mouseup"} ] } ], "update": "{x: alex_translate_anchor.x - x(unit), y: alex_translate_anchor.y - y(unit)}" } ] }, { "name": "alex_zoom_anchor", "on": [ { "events": [ { "source": "scope", "type": "wheel", "consume": true, "markname": "alex_brush" } ], "update": "{x: x(unit), y: y(unit)}" } ] }, { "name": "alex_zoom_delta", "on": [ { "events": [ { "source": "scope", "type": "wheel", "consume": true, "markname": "alex_brush" } ], "force": true, "update": "pow(1.001, event.deltaY * pow(16, event.deltaMode))" } ] }, { "name": "alex_modify", "on": [ { "events": {"signal": "alex_tuple"}, "update": "modify(\"alex_store\", alex_tuple, true)" } ] }, { "name": "morgan_x", "value": [], "on": [ { "events": { "source": "scope", "type": "mousedown", "filter": [ "event.shiftKey", "!event.item || event.item.mark.name !== \"morgan_brush\"" ] }, "update": "[x(unit), x(unit)]" }, { "events": { "source": "scope", "type": "mousemove", "between": [ { "source": "scope", "type": "mousedown", "filter": [ "event.shiftKey", "!event.item || event.item.mark.name !== \"morgan_brush\"" ] }, {"source": "scope", "type": "mouseup"} ] }, "update": "[morgan_x[0], clamp(x(unit), 0, width)]" }, {"events": {"signal": "morgan_scale_trigger"}, "update": "[0, 0]"}, { "events": {"signal": "morgan_translate_delta"}, "update": "clampRange(panLinear(morgan_translate_anchor.extent_x, morgan_translate_delta.x / span(morgan_translate_anchor.extent_x)), 0, width)" }, { "events": {"signal": "morgan_zoom_delta"}, "update": "clampRange(zoomLinear(morgan_x, morgan_zoom_anchor.x, morgan_zoom_delta), 0, width)" }, { "events": [{"source": "scope", "type": "dblclick"}], "update": "[0, 0]" } ] }, { "name": "morgan_Cylinders", "on": [ { "events": {"signal": "morgan_x"}, "update": "morgan_x[0] === morgan_x[1] ? null : invert(\"x\", morgan_x)" } ] }, { "name": "morgan_y", "value": [], "on": [ { "events": { "source": "scope", "type": "mousedown", "filter": [ "event.shiftKey", "!event.item || event.item.mark.name !== \"morgan_brush\"" ] }, "update": "[y(unit), y(unit)]" }, { "events": { "source": "scope", "type": "mousemove", "between": [ { "source": "scope", "type": "mousedown", "filter": [ "event.shiftKey", "!event.item || event.item.mark.name !== \"morgan_brush\"" ] }, {"source": "scope", "type": "mouseup"} ] }, "update": "[morgan_y[0], clamp(y(unit), 0, height)]" }, {"events": {"signal": "morgan_scale_trigger"}, "update": "[0, 0]"}, { "events": {"signal": "morgan_translate_delta"}, "update": "clampRange(panLinear(morgan_translate_anchor.extent_y, morgan_translate_delta.y / span(morgan_translate_anchor.extent_y)), 0, height)" }, { "events": {"signal": "morgan_zoom_delta"}, "update": "clampRange(zoomLinear(morgan_y, morgan_zoom_anchor.y, morgan_zoom_delta), 0, height)" }, { "events": [{"source": "scope", "type": "dblclick"}], "update": "[0, 0]" } ] }, { "name": "morgan_Origin", "on": [ { "events": {"signal": "morgan_y"}, "update": "morgan_y[0] === morgan_y[1] ? null : invert(\"y\", morgan_y)" } ] }, { "name": "morgan_scale_trigger", "value": {}, "on": [ { "events": [{"scale": "x"}, {"scale": "y"}], "update": "(!isArray(morgan_Cylinders) || (invert(\"x\", morgan_x)[0] === morgan_Cylinders[0] && invert(\"x\", morgan_x)[1] === morgan_Cylinders[1])) && (!isArray(morgan_Origin) || (invert(\"y\", morgan_y)[0] === morgan_Origin[0] && invert(\"y\", morgan_y)[1] === morgan_Origin[1])) ? morgan_scale_trigger : {}" } ] }, { "name": "morgan_tuple", "on": [ { "events": [{"signal": "morgan_Cylinders || morgan_Origin"}], "update": "morgan_Cylinders && morgan_Origin ? {unit: \"\", fields: morgan_tuple_fields, values: [morgan_Cylinders,morgan_Origin]} : null" } ] }, { "name": "morgan_tuple_fields", "value": [ {"field": "Cylinders", "channel": "x", "type": "E"}, {"field": "Origin", "channel": "y", "type": "E"} ] }, { "name": "morgan_translate_anchor", "value": {}, "on": [ { "events": [ { "source": "scope", "type": "mousedown", "filter": ["event.shiftKey"], "markname": "morgan_brush" } ], "update": "{x: x(unit), y: y(unit), extent_x: slice(morgan_x), extent_y: slice(morgan_y)}" } ] }, { "name": "morgan_translate_delta", "value": {}, "on": [ { "events": [ { "source": "scope", "type": "mousemove", "between": [ { "source": "scope", "type": "mousedown", "filter": ["event.shiftKey"], "markname": "morgan_brush" }, {"source": "scope", "type": "mouseup"} ] } ], "update": "{x: morgan_translate_anchor.x - x(unit), y: morgan_translate_anchor.y - y(unit)}" } ] }, { "name": "morgan_zoom_anchor", "on": [ { "events": [ { "source": "scope", "type": "wheel", "consume": true, "markname": "morgan_brush" } ], "update": "{x: x(unit), y: y(unit)}" } ] }, { "name": "morgan_zoom_delta", "on": [ { "events": [ { "source": "scope", "type": "wheel", "consume": true, "markname": "morgan_brush" } ], "force": true, "update": "pow(1.001, event.deltaY * pow(16, event.deltaMode))" } ] }, { "name": "morgan_modify", "on": [ { "events": {"signal": "morgan_tuple"}, "update": "modify(\"morgan_store\", morgan_tuple, true)" } ] } ], "marks": [ { "name": "morgan_brush_bg", "type": "rect", "clip": true, "encode": { "enter": {"fill": {"value": "#fdbb84"}, "fillOpacity": {"value": 0.5}}, "update": { "x": [ { "test": "data(\"morgan_store\").length && data(\"morgan_store\")[0].unit === \"\"", "signal": "morgan_x[0]" }, {"value": 0} ], "y": [ { "test": "data(\"morgan_store\").length && data(\"morgan_store\")[0].unit === \"\"", "signal": "morgan_y[0]" }, {"value": 0} ], "x2": [ { "test": "data(\"morgan_store\").length && data(\"morgan_store\")[0].unit === \"\"", "signal": "morgan_x[1]" }, {"value": 0} ], "y2": [ { "test": "data(\"morgan_store\").length && data(\"morgan_store\")[0].unit === \"\"", "signal": "morgan_y[1]" }, {"value": 0} ] } } }, { "name": "alex_brush_bg", "type": "rect", "clip": true, "encode": { "enter": {"fill": {"value": "#333"}, "fillOpacity": {"value": 0.125}}, "update": { "x": [ { "test": "data(\"alex_store\").length && data(\"alex_store\")[0].unit === \"\"", "signal": "alex_x[0]" }, {"value": 0} ], "y": [ { "test": "data(\"alex_store\").length && data(\"alex_store\")[0].unit === \"\"", "signal": "alex_y[0]" }, {"value": 0} ], "x2": [ { "test": "data(\"alex_store\").length && data(\"alex_store\")[0].unit === \"\"", "signal": "alex_x[1]" }, {"value": 0} ], "y2": [ { "test": "data(\"alex_store\").length && data(\"alex_store\")[0].unit === \"\"", "signal": "alex_y[1]" }, {"value": 0} ] } } }, { "name": "marks", "type": "rect", "style": ["rect"], "interactive": true, "from": {"data": "source_0"}, "encode": { "update": { "fill": [ { "test": "!(length(data(\"alex_store\")) || length(data(\"morgan_store\"))) || ((vlSelectionTest(\"alex_store\", datum)) || (vlSelectionTest(\"morgan_store\", datum)))", "scale": "color", "field": "__count" }, {"value": "grey"} ], "description": { "signal": "\"Origin: \" + (isValid(datum[\"Origin\"]) ? datum[\"Origin\"] : \"\"+datum[\"Origin\"]) + \"; Cylinders: \" + (isValid(datum[\"Cylinders\"]) ? datum[\"Cylinders\"] : \"\"+datum[\"Cylinders\"]) + \"; Count of Records: \" + (format(datum[\"__count\"], \"\"))" }, "x": {"scale": "x", "field": "Cylinders"}, "width": {"scale": "x", "band": 1}, "y": {"scale": "y", "field": "Origin"}, "height": {"scale": "y", "band": 1} } } }, { "name": "alex_brush", "type": "rect", "clip": true, "encode": { "enter": {"fill": {"value": "transparent"}}, "update": { "x": [ { "test": "data(\"alex_store\").length && data(\"alex_store\")[0].unit === \"\"", "signal": "alex_x[0]" }, {"value": 0} ], "y": [ { "test": "data(\"alex_store\").length && data(\"alex_store\")[0].unit === \"\"", "signal": "alex_y[0]" }, {"value": 0} ], "x2": [ { "test": "data(\"alex_store\").length && data(\"alex_store\")[0].unit === \"\"", "signal": "alex_x[1]" }, {"value": 0} ], "y2": [ { "test": "data(\"alex_store\").length && data(\"alex_store\")[0].unit === \"\"", "signal": "alex_y[1]" }, {"value": 0} ], "stroke": [ { "test": "alex_x[0] !== alex_x[1] && alex_y[0] !== alex_y[1]", "value": "white" }, {"value": null} ] } } }, { "name": "morgan_brush", "type": "rect", "clip": true, "encode": { "enter": {"fill": {"value": "transparent"}}, "update": { "x": [ { "test": "data(\"morgan_store\").length && data(\"morgan_store\")[0].unit === \"\"", "signal": "morgan_x[0]" }, {"value": 0} ], "y": [ { "test": "data(\"morgan_store\").length && data(\"morgan_store\")[0].unit === \"\"", "signal": "morgan_y[0]" }, {"value": 0} ], "x2": [ { "test": "data(\"morgan_store\").length && data(\"morgan_store\")[0].unit === \"\"", "signal": "morgan_x[1]" }, {"value": 0} ], "y2": [ { "test": "data(\"morgan_store\").length && data(\"morgan_store\")[0].unit === \"\"", "signal": "morgan_y[1]" }, {"value": 0} ], "stroke": [ { "test": "morgan_x[0] !== morgan_x[1] && morgan_y[0] !== morgan_y[1]", "value": "#e34a33" }, {"value": null} ] } } } ], "scales": [ { "name": "x", "type": "band", "domain": {"data": "source_0", "field": "Cylinders", "sort": true}, "range": {"step": {"signal": "x_step"}}, "paddingInner": 0, "paddingOuter": 0 }, { "name": "y", "type": "band", "domain": {"data": "source_0", "field": "Origin", "sort": true}, "range": {"step": {"signal": "y_step"}}, "paddingInner": 0, "paddingOuter": 0 }, { "name": "color", "type": "linear", "domain": {"data": "source_0", "field": "__count"}, "range": "heatmap", "interpolate": "hcl", "zero": false } ], "axes": [ { "scale": "x", "orient": "bottom", "grid": false, "title": "Cylinders", "labelAlign": "right", "labelAngle": 270, "labelBaseline": "middle", "zindex": 1 }, { "scale": "y", "orient": "left", "grid": false, "title": "Origin", "zindex": 1 } ], "legends": [ { "fill": "color", "gradientLength": {"signal": "clamp(height, 64, 200)"}, "title": "Count of Records" } ]}