feat(mark): add an array mark for gridded and multi-dimensional data

build/vega-lite-schema.json

@@ -7571,6 +7571,10 @@
           "description": "A boolean flag indicating if ARIA default attributes should be included for marks and guides (SVG output only). If false, the `\"aria-hidden\"` attribute will be set for all guides, removing them from the ARIA accessibility tree and Vega-Lite will not generate default descriptions for marks.\n\n__Default value:__ `true`.",
           "type": "boolean"
         },
+        "array": {
+          "$ref": "#/definitions/MarkConfig",
+          "description": "Array-Specific Config"
+        },
         "autosize": {
           "anyOf": [
             {
@@ -16014,6 +16018,7 @@
       "enum": [
         "arc",
         "area",
+        "array",
         "bar",
         "image",
         "line",
@@ -28513,6 +28518,10 @@
           "$ref": "#/definitions/AreaConfig",
           "description": "Area-Specific Config"
         },
+        "array": {
+          "$ref": "#/definitions/MarkConfig",
+          "description": "Array-Specific Config"
+        },
         "bar": {
           "$ref": "#/definitions/BarConfig",
           "description": "Bar-Specific Config"

examples/compiled/array_aspect.vg.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v6.json",
+  "description": "An elevation grid fitted to a square view, keeping its cells square rather than stretching them.",
+  "background": "white",
+  "padding": 5,
+  "width": 300,
+  "height": 300,
+  "style": "view",
+  "data": [
+    {
+      "name": "source_0",
+      "url": "data/volcano.json",
+      "format": {"type": "json"},
+      "transform": [
+        {
+          "type": "formula",
+          "expr": "{width: datum.width, height: datum.height, values: datum.values}",
+          "as": "__array_grid"
+        },
+        {
+          "type": "formula",
+          "expr": "extent(datum[\"values\"])[0]",
+          "as": "array_min_values"
+        },
+        {
+          "type": "formula",
+          "expr": "extent(datum[\"values\"])[1]",
+          "as": "array_max_values"
+        }
+      ]
+    }
+  ],
+  "marks": [
+    {
+      "name": "marks",
+      "type": "image",
+      "style": ["array"],
+      "from": {"data": "source_0"},
+      "encode": {
+        "update": {
+          "aspect": {"value": true},
+          "ariaRoleDescription": {"value": "array"},
+          "description": {
+            "signal": "\"values: \" + (format(datum[\"values\"], \"\"))"
+          },
+          "x": {"value": 0},
+          "width": {"signal": "width"},
+          "y": {"value": 0},
+          "height": {"signal": "height"},
+          "image": {"field": "image"}
+        }
+      },
+      "transform": [
+        {
+          "type": "heatmap",
+          "field": "datum.__array_grid",
+          "color": {"expr": "scale('color', datum.$value)"},
+          "opacity": 1
+        }
+      ]
+    }
+  ],
+  "scales": [
+    {
+      "name": "color",
+      "type": "linear",
+      "domain": {
+        "data": "source_0",
+        "fields": ["array_min_values", "array_max_values"]
+      },
+      "range": {"scheme": "viridis"},
+      "interpolate": "hcl",
+      "zero": false
+    }
+  ],
+  "legends": [
+    {
+      "fill": "color",
+      "gradientLength": {"signal": "clamp(height, 64, 200)"},
+      "title": "values"
+    }
+  ]
+}

examples/compiled/array_axis.vg.json

@@ -0,0 +1,116 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v6.json",
+  "description": "An elevation grid labelled with the extent it covers.",
+  "background": "white",
+  "padding": 5,
+  "width": 348,
+  "height": 244,
+  "style": "cell",
+  "data": [
+    {
+      "name": "source_0",
+      "url": "data/volcano.json",
+      "format": {"type": "json"},
+      "transform": [
+        {
+          "type": "formula",
+          "expr": "{width: datum.width, height: datum.height, values: datum.values}",
+          "as": "__array_grid"
+        },
+        {
+          "type": "formula",
+          "expr": "extent(datum[\"values\"])[0]",
+          "as": "array_min_values"
+        },
+        {
+          "type": "formula",
+          "expr": "extent(datum[\"values\"])[1]",
+          "as": "array_max_values"
+        }
+      ]
+    }
+  ],
+  "marks": [
+    {
+      "name": "marks",
+      "type": "image",
+      "style": ["array"],
+      "from": {"data": "source_0"},
+      "encode": {
+        "update": {
+          "ariaRoleDescription": {"value": "array"},
+          "description": {
+            "signal": "\"values: \" + (format(datum[\"values\"], \"\"))"
+          },
+          "x": {"value": 0},
+          "width": {"signal": "width"},
+          "y": {"value": 0},
+          "height": {"signal": "height"},
+          "image": {"field": "image"},
+          "aspect": {"value": false}
+        }
+      },
+      "transform": [
+        {
+          "type": "heatmap",
+          "field": "datum.__array_grid",
+          "color": {"expr": "scale('color', datum.$value)"},
+          "opacity": 1
+        }
+      ]
+    }
+  ],
+  "scales": [
+    {
+      "name": "x",
+      "type": "linear",
+      "domain": {"fields": [[0], [87]]},
+      "range": [0, {"signal": "width"}]
+    },
+    {
+      "name": "y",
+      "type": "linear",
+      "domain": {"fields": [[0], [61]]},
+      "range": [{"signal": "height"}, 0]
+    },
+    {
+      "name": "color",
+      "type": "linear",
+      "domain": {
+        "data": "source_0",
+        "fields": ["array_min_values", "array_max_values"]
+      },
+      "range": {"scheme": "viridis"},
+      "interpolate": "hcl",
+      "zero": false
+    }
+  ],
+  "axes": [
+    {
+      "scale": "x",
+      "orient": "bottom",
+      "grid": false,
+      "title": "column",
+      "labelFlush": true,
+      "labelOverlap": true,
+      "tickCount": {"signal": "ceil(width/40)"},
+      "zindex": 0
+    },
+    {
+      "scale": "y",
+      "orient": "left",
+      "grid": false,
+      "title": "row",
+      "labelOverlap": true,
+      "tickCount": {"signal": "ceil(height/40)"},
+      "zindex": 0
+    }
+  ],
+  "legends": [
+    {
+      "fill": "color",
+      "gradientLength": {"signal": "clamp(height, 64, 200)"},
+      "title": "values"
+    }
+  ]
+}