Skip to content

Commit 6bd4cf2

Browse files
hydrosquallhydrosquall
committed
feat(dataviz): redo region selection
1 parent 2ec1bf3 commit 6bd4cf2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+1388
-69
lines changed

‎build/vega-lite-schema.json‎

Lines changed: 112 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21346,6 +21346,106 @@
2134621346
},
2134721347
"type": "object"
2134821348
},
21349+
"RegionSelectionConfig": {
21350+
"additionalProperties": false,
21351+
"properties": {
21352+
"clear": {
21353+
"anyOf": [
21354+
{
21355+
"$ref": "#/definitions/Stream"
21356+
},
21357+
{
21358+
"type": "string"
21359+
},
21360+
{
21361+
"type": "boolean"
21362+
}
21363+
],
21364+
"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."
21365+
},
21366+
"encodings": {
21367+
"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.",
21368+
"items": {
21369+
"$ref": "#/definitions/SingleDefUnitChannel"
21370+
},
21371+
"type": "array"
21372+
},
21373+
"mark": {
21374+
"$ref": "#/definitions/BrushConfig",
21375+
"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."
21376+
},
21377+
"on": {
21378+
"anyOf": [
21379+
{
21380+
"$ref": "#/definitions/Stream"
21381+
},
21382+
{
21383+
"type": "string"
21384+
}
21385+
],
21386+
"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."
21387+
},
21388+
"resolve": {
21389+
"$ref": "#/definitions/SelectionResolution",
21390+
"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."
21391+
},
21392+
"type": {
21393+
"const": "region",
21394+
"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`.",
21395+
"type": "string"
21396+
}
21397+
},
21398+
"required": [
21399+
"type"
21400+
],
21401+
"type": "object"
21402+
},
21403+
"RegionSelectionConfigWithoutType": {
21404+
"additionalProperties": false,
21405+
"properties": {
21406+
"clear": {
21407+
"anyOf": [
21408+
{
21409+
"$ref": "#/definitions/Stream"
21410+
},
21411+
{
21412+
"type": "string"
21413+
},
21414+
{
21415+
"type": "boolean"
21416+
}
21417+
],
21418+
"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."
21419+
},
21420+
"encodings": {
21421+
"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.",
21422+
"items": {
21423+
"$ref": "#/definitions/SingleDefUnitChannel"
21424+
},
21425+
"type": "array"
21426+
},
21427+
"mark": {
21428+
"$ref": "#/definitions/BrushConfig",
21429+
"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."
21430+
},
21431+
"on": {
21432+
"anyOf": [
21433+
{
21434+
"$ref": "#/definitions/Stream"
21435+
},
21436+
{
21437+
"type": "string"
21438+
}
21439+
],
21440+
"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."
21441+
},
21442+
"resolve": {
21443+
"$ref": "#/definitions/SelectionResolution",
21444+
"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."
21445+
}
21446+
},
21447+
"type": "object"
21448+
},
2134921449
"RegressionTransform": {
2135021450
"additionalProperties": false,
2135121451
"properties": {
@@ -23108,6 +23208,10 @@
2310823208
"point": {
2310923209
"$ref": "#/definitions/PointSelectionConfigWithoutType",
2311023210
"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."
23211+
},
23212+
"region": {
23213+
"$ref": "#/definitions/RegionSelectionConfigWithoutType",
23214+
"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."
2311123215
}
2311223216
},
2311323217
"type": "object"
@@ -23182,6 +23286,9 @@
2318223286
},
2318323287
{
2318423288
"$ref": "#/definitions/IntervalSelectionConfig"
23289+
},
23290+
{
23291+
"$ref": "#/definitions/RegionSelectionConfig"
2318523292
}
2318623293
],
2318723294
"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`."
@@ -23221,7 +23328,8 @@
2322123328
"SelectionType": {
2322223329
"enum": [
2322323330
"point",
23224-
"interval"
23331+
"interval",
23332+
"region"
2322523333
],
2322623334
"type": "string"
2322723335
},
@@ -30986,6 +31094,9 @@
3098631094
},
3098731095
{
3098831096
"$ref": "#/definitions/IntervalSelectionConfig"
31097+
},
31098+
{
31099+
"$ref": "#/definitions/RegionSelectionConfig"
3098931100
}
3099031101
],
3099131102
"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`."

