Initialize Selections (#4139)

**This PR relies on the refactoring introduced by #4068, so please merge that one first.** This PR adds an `init` property to selection definitions to initialize them using the fields or encoding channels a selection is projected over. For example, here is an updated version of our `interactive_query_widgets` example that initializes the selection to select cars with 8 cylinders manufactured in 1971. ```json { "$schema": "https://vega.github.io/schema/vega-lite/v2.json", "description": "Drag the sliders to highlight points.", "data": {"url": "data/cars.json"}, "transform": [{"calculate": "year(datum.Year)", "as": "Year"}], "layer": [{ "selection": { "CylYr": { "type": "single", "fields": ["Cylinders", "Year"], "init": {"Cylinders": 4, "Year": 1977}, "bind": { "Cylinders": {"input": "range", "min": 3, "max": 8, "step": 1}, "Year": {"input": "range", "min": 1969, "max": 1981, "step": 1} } } }, "mark": "circle", "encoding": { "x": {"field": "Horsepower", "type": "quantitative"}, "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, "color": { "condition": {"selection": "CylYr", "field": "Origin", "type": "nominal"}, "value": "grey" } } }, { "transform": [{"filter": {"selection": "CylYr"}}], "mark": "circle", "encoding": { "x": {"field": "Horsepower", "type": "quantitative"}, "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, "color": {"field": "Origin", "type": "nominal"}, "size": {"value": 100} } }] } ``` Similarly, an updated `interactive_brush` example to initialize the brush selection is as follows: ```json { "$schema": "https://vega.github.io/schema/vega-lite/v2.json", "description": "Drag out a rectangular brush to highlight points.", "data": {"url": "data/cars.json"}, "selection": { "brush": { "type": "interval", "init": {"x": [55, 160], "y": [13, 37]} } }, "mark": "point", "encoding": { "x": {"field": "Horsepower", "type": "quantitative"}, "y": {"field": "Miles_per_Gallon", "type": "quantitative"}, "color": { "condition": {"selection": "brush", "field": "Cylinders", "type": "ordinal"}, "value": "grey" } } } ``` Fixes #3409, #3431, and vega/altair#599. /cc @jakevdp
vega · Feb 23, 2019 · 07fcab9 · 07fcab9
1 parent 257d7e8
commit 07fcab9
Show file tree

Hide file tree

Showing 89 changed files with 1,223 additions and 1,233 deletions.
diff --git a/build/vega-lite-schema.json b/build/vega-lite-schema.json
@@ -5988,6 +5988,10 @@
           },
           "type": "array"
         },
+        "init": {
+          "$ref": "#/definitions/SelectionInitArrayMapping",
+          "description": "Initialize the selection with a mapping between [projected channels or field names](https://vega.github.io/vega-lite/docs/project.html) and arrays of\ninitial values."
+        },
         "mark": {
           "$ref": "#/definitions/BrushConfig",
           "description": "An interval selection also adds a rectangle mark to depict the\nextents of the interval. The `mark` property can be used to customize the\nappearance of the mark."
@@ -6058,6 +6062,10 @@
           },
           "type": "array"
         },
+        "init": {
+          "$ref": "#/definitions/SelectionInitArrayMapping",
+          "description": "Initialize the selection with a mapping between [projected channels or field names](https://vega.github.io/vega-lite/docs/project.html) and arrays of\ninitial values."
+        },
         "mark": {
           "$ref": "#/definitions/BrushConfig",
           "description": "An interval selection also adds a rectangle mark to depict the\nextents of the interval. The `mark` property can be used to customize the\nappearance of the mark."
@@ -7665,6 +7673,20 @@
           },
           "type": "array"
         },
+        "init": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/SelectionInitMapping"
+            },
+            {
+              "items": {
+                "$ref": "#/definitions/SelectionInitMapping"
+              },
+              "type": "array"
+            }
+          ],
+          "description": "Initialize the selection with a mapping between [projected channels or field names](https://vega.github.io/vega-lite/docs/project.html) and an initial\nvalue (or array of values)."
+        },
         "nearest": {
           "description": "When true, an invisible voronoi diagram is computed to accelerate discrete\nselection. The data value _nearest_ the mouse cursor is added to the selection.\n\nSee the [nearest transform](https://vega.github.io/vega-lite/docs/nearest.html) documentation for more information.",
           "type": "boolean"
@@ -7721,6 +7743,20 @@
           },
           "type": "array"
         },
