docs: add heat lane example

examples/compiled/bar_heatlane.vg.json

@@ -0,0 +1,150 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "description": "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/",
+  "background": "white",
+  "padding": 5,
+  "width": 400,
+  "height": 150,
+  "title": {"text": "Heat Lane of Horsepower", "frame": "group"},
+  "style": "cell",
+  "data": [
+    {
+      "name": "source_0",
+      "url": "data/cars.json",
+      "format": {"type": "json"},
+      "transform": [
+        {
+          "type": "extent",
+          "field": "Horsepower",
+          "signal": "bin_maxbins_10_Horsepower_extent"
+        },
+        {
+          "type": "bin",
+          "field": "Horsepower",
+          "as": ["bin_Horsepower_start", "bin_Horsepower_end"],
+          "signal": "bin_maxbins_10_Horsepower_bins",
+          "extent": {"signal": "bin_maxbins_10_Horsepower_extent"},
+          "maxbins": 10
+        },
+        {
+          "type": "aggregate",
+          "groupby": ["bin_Horsepower_start", "bin_Horsepower_end"],
+          "ops": ["count"],
+          "fields": [null],
+          "as": ["count"]
+        },
+        {
+          "type": "extent",
+          "field": "count",
+          "signal": "bin_maxbins_10_count_extent"
+        },
+        {
+          "type": "bin",
+          "field": "count",
+          "as": ["bin_count_start", "bin_count_end"],
+          "signal": "bin_maxbins_10_count_bins",
+          "extent": {"signal": "bin_maxbins_10_count_extent"},
+          "maxbins": 10
+        },
+        {"type": "formula", "expr": "-datum.bin_count_end/2", "as": "y2"},
+        {"type": "formula", "expr": "datum.bin_count_end/2", "as": "y"},
+        {
+          "type": "joinaggregate",
+          "as": ["max_bin_count_end"],
+          "ops": ["max"],
+          "fields": ["bin_count_end"]
+        },
+        {
+          "type": "filter",
+          "expr": "isValid(datum[\"bin_Horsepower_start\"]) && isFinite(+datum[\"bin_Horsepower_start\"])"
+        }
+      ]
+    }
+  ],
+  "marks": [
+    {
+      "name": "layer_0_marks",
+      "type": "rect",
+      "style": ["bar"],
+      "from": {"data": "source_0"},
+      "encode": {
+        "update": {
+          "cornerRadius": {"value": 3},
+          "fill": {"scale": "color", "field": "max_bin_count_end"},
+          "ariaRoleDescription": {"value": "bar"},
+          "description": {
+            "signal": "\"Horsepower: \" + (format(datum[\"bin_Horsepower_start\"], \"\")) + \"; y: \" + (isValid(datum[\"y\"]) ? datum[\"y\"] : \"\"+datum[\"y\"]) + \"; bin_Horsepower_end: \" + (format(datum[\"bin_Horsepower_end\"], \"\")) + \"; y2: \" + (isValid(datum[\"y2\"]) ? datum[\"y2\"] : \"\"+datum[\"y2\"]) + \"; count: \" + (isValid(datum[\"max_bin_count_end\"]) ? datum[\"max_bin_count_end\"] : \"\"+datum[\"max_bin_count_end\"])"
+          },
+          "x": {"scale": "x", "field": "bin_Horsepower_start", "offset": 2},
+          "x2": {"scale": "x", "field": "bin_Horsepower_end", "offset": -2},
+          "y": {"scale": "y", "field": "y", "band": 0.5},
+          "y2": {"scale": "y", "field": "y2", "band": 0.5}
+        }
+      }
+    },
+    {
+      "name": "layer_1_marks",
+      "type": "rect",
+      "style": ["bar"],
+      "from": {"data": "source_0"},
+      "encode": {
+        "update": {
+          "fill": {"scale": "color", "field": "bin_count_end"},
+          "ariaRoleDescription": {"value": "bar"},
+          "description": {
+            "signal": "\"Horsepower: \" + (format(datum[\"bin_Horsepower_start\"], \"\")) + \"; y: \" + (isValid(datum[\"y\"]) ? datum[\"y\"] : \"\"+datum[\"y\"]) + \"; bin_Horsepower_end: \" + (format(datum[\"bin_Horsepower_end\"], \"\")) + \"; y2: \" + (isValid(datum[\"y2\"]) ? datum[\"y2\"] : \"\"+datum[\"y2\"]) + \"; count: \" + (isValid(datum[\"bin_count_end\"]) ? datum[\"bin_count_end\"] : \"\"+datum[\"bin_count_end\"])"
+          },
+          "x": {"scale": "x", "field": "bin_Horsepower_start", "offset": 2},
+          "x2": {"scale": "x", "field": "bin_Horsepower_end", "offset": -2},
+          "y": {"scale": "y", "field": "y", "offset": -3, "band": 0.5},
+          "y2": {"scale": "y", "field": "y2", "offset": 3, "band": 0.5}
+        }
+      }
+    }
+  ],
+  "scales": [
+    {
+      "name": "x",
+      "type": "linear",
+      "domain": {
+        "data": "source_0",
+        "fields": ["bin_Horsepower_start", "bin_Horsepower_end"]
+      },
+      "range": [0, {"signal": "width"}],
+      "nice": true,
+      "zero": true
+    },
+    {
+      "name": "y",
+      "type": "band",
+      "domain": {"data": "source_0", "fields": ["y", "y2"], "sort": true},
+      "range": [0, {"signal": "height"}],
+      "paddingInner": 0.1,
+      "paddingOuter": 0.05
+    },
+    {
+      "name": "color",
+      "type": "ordinal",
+      "domain": {
+        "data": "source_0",
+        "fields": ["max_bin_count_end", "bin_count_end"],
+        "sort": true
+      },
+      "range": {"scheme": "lighttealblue"},
+      "interpolate": "hcl"
+    }
+  ],
+  "axes": [
+    {
+      "scale": "x",
+      "orient": "bottom",
+      "grid": false,
+      "title": "Horsepower",
+      "labelFlush": true,
+      "labelOverlap": true,
+      "tickCount": {"signal": "ceil(width/40)"},
+      "zindex": 0
+    }
+  ],
+  "legends": [{"title": "count", "fill": "color", "symbolType": "square"}]
+}