‎examples/compiled/selection_type_region.png‎

30.4 KB
Loading

‎examples/compiled/selection_type_region.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎examples/compiled/selection_type_region.vg.json‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
{
2+
"$schema": "https://vega.github.io/schema/vega/v5.json",
3+
"background": "white",
4+
"padding": 5,
5+
"width": 200,
6+
"height": 200,
7+
"style": "cell",
8+
"data": [
9+
{
10+
"name": "brush_store",
11+
"transform": [{"type": "collect", "sort": {"field": "_vgsid_"}}]
12+
},
13+
{
14+
"name": "source_0",
15+
"url": "data/cars.json",
16+
"format": {"type": "json"},
17+
"transform": [
18+
{"type": "identifier", "as": "_vgsid_"},
19+
{
20+
"type": "filter",
21+
"expr": "isValid(datum[\"Horsepower\"]) && isFinite(+datum[\"Horsepower\"]) && isValid(datum[\"Miles_per_Gallon\"]) && isFinite(+datum[\"Miles_per_Gallon\"])"
22+
}
23+
]
24+
}
25+
],
26+
"signals": [
27+
{
28+
"name": "unit",
29+
"value": {},
30+
"on": [
31+
{"events": "mousemove", "update": "isTuple(group()) ? group() : unit"}
32+
]
33+
},
34+
{
35+
"name": "brush",
36+
"update": "vlSelectionResolve(\"brush_store\", \"union\")"
37+
},
38+
{
39+
"name": "brush_tuple",
40+
"on": [
41+
{
42+
"events": [{"signal": "brush_screen_path"}],
43+
"update": "vlSelectionTuples(intersectLasso(\"marks\", brush_screen_path, unit), {unit: \"\"})"
44+
},
45+
{"events": [{"source": "view", "type": "dblclick"}], "update": "null"}
46+
]
47+
},
48+
{
49+
"name": "brush_screen_path",
50+
"init": "[]",
51+
"on": [
52+
{
53+
"events": {"source": "scope", "type": "mousedown"},
54+
"update": "[[x(unit), y(unit)]]"
55+
},
56+
{
57+
"events": {
58+
"source": "window",
59+
"type": "mousemove",
60+
"consume": true,
61+
"between": [
62+
{"source": "scope", "type": "mousedown"},
63+
{"source": "window", "type": "mouseup"}
64+
]
65+
},
66+
"update": "lassoAppend(brush_screen_path, clamp(x(unit), 0, width), clamp(y(unit), 0, height))"
67+
}
68+
]
69+
},
70+
{
71+
"name": "brush_modify",
72+
"on": [
73+
{
74+
"events": {"signal": "brush_tuple"},
75+
"update": "modify(\"brush_store\", brush_tuple, true)"
76+
}
77+
]
78+
}
79+
],
80+
"marks": [
81+
{
82+
"name": "brush_brush",
83+
"type": "path",
84+
"encode": {
85+
"enter": {
86+
"fill": {"value": "#333"},
87+
"fillOpacity": {"value": 0.125},
88+
"stroke": {"value": "gray"},
89+
"strokeWidth": {"value": 2},
90+
"strokeDash": {"value": [8, 5]}
91+
},
92+
"update": {
93+
"path": [
94+
{
95+
"test": "data(\"brush_store\").length && data(\"brush_store\")[0].unit === \"\"",
96+
"signal": "lassoPath(brush_screen_path)"
97+
},
98+
{"value": "[]"}
99+
]
100+
}
101+
}
102+
},
103+
{
104+
"name": "marks",
105+
"type": "symbol",
106+
"style": ["point"],
107+
"interactive": true,
108+
"from": {"data": "source_0"},
109+
"encode": {
110+
"update": {
111+
"opacity": {"value": 0.7},
112+
"fill": {"value": "transparent"},
113+
"stroke": [
114+
{
115+
"test": "!length(data(\"brush_store\")) || vlSelectionIdTest(\"brush_store\", datum)",
116+
"scale": "color",
117+
"field": "Cylinders"
118+
},
119+
{"value": "grey"}
120+
],
121+
"ariaRoleDescription": {"value": "point"},
122+
"description": {
123+
"signal": "\"Horsepower: \" + (format(datum[\"Horsepower\"], \"\")) + \"; Miles_per_Gallon: \" + (format(datum[\"Miles_per_Gallon\"], \"\")) + \"; Cylinders: \" + (isValid(datum[\"Cylinders\"]) ? datum[\"Cylinders\"] : \"\"+datum[\"Cylinders\"])"
124+
},
125+
"x": {"scale": "x", "field": "Horsepower"},
126+
"y": {"scale": "y", "field": "Miles_per_Gallon"}
127+
}
128+
}
129+
}
130+
],
131+
"scales": [
132+
{
133+
"name": "x",
134+
"type": "linear",
135+
"domain": {"data": "source_0", "field": "Horsepower"},
136+
"range": [0, {"signal": "width"}],
137+
"nice": true,
138+
"zero": true
139+
},
140+
{
141+
"name": "y",
142+
"type": "linear",
143+
"domain": {"data": "source_0", "field": "Miles_per_Gallon"},
144+
"range": [{"signal": "height"}, 0],
145+
"nice": true,
146+
"zero": true
147+
},
148+
{
149+
"name": "color",
150+
"type": "ordinal",
151+
"domain": {"data": "source_0", "field": "Cylinders", "sort": true},
152+
"range": "ordinal",
153+
"interpolate": "hcl"
154+
}
155+
],
156+
"axes": [
157+
{
158+
"scale": "x",
159+
"orient": "bottom",
160+
"gridScale": "y",
161+
"grid": true,
162+
"tickCount": {"signal": "ceil(width/40)"},
163+
"domain": false,
164+
"labels": false,
165+
"aria": false,
166+
"maxExtent": 0,
167+
"minExtent": 0,
168+
"ticks": false,
169+
"zindex": 0
170+
},
171+
{
172+
"scale": "y",
173+
"orient": "left",
174+
"gridScale": "x",
175+
"grid": true,
176+
"tickCount": {"signal": "ceil(height/40)"},
177+
"domain": false,
178+
"labels": false,
179+
"aria": false,
180+
"maxExtent": 0,
181+
"minExtent": 0,
182+
"ticks": false,
183+
"zindex": 0
184+
},
185+
{
186+
"scale": "x",
187+
"orient": "bottom",
188+
"grid": false,
189+
"title": "Horsepower",
190+
"labelFlush": true,
191+
"labelOverlap": true,
192+
"tickCount": {"signal": "ceil(width/40)"},
193+
"zindex": 0
194+
},
195+
{
196+
"scale": "y",
197+
"orient": "left",
198+
"grid": false,
199+
"title": "Miles_per_Gallon",
200+
"labelOverlap": true,
201+
"tickCount": {"signal": "ceil(height/40)"},
202+
"zindex": 0
203+
}
204+
],
205+
"legends": [
206+
{
207+
"stroke": "color",
208+
"symbolType": "circle",
209+
"title": "Cylinders",
210+
"encode": {
211+
"symbols": {
212+
"update": {
213+
"fill": {"value": "transparent"},
214+
"opacity": {"value": 0.7}
215+
}
216+
}
217+
}
218+
}
219+
]
220+
}

‎examples/compiled/selection_type_region_concat.png‎

52.5 KB
Loading

‎examples/compiled/selection_type_region_concat.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)