+        "init": {
+          "anyOf": [
+            {
+              "$ref": "#/definitions/SelectionInitMapping"
+            },
+            {
+              "items": {
+                "$ref": "#/definitions/SelectionInitMapping"
+              },
+              "type": "array"
+            }
+          ],
+          "description": "Initialize the selection with a mapping between [projected channels or field names](https://vega.github.io/vega-lite/docs/project.html) and an initial\nvalue (or array of values)."
+        },
         "nearest": {
           "description": "When true, an invisible voronoi diagram is computed to accelerate discrete\nselection. The data value _nearest_ the mouse cursor is added to the selection.\n\nSee the [nearest transform](https://vega.github.io/vega-lite/docs/nearest.html) documentation for more information.",
           "type": "boolean"
@@ -9247,6 +9283,62 @@
         }
       ]
     },
+    "SelectionInit": {
+      "anyOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "number"
+        },
+        {
+          "type": "string"
+        },
+        {
+          "$ref": "#/definitions/DateTime"
+        }
+      ]
+    },
+    "SelectionInitArray": {
+      "anyOf": [
+        {
+          "items": {
+            "type": "boolean"
+          },
+          "type": "array"
+        },
+        {
+          "items": {
+            "type": "number"
+          },
+          "type": "array"
+        },
+        {
+          "items": {
+            "type": "string"
+          },
+          "type": "array"
+        },
+        {
+          "items": {
+            "$ref": "#/definitions/DateTime"
+          },
+          "type": "array"
+        }
+      ]
+    },
+    "SelectionInitArrayMapping": {
+      "additionalProperties": {
+        "$ref": "#/definitions/SelectionInitArray"
+      },
+      "type": "object"
+    },
+    "SelectionInitMapping": {
+      "additionalProperties": {
+        "$ref": "#/definitions/SelectionInit"
+      },
+      "type": "object"
+    },
     "SelectionPredicate": {
       "additionalProperties": false,
       "properties": {
@@ -9358,6 +9450,10 @@
           },
           "type": "array"
         },
+        "init": {
+          "$ref": "#/definitions/SelectionInitMapping",
+          "description": "Initialize the selection with a mapping between [projected channels or field names](https://vega.github.io/vega-lite/docs/project.html) and initial values."
+        },
         "nearest": {
           "description": "When true, an invisible voronoi diagram is computed to accelerate discrete\nselection. The data value _nearest_ the mouse cursor is added to the selection.\n\nSee the [nearest transform](https://vega.github.io/vega-lite/docs/nearest.html) documentation for more information.",
           "type": "boolean"
@@ -9421,6 +9517,10 @@
           },
           "type": "array"
         },
+        "init": {
+          "$ref": "#/definitions/SelectionInitMapping",
+          "description": "Initialize the selection with a mapping between [projected channels or field names](https://vega.github.io/vega-lite/docs/project.html) and initial values."
+        },
         "nearest": {
           "description": "When true, an invisible voronoi diagram is computed to accelerate discrete\nselection. The data value _nearest_ the mouse cursor is added to the selection.\n\nSee the [nearest transform](https://vega.github.io/vega-lite/docs/nearest.html) documentation for more information.",
           "type": "boolean"

diff --git a/examples/compiled/circle_bubble_health_income.vg.json b/examples/compiled/circle_bubble_health_income.vg.json
@@ -54,13 +54,16 @@
       "on": [
         {
           "events": [{"signal": "view_income"}, {"signal": "view_health"}],
-          "update": "view_income && view_health ? {unit: \"\", fields: view_tuple_fields, values: [view_income, view_health]} : null"
+          "update": "view_income && view_health ? {unit: \"\", fields: view_tuple_fields, values: [view_income,view_health]} : null"
         }
       ]
     },
     {
       "name": "view_tuple_fields",
-      "update": "[{\"field\":\"income\",\"channel\":\"x\",\"type\":\"R\"},{\"field\":\"health\",\"channel\":\"y\",\"type\":\"R\"}]"
+      "value": [
+        {"field": "income", "channel": "x", "type": "R"},
+        {"field": "health", "channel": "y", "type": "R"}
+      ]
     },
     {
       "name": "view_translate_anchor",
@@ -113,12 +116,7 @@
     },
     {
       "name": "view_modify",
-      "on": [
-        {
-          "events": {"signal": "view_tuple"},
-          "update": "modify(\"view_store\", view_tuple, true)"
-        }
-      ]
+      "update": "modify(\"view_store\", view_tuple, true)"
     }
   ],
   "marks": [

diff --git a/examples/compiled/concat_bar_layer_circle.vg.json b/examples/compiled/concat_bar_layer_circle.vg.json
@@ -294,7 +294,6 @@
       "signals": [
         {
           "name": "pts_tuple",
-          "value": {},
           "on": [
             {
               "events": [{"source": "scope", "type": "click"}],
@@ -305,16 +304,11 @@
         },
         {
           "name": "pts_tuple_fields",
-          "update": "[{\"field\":\"Major_Genre\",\"channel\":\"x\",\"type\":\"E\"}]"
+          "value": [{"field": "Major_Genre", "channel": "x", "type": "E"}]
         },
         {
           "name": "pts_modify",
-          "on": [
-            {
-              "events": {"signal": "pts_tuple"},
-              "update": "modify(\"pts_store\", pts_tuple, true)"
-            }
-          ]
+          "update": "modify(\"pts_store\", pts_tuple, true)"
         }
       ],
       "marks": [

diff --git a/examples/compiled/interactive_area_brush.vg.json b/examples/compiled/interactive_area_brush.vg.json
@@ -132,7 +132,7 @@
     },
     {
       "name": "brush_tuple_fields",
-      "update": "[{\"field\":\"yearmonth_date\",\"channel\":\"x\",\"type\":\"R\"}]"
+      "value": [{"field": "yearmonth_date", "channel": "x", "type": "R"}]
     },
     {
       "name": "brush_translate_anchor",
@@ -205,12 +205,7 @@
     },
     {
       "name": "brush_modify",
-      "on": [
-        {
-          "events": {"signal": "brush_tuple"},
-          "update": "modify(\"brush_store\", brush_tuple, true)"
-        }
-      ]
+      "update": "modify(\"brush_store\", brush_tuple, true)"
     }
   ],
   "marks": [

diff --git a/examples/compiled/interactive_bar_select_highlight.vg.json b/examples/compiled/interactive_bar_select_highlight.vg.json
@@ -45,7 +45,6 @@
     {"name": "select", "update": "vlSelectionResolve(\"select_store\")"},
     {
       "name": "highlight_tuple",
-      "value": {},
       "on": [
         {
           "events": [{"source": "scope", "type": "mouseover"}],
@@ -56,20 +55,14 @@
     },
     {
       "name": "highlight_tuple_fields",
-      "update": "[{\"field\":\"_vgsid_\",\"type\":\"E\"}]"
+      "value": [{"field": "_vgsid_", "type": "E"}]
     },
     {
       "name": "highlight_modify",
-      "on": [
-        {
-          "events": {"signal": "highlight_tuple"},
-          "update": "modify(\"highlight_store\", highlight_tuple, true)"
-        }
-      ]
+      "update": "modify(\"highlight_store\", highlight_tuple, true)"
     },
     {
       "name": "select_tuple",
-      "value": {},
       "on": [
         {
           "events": [{"source": "scope", "type": "click"}],
@@ -80,7 +73,7 @@
     },
     {
       "name": "select_tuple_fields",
-      "update": "[{\"field\":\"_vgsid_\",\"type\":\"E\"}]"
+      "value": [{"field": "_vgsid_", "type": "E"}]
     },
     {
       "name": "select_toggle",
@@ -94,12 +87,7 @@
     },
     {
       "name": "select_modify",
-      "on": [
-        {
-          "events": {"signal": "select_tuple"},
-          "update": "modify(\"select_store\", select_toggle ? null : select_tuple, select_toggle ? null : true, select_toggle ? select_tuple : null)"
-        }
-      ]
+      "update": "modify(\"select_store\", select_toggle ? null : select_tuple, select_toggle ? null : true, select_toggle ? select_tuple : null)"
     }
   ],
   "marks": [

diff --git a/examples/compiled/interactive_brush.svg b/examples/compiled/interactive_brush.svg
diff --git a/examples/compiled/interactive_brush.vg.json b/examples/compiled/interactive_brush.vg.json
@@ -21,7 +21,7 @@
     {"name": "brush", "update": "vlSelectionResolve(\"brush_store\")"},
     {
       "name": "brush_x",
-      "value": [],
+      "init": "[scale(\"x\", 55), scale(\"x\", 160)]",
       "on": [
         {
           "events": {
@@ -67,6 +67,7 @@
     },
     {
       "name": "brush_Horsepower",
+      "init": "[55, 160]",
       "on": [
         {
           "events": {"signal": "brush_x"},
@@ -76,7 +77,7 @@
     },
     {
       "name": "brush_y",
-      "value": [],
+      "init": "[scale(\"y\", 13), scale(\"y\", 37)]",
       "on": [
         {
           "events": {
@@ -122,6 +123,7 @@
     },
     {
       "name": "brush_Miles_per_Gallon",
+      "init": "[13, 37]",
       "on": [
         {
           "events": {"signal": "brush_y"},
@@ -135,19 +137,23 @@
     },
     {
       "name": "brush_tuple",
+      "init": "{unit: \"\", fields: brush_tuple_fields, values: [[55, 160], [13, 37]]}",
       "on": [
         {
           "events": [
             {"signal": "brush_Horsepower"},
             {"signal": "brush_Miles_per_Gallon"}
           ],
-          "update": "brush_Horsepower && brush_Miles_per_Gallon ? {unit: \"\", fields: brush_tuple_fields, values: [brush_Horsepower, brush_Miles_per_Gallon]} : null"
+          "update": "brush_Horsepower && brush_Miles_per_Gallon ? {unit: \"\", fields: brush_tuple_fields, values: [brush_Horsepower,brush_Miles_per_Gallon]} : null"
         }
       ]
     },
     {
       "name": "brush_tuple_fields",
-      "update": "[{\"field\":\"Horsepower\",\"channel\":\"x\",\"type\":\"R\"},{\"field\":\"Miles_per_Gallon\",\"channel\":\"y\",\"type\":\"R\"}]"
+      "value": [
+        {"field": "Horsepower", "channel": "x", "type": "R"},
+        {"field": "Miles_per_Gallon", "channel": "y", "type": "R"}
+      ]
     },
     {
       "name": "brush_translate_anchor",
@@ -220,12 +226,7 @@
     },
     {
       "name": "brush_modify",
-      "on": [
-        {
-          "events": {"signal": "brush_tuple"},
-          "update": "modify(\"brush_store\", brush_tuple, true)"
-        }
-      ]
+      "update": "modify(\"brush_store\", brush_tuple, true)"
     }
   ],
   "marks": [

diff --git a/examples/compiled/interactive_concat_layer.vg.json b/examples/compiled/interactive_concat_layer.vg.json
@@ -297,7 +297,6 @@
       "signals": [
         {
           "name": "pts_tuple",
-          "value": {},
           "on": [
             {
               "events": [{"source": "scope", "type": "click"}],
@@ -308,16 +307,11 @@
         },
         {
           "name": "pts_tuple_fields",
-          "update": "[{\"field\":\"Major_Genre\",\"channel\":\"x\",\"type\":\"E\"}]"
+          "value": [{"field": "Major_Genre", "channel": "x", "type": "E"}]
         },
         {
           "name": "pts_modify",
-          "on": [
-            {
-              "events": {"signal": "pts_tuple"},
-              "update": "modify(\"pts_store\", pts_tuple, true)"
-            }
-          ]
+          "update": "modify(\"pts_store\", pts_tuple, true)"
         }
       ],
       "marks": [