examples/specs/bar_heatlane.vl.json

@@ -0,0 +1,68 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/",
+  "data": {"url": "data/cars.json"},
+  "height": 150,
+  "width": 400,
+  "title": "Heat Lane of Horsepower",
+  "transform": [
+    {
+      "bin": true,
+      "field": "Horsepower",
+      "as": ["bin_Horsepower_start", "bin_Horsepower_end"]
+    },
+    {
+      "aggregate": [{"op": "count", "as": "count"}],
+      "groupby": ["bin_Horsepower_start", "bin_Horsepower_end"]
+    },
+    {"bin": true, "field": "count", "as": ["bin_count_start", "bin_count_end"]},
+    {"calculate": "-datum.bin_count_end/2", "as": "y2"},
+    {"calculate": "datum.bin_count_end/2", "as": "y"},
+    {
+      "joinaggregate": [
+        {"field": "bin_count_end", "op": "max", "as": "max_bin_count_end"}
+      ]
+    }
+  ],
+  "encoding": {
+    "x": {
+      "field": "bin_Horsepower_start",
+      "type": "quantitative",
+      "title": "Horsepower",
+      "axis": {"grid": false}
+    },
+    "x2": {"field": "bin_Horsepower_end"},
+    "y": {"field": "y", "axis": null},
+    "y2": {"field": "y2"}
+  },
+  "layer": [
+    {
+      "mark": {
+        "type": "bar",
+        "xOffset": 2,
+        "x2Offset": -2,
+        "cornerRadius": 3
+      },
+      "encoding": {
+        "color": {
+          "field": "max_bin_count_end",
+          "type": "ordinal",
+          "title": "count",
+          "scale": {"scheme": "lighttealblue"}
+        }
+      }
+    },
+    {
+      "mark": {
+        "type": "bar",
+        "xOffset": 2,
+        "x2Offset": -2,
+        "yOffset": -3,
+        "y2Offset": 3
+      },
+      "encoding": {
+        "color": {"field": "bin_count_end", "type": "ordinal", "title": "count"}
+      }
+    }
+  ]
+}

