Created
January 18, 2020 09:16
-
-
Save jandot/57bf8ecc269bc38689f234bdc2afb4f3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"$schema": "https://vega.github.io/schema/vega/v5.json", | |
"data": [ | |
{"name": "my_selection_store"}, | |
{ | |
"name": "cars", | |
"url": "https://raw.githubusercontent.com/vega/vega/master/docs/data/cars.json", | |
"format": {"type": "json"} | |
} | |
], | |
"signals": [ | |
{"name": "plot0_width", "value": 200}, | |
{"name": "plot0_height", "value": 200}, | |
{"name": "plot1_width", "value": 200}, | |
{"name": "plot1_height", "value": 200}, | |
{ | |
"name": "unit", | |
"value": {}, | |
"on": [ | |
{"events": "mousemove", "update": "isTuple(group()) ? group() : unit"} | |
] | |
}, | |
{ | |
"name": "my_selection", | |
"update": "vlSelectionResolve(\"my_selection_store\", \"union\")" | |
} | |
], | |
"layout": {"padding": 20, "bounds": "full", "align": "each"}, | |
"marks": [ | |
{ | |
"type": "group", | |
"name": "plot0_group", | |
"style": "cell", | |
"encode": { | |
"update": { | |
"width": {"signal": "plot0_width"}, | |
"height": {"signal": "plot0_height"} | |
} | |
}, | |
"signals": [ | |
{ | |
"name": "my_selection_x", | |
"value": [], | |
"on": [ | |
{ | |
"events": { | |
"source": "scope", | |
"type": "mousedown", | |
"filter": [ | |
"event.item.mark.name !== \"my_selection_brush\"" | |
] | |
}, | |
"update": "[x(unit), x(unit)]" | |
}, | |
{ | |
"events": { | |
"source": "window", | |
"type": "mousemove", | |
"consume": true, | |
"between": [ | |
{ | |
"source": "scope", | |
"type": "mousedown", | |
"filter": [ | |
"event.item.mark.name !== \"my_selection_brush\"" | |
] | |
}, | |
{"source": "window", "type": "mouseup"} | |
] | |
}, | |
"update": "[my_selection_x[0], clamp(x(unit), 0, plot0_width)]" | |
}, | |
{ | |
"events": {"signal": "my_selection_translate_delta"}, | |
"update": "clampRange(panLinear(my_selection_translate_anchor.extent_x, my_selection_translate_delta.x / span(my_selection_translate_anchor.extent_x)), 0, plot0_width)" | |
} | |
] | |
}, | |
{ | |
"name": "my_selection_Weight_in_lbs", | |
"on": [ | |
{ | |
"events": {"signal": "my_selection_x"}, | |
"update": "my_selection_x[0] === my_selection_x[1] ? null : invert(\"plot0_x\", my_selection_x)" | |
} | |
] | |
}, | |
{ | |
"name": "my_selection_y", | |
"value": [], | |
"on": [ | |
{ | |
"events": { | |
"source": "scope", | |
"type": "mousedown", | |
"filter": [ | |
"event.item.mark.name !== \"my_selection_brush\"" | |
] | |
}, | |
"update": "[y(unit), y(unit)]" | |
}, | |
{ | |
"events": { | |
"source": "window", | |
"type": "mousemove", | |
"consume": true, | |
"between": [ | |
{ | |
"source": "scope", | |
"type": "mousedown", | |
"filter": [ | |
"event.item.mark.name !== \"my_selection_brush\"" | |
] | |
}, | |
{"source": "window", "type": "mouseup"} | |
] | |
}, | |
"update": "[my_selection_y[0], clamp(y(unit), 0, plot0_height)]" | |
}, | |
{ | |
"events": {"signal": "my_selection_translate_delta"}, | |
"update": "clampRange(panLinear(my_selection_translate_anchor.extent_y, my_selection_translate_delta.y / span(my_selection_translate_anchor.extent_y)), 0, plot0_height)" | |
} | |
] | |
}, | |
{ | |
"name": "my_selection_Miles_per_Gallon", | |
"on": [ | |
{ | |
"events": {"signal": "my_selection_y"}, | |
"update": "my_selection_y[0] === my_selection_y[1] ? null : invert(\"plot0_y\", my_selection_y)" | |
} | |
] | |
}, | |
{ | |
"name": "my_selection_tuple", | |
"on": [ | |
{ | |
"events": [ | |
{ | |
"signal": "my_selection_Weight_in_lbs || my_selection_Miles_per_Gallon" | |
} | |
], | |
"update": "my_selection_Weight_in_lbs && my_selection_Miles_per_Gallon ? {unit: \"plot0\", fields: my_selection_tuple_fields, values: [my_selection_Weight_in_lbs,my_selection_Miles_per_Gallon]} : null" | |
} | |
] | |
}, | |
{ | |
"name": "my_selection_tuple_fields", | |
"value": [ | |
{"field": "Weight_in_lbs", "channel": "x", "type": "R"}, | |
{"field": "Miles_per_Gallon", "channel": "y", "type": "R"} | |
] | |
}, | |
{ | |
"name": "my_selection_translate_anchor", | |
"value": {}, | |
"on": [ | |
{ | |
"events": [ | |
{ | |
"source": "scope", | |
"type": "mousedown", | |
"markname": "my_selection_brush" | |
} | |
], | |
"update": "{x: x(unit), y: y(unit), extent_x: slice(my_selection_x), extent_y: slice(my_selection_y)}" | |
} | |
] | |
}, | |
{ | |
"name": "my_selection_translate_delta", | |
"value": {}, | |
"on": [ | |
{ | |
"events": [ | |
{ | |
"source": "window", | |
"type": "mousemove", | |
"consume": true, | |
"between": [ | |
{ | |
"source": "scope", | |
"type": "mousedown", | |
"markname": "my_selection_brush" | |
}, | |
{"source": "window", "type": "mouseup"} | |
] | |
} | |
], | |
"update": "{x: my_selection_translate_anchor.x - x(unit), y: my_selection_translate_anchor.y - y(unit)}" | |
} | |
] | |
}, | |
{ | |
"name": "my_selection_modify", | |
"on": [ | |
{ | |
"events": {"signal": "my_selection_tuple"}, | |
"update": "modify(\"my_selection_store\", my_selection_tuple, true)" | |
} | |
] | |
} | |
], | |
"marks": [ | |
{ | |
"name": "my_selection_brush_bg", | |
"type": "rect", | |
"clip": true, | |
"encode": { | |
"enter": { | |
"fill": {"value": "#333"}, | |
"fillOpacity": {"value": 0.125} | |
}, | |
"update": { | |
"x": [ | |
{ | |
"test": "data(\"my_selection_store\").length && data(\"my_selection_store\")[0].unit === \"plot0\"", | |
"signal": "my_selection_x[0]" | |
}, | |
{"value": 0} | |
], | |
"y": [ | |
{ | |
"test": "data(\"my_selection_store\").length && data(\"my_selection_store\")[0].unit === \"plot0\"", | |
"signal": "my_selection_y[0]" | |
}, | |
{"value": 0} | |
], | |
"x2": [ | |
{ | |
"test": "data(\"my_selection_store\").length && data(\"my_selection_store\")[0].unit === \"plot0\"", | |
"signal": "my_selection_x[1]" | |
}, | |
{"value": 0} | |
], | |
"y2": [ | |
{ | |
"test": "data(\"my_selection_store\").length && data(\"my_selection_store\")[0].unit === \"plot0\"", | |
"signal": "my_selection_y[1]" | |
}, | |
{"value": 0} | |
] | |
} | |
} | |
}, | |
{ | |
"name": "plot0_marks", | |
"type": "symbol", | |
"style": ["circle"], | |
"interactive": true, | |
"from": {"data": "cars"}, | |
"encode": { | |
"update": { | |
"opacity": {"value": 0.7}, | |
"fill": [ | |
{ | |
"test": "(vlSelectionTest(\"my_selection_store\", datum))", | |
"value": "red" | |
}, | |
{"value": "lightgrey"} | |
], | |
"x": {"scale": "plot0_x", "field": "Weight_in_lbs"}, | |
"y": {"scale": "plot0_y", "field": "Miles_per_Gallon"}, | |
"shape": {"value": "circle"} | |
} | |
} | |
}, | |
{ | |
"name": "my_selection_brush", | |
"type": "rect", | |
"clip": true, | |
"encode": { | |
"enter": {"fill": {"value": "transparent"}}, | |
"update": { | |
"x": [ | |
{ | |
"test": "data(\"my_selection_store\").length && data(\"my_selection_store\")[0].unit === \"plot0\"", | |
"signal": "my_selection_x[0]" | |
}, | |
{"value": 0} | |
], | |
"y": [ | |
{ | |
"test": "data(\"my_selection_store\").length && data(\"my_selection_store\")[0].unit === \"plot0\"", | |
"signal": "my_selection_y[0]" | |
}, | |
{"value": 0} | |
], | |
"x2": [ | |
{ | |
"test": "data(\"my_selection_store\").length && data(\"my_selection_store\")[0].unit === \"plot0\"", | |
"signal": "my_selection_x[1]" | |
}, | |
{"value": 0} | |
], | |
"y2": [ | |
{ | |
"test": "data(\"my_selection_store\").length && data(\"my_selection_store\")[0].unit === \"plot0\"", | |
"signal": "my_selection_y[1]" | |
}, | |
{"value": 0} | |
], | |
"stroke": [ | |
{ | |
"test": "my_selection_x[0] !== my_selection_x[1] && my_selection_y[0] !== my_selection_y[1]", | |
"value": "white" | |
}, | |
{"value": null} | |
] | |
} | |
} | |
} | |
] | |
}, | |
{ | |
"type": "group", | |
"name": "plot1_group", | |
"style": "cell", | |
"encode": { | |
"update": { | |
"width": {"signal": "plot1_width"}, | |
"height": {"signal": "plot1_height"} | |
} | |
}, | |
"marks": [ | |
{ | |
"name": "plot1_marks", | |
"type": "symbol", | |
"style": ["circle"], | |
"interactive": false, | |
"from": {"data": "cars"}, | |
"encode": { | |
"update": { | |
"opacity": {"value": 0.7}, | |
"fill": [ | |
{ | |
"test": "(vlSelectionTest(\"my_selection_store\", datum))", | |
"value": "red" | |
}, | |
{"value": "lightgrey"} | |
], | |
"x": {"scale": "plot1_x", "field": "Acceleration"}, | |
"y": {"scale": "plot1_y", "field": "Horsepower"}, | |
"shape": {"value": "circle"} | |
} | |
} | |
} | |
] | |
} | |
], | |
"scales": [ | |
{ | |
"name": "plot0_x", | |
"type": "linear", | |
"domain": {"data": "cars", "field": "Weight_in_lbs"}, | |
"range": [0, {"signal": "plot0_width"}], | |
"nice": true, | |
"zero": true | |
}, | |
{ | |
"name": "plot0_y", | |
"type": "linear", | |
"domain": {"data": "cars", "field": "Miles_per_Gallon"}, | |
"range": [{"signal": "plot0_height"}, 0], | |
"nice": true, | |
"zero": true | |
}, | |
{ | |
"name": "plot1_x", | |
"type": "linear", | |
"domain": {"data": "cars", "field": "Acceleration"}, | |
"range": [0, {"signal": "plot1_width"}], | |
"nice": true, | |
"zero": true | |
}, | |
{ | |
"name": "plot1_y", | |
"type": "linear", | |
"domain": {"data": "cars", "field": "Horsepower"}, | |
"range": [{"signal": "plot1_height"}, 0], | |
"nice": true, | |
"zero": true | |
} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment