feat: support offset channel for grouped bar chart and jittering (#7684)

examples/compiled/bar_grouped.vg.json

@@ -2,163 +2,141 @@
   "$schema": "https://vega.github.io/schema/vega/v5.json",
   "background": "white",
   "padding": 5,
+  "height": 200,
+  "style": "cell",
   "data": [
     {
       "name": "source_0",
-      "url": "data/population.json",
-      "format": {"type": "json"},
+      "values": [
+        {"category": "A", "group": "x", "value": 0.1},
+        {"category": "A", "group": "y", "value": 0.6},
+        {"category": "A", "group": "z", "value": 0.9},
+        {"category": "B", "group": "x", "value": 0.7},
+        {"category": "B", "group": "y", "value": 0.2},
+        {"category": "B", "group": "z", "value": 1.1},
+        {"category": "C", "group": "x", "value": 0.6},
+        {"category": "C", "group": "y", "value": 0.1},
+        {"category": "C", "group": "z", "value": 0.2}
+      ]
+    },
+    {
+      "name": "data_0",
+      "source": "source_0",
       "transform": [
-        {"type": "filter", "expr": "datum.year == 2000"},
         {
-          "type": "formula",
-          "expr": "datum.sex == 2 ? 'Female' : 'Male'",
-          "as": "gender"
-        },
-        {
-          "type": "aggregate",
-          "groupby": ["gender", "age"],
-          "ops": ["sum"],
-          "fields": ["people"],
-          "as": ["sum_people"]
+          "type": "stack",
+          "groupby": ["category", "group"],
+          "field": "value",
+          "sort": {"field": [], "order": []},
+          "as": ["value_start", "value_end"],
+          "offset": "zero"
         },
         {
           "type": "filter",
-          "expr": "isValid(datum[\"sum_people\"]) && isFinite(+datum[\"sum_people\"])"
+          "expr": "isValid(datum[\"value\"]) && isFinite(+datum[\"value\"])"
         }
       ]
-    },
-    {
-      "name": "column_domain",
-      "source": "source_0",
-      "transform": [{"type": "aggregate", "groupby": ["age"]}]
     }
   ],
   "signals": [
-    {"name": "x_step", "value": 12},
     {
-      "name": "child_width",
-      "update": "bandspace(domain('x').length, 0.1, 0.05) * x_step"
+      "name": "x_step",
+      "update": "20 * bandspace(domain('xOffset').length, 0, 0) / (1-0.2)"
     },
-    {"name": "child_height", "value": 200}
+    {
+      "name": "width",
+      "update": "bandspace(domain('x').length, 0.2, 0.2) * x_step"
+    }
   ],
-  "layout": {
-    "padding": {"row": 20, "column": 10},
-    "titleAnchor": {"column": "end"},
-    "offset": {"columnTitle": 10},
-    "columns": {"signal": "length(data('column_domain'))"},
-    "bounds": "full",
-    "align": "all"
-  },
   "marks": [
     {
-      "name": "column-title",
-      "type": "group",
-      "role": "column-title",
-      "title": {
-        "text": "age",
-        "style": "guide-title",
-        "orient": "bottom",
-        "offset": 10
-      }
-    },
-    {
-      "name": "row_header",
-      "type": "group",
-      "role": "row-header",
-      "encode": {"update": {"height": {"signal": "child_height"}}},
-      "axes": [
-        {
-          "scale": "y",
-          "orient": "left",
-          "grid": false,
-          "title": "population",
-          "labelOverlap": true,
-          "tickCount": {"signal": "ceil(child_height/40)"},
-          "zindex": 0
-        }
-      ]
-    },
-    {
-      "name": "column_footer",
-      "type": "group",
-      "role": "column-footer",
-      "from": {"data": "column_domain"},
-      "sort": {"field": "datum[\"age\"]", "order": "ascending"},
-      "title": {
-        "text": {
-          "signal": "isValid(parent[\"age\"]) ? parent[\"age\"] : \"\"+parent[\"age\"]"
-        },
-        "style": "guide-label",
-        "frame": "group",
-        "orient": "bottom",
-        "offset": 10
-      },
-      "encode": {"update": {"width": {"signal": "child_width"}}}
-    },
-    {
-      "name": "cell",
-      "type": "group",
-      "style": "cell",
-      "from": {
-        "facet": {"name": "facet", "data": "source_0", "groupby": ["age"]}
-      },
-      "sort": {"field": ["datum[\"age\"]"], "order": ["ascending"]},
+      "name": "marks",
+      "type": "rect",
+      "style": ["bar"],
+      "from": {"data": "data_0"},
       "encode": {
         "update": {
-          "width": {"signal": "child_width"},
-          "height": {"signal": "child_height"}
+          "fill": {"scale": "color", "field": "group"},
+          "ariaRoleDescription": {"value": "bar"},
+          "description": {
+            "signal": "\"category: \" + (isValid(datum[\"category\"]) ? datum[\"category\"] : \"\"+datum[\"category\"]) + \"; value: \" + (format(datum[\"value\"], \"\")) + \"; group: \" + (isValid(datum[\"group\"]) ? datum[\"group\"] : \"\"+datum[\"group\"])"
+          },
+          "x": {
+            "scale": "x",
+            "field": "category",
+            "offset": {"scale": "xOffset", "field": "group"}
+          },
+          "width": {"scale": "xOffset", "band": 1},
+          "y": {"scale": "y", "field": "value_end"},
+          "y2": {"scale": "y", "field": "value_start"}
         }
-      },
-      "marks": [
-        {
-          "name": "child_marks",
-          "type": "rect",
-          "style": ["bar"],
-          "from": {"data": "facet"},
-          "encode": {
-            "update": {
-              "fill": {"scale": "color", "field": "gender"},
-              "ariaRoleDescription": {"value": "bar"},
-              "description": {
-                "signal": "\"gender: \" + (isValid(datum[\"gender\"]) ? datum[\"gender\"] : \"\"+datum[\"gender\"]) + \"; population: \" + (format(datum[\"sum_people\"], \"\"))"
-              },
-              "x": {"scale": "x", "field": "gender"},
-              "width": {"scale": "x", "band": 1},
-              "y": {"scale": "y", "field": "sum_people"},
-              "y2": {"scale": "y", "value": 0}
-            }
-          }
-        }
-      ]
+      }
     }
   ],
   "scales": [
     {
       "name": "x",
       "type": "band",
-      "domain": {"data": "source_0", "field": "gender", "sort": true},
+      "domain": {"data": "data_0", "field": "category", "sort": true},
       "range": {"step": {"signal": "x_step"}},
-      "paddingInner": 0.1,
-      "paddingOuter": 0.05
+      "paddingInner": 0.2,
+      "paddingOuter": 0.2
     },
     {
       "name": "y",
       "type": "linear",
-      "domain": {"data": "source_0", "field": "sum_people"},
-      "range": [{"signal": "child_height"}, 0],
+      "domain": {"data": "data_0", "fields": ["value_start", "value_end"]},
+      "range": [{"signal": "height"}, 0],
       "nice": true,
       "zero": true
     },
+    {
+      "name": "xOffset",
+      "type": "band",
+      "domain": {"data": "data_0", "field": "group", "sort": true},
+      "range": {"step": 20}
+    },
     {
       "name": "color",
       "type": "ordinal",
-      "domain": {"data": "source_0", "field": "gender", "sort": true},
-      "range": ["#675193", "#ca8861"]
+      "domain": {"data": "data_0", "field": "group", "sort": true},
+      "range": "category"
+    }
+  ],
+  "axes": [
+    {
+      "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": "category",
+      "labelAlign": "right",
+      "labelAngle": 270,
+      "labelBaseline": "middle",
+      "zindex": 0
+    },
+    {
+      "scale": "y",
+      "orient": "left",
+      "grid": false,
+      "title": "value",
+      "labelOverlap": true,
+      "tickCount": {"signal": "ceil(height/40)"},
+      "zindex": 0
     }
   ],
-  "legends": [{"fill": "color", "symbolType": "square", "title": "gender"}],
-  "config": {
-    "axis": {"domainWidth": 1},
-    "style": {"cell": {"stroke": "transparent"}}
-  }
+  "legends": [{"fill": "color", "symbolType": "square", "title": "group"}]
 }