examples/specs/normalized/bar_heatlane_normalized.vl.json

@@ -0,0 +1,70 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "Heat lane chart based on https://www.smashingmagazine.com/2022/07/accessibility-first-approach-chart-visual-design/",
+  "data": {"url": "data/cars.json"},
+  "height": 150,
+  "width": 400,
+  "title": "Heat Lane of Horsepower",
+  "layer": [
+    {
+      "mark": {"type": "bar", "xOffset": 2, "x2Offset": -2, "cornerRadius": 3},
+      "encoding": {
+        "x": {
+          "field": "bin_Horsepower_start",
+          "type": "quantitative",
+          "title": "Horsepower",
+          "axis": {"grid": false}
+        },
+        "x2": {"field": "bin_Horsepower_end"},
+        "y": {"field": "y", "axis": null},
+        "y2": {"field": "y2"},
+        "color": {
+          "field": "max_bin_count_end",
+          "type": "ordinal",
+          "title": "count",
+          "scale": {"scheme": "lighttealblue"}
+        }
+      }
+    },
+    {
+      "mark": {
+        "type": "bar",
+        "xOffset": 2,
+        "x2Offset": -2,
+        "yOffset": -3,
+        "y2Offset": 3
+      },
+      "encoding": {
+        "x": {
+          "field": "bin_Horsepower_start",
+          "type": "quantitative",
+          "title": "Horsepower",
+          "axis": {"grid": false}
+        },
+        "x2": {"field": "bin_Horsepower_end"},
+        "y": {"field": "y", "axis": null},
+        "y2": {"field": "y2"},
+        "color": {"field": "bin_count_end", "type": "ordinal", "title": "count"}
+      }
+    }
+  ],
+  "transform": [
+    {
+      "bin": true,
+      "field": "Horsepower",
+      "as": ["bin_Horsepower_start", "bin_Horsepower_end"]
+    },
+    {
+      "aggregate": [{"op": "count", "as": "count"}],
+      "groupby": ["bin_Horsepower_start", "bin_Horsepower_end"]
+    },
+    {"bin": true, "field": "count", "as": ["bin_count_start", "bin_count_end"]},
+    {"calculate": "-datum.bin_count_end/2", "as": "y2"},
+    {"calculate": "datum.bin_count_end/2", "as": "y"},
+    {
+      "joinaggregate": [
+        {"field": "bin_count_end", "op": "max", "as": "max_bin_count_end"}
+      ]
+    }
+  ]
+}

site/_data/examples.json

@@ -95,6 +95,10 @@
       {
         "name": "bar_axis_space_saving",
         "title": "Bar Chart with a Spacing-Saving Y-Axis"
+      },
+      {
+        "name": "bar_heatlane",
+        "title": "Heat Lane Chart"
       }
     ],
     "Histograms, Density Plots, and Dot Plots": [

site/_includes/docs_toc.md

@@ -287,6 +287,7 @@
         - [Nominal]({{site.baseurl}}/docs/type.html#nominal)
         - [GeoJSON]({{site.baseurl}}/docs/type.html#geojson)
     - [Value]({{site.baseurl}}/docs/value.html)
+        - [Examples]({{site.baseurl}}/docs/value.html#examples)
 - [Projection]({{site.baseurl}}/docs/projection.html)
     - [Documentation Overview]({{site.baseurl}}/docs/projection.html#documentation-overview)
     - [Projection Properties]({{site.baseurl}}/docs/projection.html#projection-properties)
@@ -329,6 +330,7 @@
     - [Using Parameters]({{site.baseurl}}/docs/parameter.html#using-parameters)
     - [Selection Configuration]({{site.baseurl}}/docs/parameter.html#config)
     - [Value]({{site.baseurl}}/docs/value.html)
+        - [Examples]({{site.baseurl}}/docs/value.html#examples)
     - [Expr]({{site.baseurl}}/docs/parameter.html)
         - [Documentation Overview]({{site.baseurl}}/docs/parameter.html#documentation-overview)
         - [Defining a Parameter]({{site.baseurl}}/docs/parameter.html#defining-a-parameter)