Skip to content

Commit 58d4643

Browse files
hydrosquallhydrosquall
committed
feat(dataviz): redo lasso
1 parent 4b9d22c commit 58d4643

Some content is hidden

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

62 files changed

+1260
-26
lines changed

‎build/vega-lite-schema.json‎

Lines changed: 112 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20731,6 +20731,106 @@
2073120731
},
2073220732
"type": "object"
2073320733
},
20734+
"RegionSelectionConfig": {
20735+
"additionalProperties": false,
20736+
"properties": {
20737+
"clear": {
20738+
"anyOf": [
20739+
{
20740+
"$ref": "#/definitions/Stream"
20741+
},
20742+
{
20743+
"type": "string"
20744+
},
20745+
{
20746+
"type": "boolean"
20747+
}
20748+
],
20749+
"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."
20750+
},
20751+
"encodings": {
20752+
"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.",
20753+
"items": {
20754+
"$ref": "#/definitions/SingleDefUnitChannel"
20755+
},
20756+
"type": "array"
20757+
},
20758+
"mark": {
20759+
"$ref": "#/definitions/BrushConfig",
20760+
"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."
20761+
},
20762+
"on": {
20763+
"anyOf": [
20764+
{
20765+
"$ref": "#/definitions/Stream"
20766+
},
20767+
{
20768+
"type": "string"
20769+
}
20770+
],
20771+
"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."
20772+
},
20773+
"resolve": {
20774+
"$ref": "#/definitions/SelectionResolution",
20775+
"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."
20776+
},
20777+
"type": {
20778+
"const": "region",
20779+
"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`.",
20780+
"type": "string"
20781+
}
20782+
},
20783+
"required": [
20784+
"type"
20785+
],
20786+
"type": "object"
20787+
},
20788+
"RegionSelectionConfigWithoutType": {
20789+
"additionalProperties": false,
20790+
"properties": {
20791+
"clear": {
20792+
"anyOf": [
20793+
{
20794+
"$ref": "#/definitions/Stream"
20795+
},
20796+
{
20797+
"type": "string"
20798+
},
20799+
{
20800+
"type": "boolean"
20801+
}
20802+
],
20803+
"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."
20804+
},
20805+
"encodings": {
20806+
"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.",
20807+
"items": {
20808+
"$ref": "#/definitions/SingleDefUnitChannel"
20809+
},
20810+
"type": "array"
20811+
},
20812+
"mark": {
20813+
"$ref": "#/definitions/BrushConfig",
20814+
"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."
20815+
},
20816+
"on": {
20817+
"anyOf": [
20818+
{
20819+
"$ref": "#/definitions/Stream"
20820+
},
20821+
{
20822+
"type": "string"
20823+
}
20824+
],
20825+
"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."
20826+
},
20827+
"resolve": {
20828+
"$ref": "#/definitions/SelectionResolution",
20829+
"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."
20830+
}
20831+
},
20832+
"type": "object"
20833+
},
2073420834
"RegressionTransform": {
2073520835
"additionalProperties": false,
2073620836
"properties": {
@@ -21949,6 +22049,10 @@
2194922049
"point": {
2195022050
"$ref": "#/definitions/PointSelectionConfigWithoutType",
2195122051
"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."
22052+
},
22053+
"region": {
22054+
"$ref": "#/definitions/RegionSelectionConfigWithoutType",
22055+
"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."
2195222056
}
2195322057
},
2195422058
"type": "object"
@@ -22023,6 +22127,9 @@
2202322127
},
2202422128
{
2202522129
"$ref": "#/definitions/IntervalSelectionConfig"
22130+
},
22131+
{
22132+
"$ref": "#/definitions/RegionSelectionConfig"
2202622133
}
2202722134
],
2202822135
"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`."
@@ -22062,7 +22169,8 @@
2206222169
"SelectionType": {
2206322170
"enum": [
2206422171
"point",
22065-
"interval"
22172+
"interval",
22173+
"region"
2206622174
],
2206722175
"type": "string"
2206822176
},
@@ -29483,6 +29591,9 @@
2948329591
},
2948429592
{
2948529593
"$ref": "#/definitions/IntervalSelectionConfig"
29594+
},
29595+
{
29596+
"$ref": "#/definitions/RegionSelectionConfig"
2948629597
}
2948729598
],
2948829599
"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)