Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Region Selections Vega-Lite #9536

Draft
wants to merge 27 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
b526d4a
jfkj
Apr 15, 2022
a531178
created new clean branch
Apr 15, 2022
ebac7d4
chore: update schema [CI]
Apr 15, 2022
c7625e5
refactored lasso to region, added runtime tests
dvmoritzschoefl Jul 10, 2022
792c0ab
chore: update TOC [CI]
Jun 27, 2022
adb630a
added examples
dvmoritzschoefl Jul 19, 2022
acda2f1
linted region test
dvmoritzschoefl Jul 25, 2022
f19009b
updated example to fit v5
dvmoritzschoefl Jul 27, 2022
1360be9
chore: update schema [CI]
Jul 25, 2022
d67552b
chore: update examples [CI]
Jul 25, 2022
4efbbb3
readded filter and mark for example test
dvmoritzschoefl Jul 27, 2022
8f79055
chore: update examples [CI]
Jul 27, 2022
5e1e16b
deleted unused images, adjusted selection fields for documentation
dvmoritzschoefl Sep 26, 2022
d78a975
chore: update examples [CI]
Jul 27, 2022
088ce9a
chore: update examples [CI]
Sep 26, 2022
2f33d53
fix: hardwire SELECTION_ID as the only valid field for regions
arvind Jul 6, 2023
e6ea2b6
refactor: runtime tests to use hits object + regenerate resources
arvind Jul 6, 2023
0c430fa
fix: for global region selections, hide marks for inactive units
arvind Jul 7, 2023
50d6df8
test: expand runtime tests to cover faceted/repeated views
arvind Jul 7, 2023
2fc6ce8
chore: update examples [CI]
Jul 7, 2023
9e1f1eb
chore: update TOC [CI]
May 9, 2024
c0f94a8
fix: resolve merge conflicts with selection keys
hydrosquall Feb 19, 2025
3083392
fix(vega-lite): Improve test util types for test keys
hydrosquall Feb 19, 2025
6e28207
chore: update TOC [CI]
Feb 19, 2025
cbe8b48
chore: update schema [CI]
Feb 19, 2025
c40321f
chore: update examples [CI]
Feb 19, 2025
428336c
style: auto-formatting [CI]
Feb 19, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 126 additions & 1 deletion build/vega-lite-schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -21346,6 +21346,120 @@
},
"type": "object"
},
"RegionSelectionConfig": {
"additionalProperties": false,
"properties": {
"clear": {
"anyOf": [
{
"$ref": "#/definitions/Stream"
},
{
"type": "string"
},
{
"type": "boolean"
}
],
"description": "Clears the selection, emptying it of all values. This property can be a [Event Stream](https://vega.github.io/vega/docs/event-streams/) or `false` to disable clear.\n\n__Default value:__ `dblclick`.\n\n__See also:__ [`clear` examples ](https://vega.github.io/vega-lite/docs/selection.html#clear) in the documentation."
},
"encodings": {
"description": "An array of encoding channels. The corresponding data field values must match for a data tuple to fall within the selection.\n\n__See also:__ The [projection with `encodings` and `fields` section](https://vega.github.io/vega-lite/docs/selection.html#project) in the documentation.",
"items": {
"$ref": "#/definitions/SingleDefUnitChannel"
},
"type": "array"
},
"fields": {
"description": "An array of field names whose values must match for a data tuple to fall within the selection.\n\n__See also:__ The [projection with `encodings` and `fields` section](https://vega.github.io/vega-lite/docs/selection.html#project) in the documentation.",
"items": {
"$ref": "#/definitions/FieldName"
},
"type": "array"
},
"mark": {
"$ref": "#/definitions/BrushConfig",
"description": "A region selection also adds a path mark to depict the shape of the region. The `mark` property can be used to customize the appearance of the mark.\n\n__See also:__ [`mark` examples](https://vega.github.io/vega-lite/docs/selection.html#mark) in the documentation."
},
"on": {
"anyOf": [
{
"$ref": "#/definitions/Stream"
},
{
"type": "string"
}
],
"description": "A [Vega event stream](https://vega.github.io/vega/docs/event-streams/) (object or selector) that triggers the selection. For interval selections, the event stream must specify a [start and end](https://vega.github.io/vega/docs/event-streams/#between-filters).\n\n__See also:__ [`on` examples](https://vega.github.io/vega-lite/docs/selection.html#on) in the documentation."
},
"resolve": {
"$ref": "#/definitions/SelectionResolution",
"description": "With layered and multi-view displays, a strategy that determines how selections' data queries are resolved when applied in a filter transform, conditional encoding rule, or scale domain.\n\nOne of:\n- `\"global\"` -- only one brush exists for the entire SPLOM. When the user begins to drag, any previous brushes are cleared, and a new one is constructed.\n- `\"union\"` -- each cell contains its own brush, and points are highlighted if they lie within _any_ of these individual brushes.\n- `\"intersect\"` -- each cell contains its own brush, and points are highlighted only if they fall within _all_ of these individual brushes.\n\n__Default value:__ `global`.\n\n__See also:__ [`resolve` examples](https://vega.github.io/vega-lite/docs/selection.html#resolve) in the documentation."
},
"type": {
"const": "region",
"description": "Determines the default event processing and data query for the selection. Vega-Lite currently supports two selection types:\n\n- `\"point\"` -- to select multiple discrete data values; the first value is selected on `click` and additional values toggled on shift-click.\n- `\"interval\"` -- to select a continuous range of data values on `drag`.",
"type": "string"
}
},
"required": [
"type"
],
"type": "object"
},
"RegionSelectionConfigWithoutType": {
"additionalProperties": false,
"properties": {
"clear": {
"anyOf": [
{
"$ref": "#/definitions/Stream"
},
{
"type": "string"
},
{
"type": "boolean"
}
],
"description": "Clears the selection, emptying it of all values. This property can be a [Event Stream](https://vega.github.io/vega/docs/event-streams/) or `false` to disable clear.\n\n__Default value:__ `dblclick`.\n\n__See also:__ [`clear` examples ](https://vega.github.io/vega-lite/docs/selection.html#clear) in the documentation."
},
"encodings": {
"description": "An array of encoding channels. The corresponding data field values must match for a data tuple to fall within the selection.\n\n__See also:__ The [projection with `encodings` and `fields` section](https://vega.github.io/vega-lite/docs/selection.html#project) in the documentation.",
"items": {
"$ref": "#/definitions/SingleDefUnitChannel"
},
"type": "array"
},
"fields": {
"description": "An array of field names whose values must match for a data tuple to fall within the selection.\n\n__See also:__ The [projection with `encodings` and `fields` section](https://vega.github.io/vega-lite/docs/selection.html#project) in the documentation.",
"items": {
"$ref": "#/definitions/FieldName"
},
"type": "array"
},
"mark": {
"$ref": "#/definitions/BrushConfig",
"description": "A region selection also adds a path mark to depict the shape of the region. The `mark` property can be used to customize the appearance of the mark.\n\n__See also:__ [`mark` examples](https://vega.github.io/vega-lite/docs/selection.html#mark) in the documentation."
},
"on": {
"anyOf": [
{
"$ref": "#/definitions/Stream"
},
{
"type": "string"
}
],
"description": "A [Vega event stream](https://vega.github.io/vega/docs/event-streams/) (object or selector) that triggers the selection. For interval selections, the event stream must specify a [start and end](https://vega.github.io/vega/docs/event-streams/#between-filters).\n\n__See also:__ [`on` examples](https://vega.github.io/vega-lite/docs/selection.html#on) in the documentation."
},
"resolve": {
"$ref": "#/definitions/SelectionResolution",
"description": "With layered and multi-view displays, a strategy that determines how selections' data queries are resolved when applied in a filter transform, conditional encoding rule, or scale domain.\n\nOne of:\n- `\"global\"` -- only one brush exists for the entire SPLOM. When the user begins to drag, any previous brushes are cleared, and a new one is constructed.\n- `\"union\"` -- each cell contains its own brush, and points are highlighted if they lie within _any_ of these individual brushes.\n- `\"intersect\"` -- each cell contains its own brush, and points are highlighted only if they fall within _all_ of these individual brushes.\n\n__Default value:__ `global`.\n\n__See also:__ [`resolve` examples](https://vega.github.io/vega-lite/docs/selection.html#resolve) in the documentation."
}
},
"type": "object"
},
"RegressionTransform": {
"additionalProperties": false,
"properties": {
Expand Down Expand Up @@ -23108,6 +23222,10 @@
"point": {
"$ref": "#/definitions/PointSelectionConfigWithoutType",
"description": "The default definition for a [`point`](https://vega.github.io/vega-lite/docs/parameter.html#select) selection. All properties and transformations for a point selection definition (except `type`) may be specified here.\n\nFor instance, setting `point` to `{\"on\": \"dblclick\"}` populates point selections on double-click by default."
},
"region": {
"$ref": "#/definitions/RegionSelectionConfigWithoutType",
"description": "The default definition for an [`region`](https://vega.github.io/vega-lite/docs/parameter.html#select) selection. All properties and transformations for an region selection definition (except `type`) may be specified here."
}
},
"type": "object"
Expand Down Expand Up @@ -23182,6 +23300,9 @@
},
{
"$ref": "#/definitions/IntervalSelectionConfig"
},
{
"$ref": "#/definitions/RegionSelectionConfig"
}
],
"description": "Determines the default event processing and data query for the selection. Vega-Lite currently supports two selection types:\n\n- `\"point\"` -- to select multiple discrete data values; the first value is selected on `click` and additional values toggled on shift-click.\n- `\"interval\"` -- to select a continuous range of data values on `drag`."
Expand Down Expand Up @@ -23221,7 +23342,8 @@
"SelectionType": {
"enum": [
"point",
"interval"
"interval",
"region"
],
"type": "string"
},
Expand Down Expand Up @@ -30987,6 +31109,9 @@
},
{
"$ref": "#/definitions/IntervalSelectionConfig"
},
{
"$ref": "#/definitions/RegionSelectionConfig"
}
],
"description": "Determines the default event processing and data query for the selection. Vega-Lite currently supports two selection types:\n\n- `\"point\"` -- to select multiple discrete data values; the first value is selected on `click` and additional values toggled on shift-click.\n- `\"interval\"` -- to select a continuous range of data values on `drag`."
Expand Down
Binary file added examples/compiled/selection_type_region.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions examples/compiled/selection_type_region.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
220 changes: 220 additions & 0 deletions examples/compiled/selection_type_region.vg.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,220 @@
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"background": "white",
"padding": 5,
"width": 200,
"height": 200,
"style": "cell",
"data": [
{
"name": "brush_store",
"transform": [{"type": "collect", "sort": {"field": "_vgsid_"}}]
},
{
"name": "source_0",
"url": "data/cars.json",
"format": {"type": "json"},
"transform": [
{"type": "identifier", "as": "_vgsid_"},
{
"type": "filter",
"expr": "isValid(datum[\"Horsepower\"]) && isFinite(+datum[\"Horsepower\"]) && isValid(datum[\"Miles_per_Gallon\"]) && isFinite(+datum[\"Miles_per_Gallon\"])"
}
]
}
],
"signals": [
{
"name": "unit",
"value": {},
"on": [
{"events": "pointermove", "update": "isTuple(group()) ? group() : unit"}
]
},
{
"name": "brush",
"update": "vlSelectionResolve(\"brush_store\", \"union\")"
},
{
"name": "brush_tuple",
"on": [
{
"events": [{"signal": "brush_screen_path"}],
"update": "vlSelectionTuples(intersectLasso(\"marks\", brush_screen_path, unit), {unit: \"\"})"
},
{"events": [{"source": "view", "type": "dblclick"}], "update": "null"}
]
},
{
"name": "brush_screen_path",
"init": "[]",
"on": [
{
"events": {"source": "scope", "type": "mousedown"},
"update": "[[x(unit), y(unit)]]"
},
{
"events": {
"source": "window",
"type": "mousemove",
"consume": true,
"between": [
{"source": "scope", "type": "mousedown"},
{"source": "window", "type": "mouseup"}
]
},
"update": "lassoAppend(brush_screen_path, clamp(x(unit), 0, width), clamp(y(unit), 0, height))"
}
]
},
{
"name": "brush_modify",
"on": [
{
"events": {"signal": "brush_tuple"},
"update": "modify(\"brush_store\", brush_tuple, true)"
}
]
}
],
"marks": [
{
"name": "brush_brush",
"type": "path",
"encode": {
"enter": {
"fill": {"value": "#333"},
"fillOpacity": {"value": 0.125},
"stroke": {"value": "gray"},
"strokeWidth": {"value": 2},
"strokeDash": {"value": [8, 5]}
},
"update": {
"path": [
{
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"\"",
"signal": "lassoPath(brush_screen_path)"
},
{"value": "[]"}
]
}
}
},
{
"name": "marks",
"type": "symbol",
"style": ["point"],
"interactive": true,
"from": {"data": "source_0"},
"encode": {
"update": {
"opacity": {"value": 0.7},
"fill": {"value": "transparent"},
"stroke": [
{
"test": "!length(data(\"brush_store\")) || vlSelectionIdTest(\"brush_store\", datum)",
"scale": "color",
"field": "Cylinders"
},
{"value": "grey"}
],
"ariaRoleDescription": {"value": "point"},
"description": {
"signal": "\"Horsepower: \" + (format(datum[\"Horsepower\"], \"\")) + \"; Miles_per_Gallon: \" + (format(datum[\"Miles_per_Gallon\"], \"\")) + \"; Cylinders: \" + (isValid(datum[\"Cylinders\"]) ? datum[\"Cylinders\"] : \"\"+datum[\"Cylinders\"])"
},
"x": {"scale": "x", "field": "Horsepower"},
"y": {"scale": "y", "field": "Miles_per_Gallon"}
}
}
}
],
"scales": [
{
"name": "x",
"type": "linear",
"domain": {"data": "source_0", "field": "Horsepower"},
"range": [0, {"signal": "width"}],
"nice": true,
"zero": true
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source_0", "field": "Miles_per_Gallon"},
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": true
},
{
"name": "color",
"type": "ordinal",
"domain": {"data": "source_0", "field": "Cylinders", "sort": true},
"range": "ordinal",
"interpolate": "hcl"
}
],
"axes": [
{
"scale": "x",
"orient": "bottom",
"gridScale": "y",
"grid": true,
"tickCount": {"signal": "ceil(width/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"gridScale": "x",
"grid": true,
"tickCount": {"signal": "ceil(height/40)"},
"domain": false,
"labels": false,
"aria": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "x",
"orient": "bottom",
"grid": false,
"title": "Horsepower",
"labelFlush": true,
"labelOverlap": true,
"tickCount": {"signal": "ceil(width/40)"},
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"grid": false,
"title": "Miles_per_Gallon",
"labelOverlap": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 0
}
],
"legends": [
{
"stroke": "color",
"symbolType": "circle",
"title": "Cylinders",
"encode": {
"symbols": {
"update": {
"fill": {"value": "transparent"},
"opacity": {"value": 0.7}
}
}
}
}
]
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions examples/compiled/selection_type_region_concat.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading