docs(examples): Add example showing how to set the zorder via a condi…

…tional order encoding (#9136) * Add example showing how to set the zorder via order sorting * chore: update examples [CI] * Change "mouseover" to "pointerover" * chore: update examples [CI] * Add schema to spec * Change condition order * Add example to index file --------- Co-authored-by: GitHub Actions Bot <[email protected]>
vega · Oct 28, 2023 · 1263d66 · 1263d66
1 parent 0fb8a8a
commit 1263d66
Show file tree

Hide file tree

Showing 6 changed files with 212 additions and 1 deletion.
diff --git a/examples/compiled/selection_type_point_zorder.png b/examples/compiled/selection_type_point_zorder.png
diff --git a/examples/compiled/selection_type_point_zorder.svg b/examples/compiled/selection_type_point_zorder.svg
diff --git a/examples/compiled/selection_type_point_zorder.vg.json b/examples/compiled/selection_type_point_zorder.vg.json
@@ -0,0 +1,179 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "background": "white",
+  "padding": 5,
+  "width": 200,
+  "height": 200,
+  "style": "cell",
+  "data": [
+    {
+      "name": "param_122_store",
+      "transform": [{"type": "collect", "sort": {"field": "_vgsid_"}}]
+    },
+    {
+      "name": "source_0",
+      "url": "https://cdn.jsdelivr.net/npm/[email protected]/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": "param_122",
+      "update": "vlSelectionResolve(\"param_122_store\", \"union\", true, true)"
+    },
+    {
+      "name": "param_122_tuple",
+      "on": [
+        {
+          "events": [{"source": "scope", "type": "pointerover"}],
+          "update": "datum && item().mark.marktype !== 'group' && indexof(item().mark.role, 'legend') < 0 ? {unit: \"\", _vgsid_: (item().isVoronoi ? datum.datum : datum)[\"_vgsid_\"]} : null",
+          "force": true
+        },
+        {"events": [{"source": "view", "type": "dblclick"}], "update": "null"}
+      ]
+    },
+    {
+      "name": "param_122_toggle",
+      "value": false,
+      "on": [
+        {
+          "events": [{"source": "scope", "type": "pointerover"}],
+          "update": "event.shiftKey"
+        },
+        {"events": [{"source": "view", "type": "dblclick"}], "update": "false"}
+      ]
+    },
+    {
+      "name": "param_122_modify",
+      "on": [
+        {
+          "events": {"signal": "param_122_tuple"},
+          "update": "modify(\"param_122_store\", param_122_toggle ? null : param_122_tuple, param_122_toggle ? null : true, param_122_toggle ? param_122_tuple : null)"
+        }
+      ]
+    }
+  ],
+  "marks": [
+    {
+      "name": "marks",
+      "type": "symbol",
+      "style": ["circle"],
+      "interactive": true,
+      "from": {"data": "source_0"},
+      "encode": {
+        "update": {
+          "opacity": {"value": 1},
+          "fill": [
+            {
+              "test": "length(data(\"param_122_store\")) && vlSelectionIdTest(\"param_122_store\", datum)",
+              "value": "coral"
+            },
+            {"value": "grey"}
+          ],
+          "zindex": [
+            {
+              "test": "length(data(\"param_122_store\")) && vlSelectionIdTest(\"param_122_store\", datum)",
+              "value": 1
+            },
+            {"value": 0}
+          ],
+          "ariaRoleDescription": {"value": "circle"},
+          "description": {
+            "signal": "\"Horsepower: \" + (format(datum[\"Horsepower\"], \"\")) + \"; Miles_per_Gallon: \" + (format(datum[\"Miles_per_Gallon\"], \"\"))"
+          },
+          "x": {"scale": "x", "field": "Horsepower"},
+          "y": {"scale": "y", "field": "Miles_per_Gallon"},
+          "size": [
+            {
+              "test": "length(data(\"param_122_store\")) && vlSelectionIdTest(\"param_122_store\", datum)",
+              "value": 400
+            },
+            {"value": 100}
+          ],
+          "shape": {"value": "circle"}
+        }
+      }
+    }
+  ],
+  "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
+    }
+  ],
+  "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
+    }
+  ]
+}
diff --git a/examples/specs/selection_type_point_zorder.vl.json b/examples/specs/selection_type_point_zorder.vl.json
@@ -0,0 +1,26 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "data": {
+    "url": "https://cdn.jsdelivr.net/npm/[email protected]/data/cars.json"
+  },
+  "mark": {"type": "circle", "opacity": 1},
+  "encoding": {
+    "color": {
+      "condition": {"param": "param_122", "value": "coral", "empty": false},
+      "value": "grey"
+    },
+    "order": {
+      "condition": {"param": "param_122", "value": 1, "empty": false},
+      "value": 0
+    },
+    "size": {
+      "condition": {"param": "param_122", "value": 400, "empty": false},
+      "value": 100
+    },
+    "x": {"field": "Horsepower", "type": "quantitative"},
+    "y": {"field": "Miles_per_Gallon", "type": "quantitative"}
+  },
+  "params": [
+    {"name": "param_122", "select": {"type": "point", "on": "pointerover"}}
+  ]
+}
diff --git a/site/_data/examples.json b/site/_data/examples.json
@@ -904,6 +904,11 @@
         "name": "param_search_input",
         "description": "Search to highlight the relevant car models. Regexes are supported so you can type e.g. `mazda|ford`",
         "title": "Search Input"
+      },
+      {
+        "name": "selection_type_point_zorder",
+        "description": "Show points on top when hovered over with the pointer",
+        "title": "Change zorder on hover"
       }
     ],
     "Interactive Multi-View Displays": [

diff --git a/site/docs/encoding.md b/site/docs/encoding.md
@@ -413,7 +413,7 @@ The key channel can enable object constancy for transitions over dynamic data. W
 
 ## Order Channel
 
-`order` channel can define a data field (or a ordered list of data fields) that are used to sorts stacking order for stacked charts (see [an example in the `stack` page](stack.html#order)) and the order of data points in line marks for connected scatterplots (see [an example in the `line` page](line.html#connected-scatter-plot)).
+`order` channel can define a data field (or a ordered list of data fields) that are used to sorts stacking order for stacked charts (see [an example in the `stack` page](stack.html#order)), the order of data points in line marks for connected scatterplots (see [an example in the `line` page](line.html#connected-scatter-plot)), and which data points are plotted on top in a chart (the "zorder", see [an example in the gallery]({{ site.baseurl }}/examples/selection_type_point_zorder.html)).
 
 {% include table.html props="order" source="Encoding" %}