docs: update docs

site/_data/examples.json

@@ -84,6 +84,10 @@
         "name": "bar_month_temporal_initial",
         "title": "Bar Chart showing Initials of Month Names"
       },
+      {
+        "name": "bar_month_temporal_band_center",
+        "title": "Bar Chart with bars center-aligned with time unit ticks"
+      },
       {
         "name": "bar_negative",
         "title": "Bar Chart with Negative Values and a Zero-Baseline"

site/_layouts/docs.html

@@ -98,8 +98,8 @@
         url: aggregate
       - text: Axis
         url: axis
-      - text: Band
-        url: band
+      - text: Band Position
+        url: bandposition
       - text: Bin
         url: bin
       - text: Condition

site/docs/encoding/bandPosition.md

@@ -0,0 +1,31 @@
+---
+layout: docs
+title: Band Position
+permalink: /docs/bandposition.html
+---
+
+Band properties can be used to adjust mark bandwidth or position for band scales, bin intervals, or time unit intervals.
+
+{% include table.html props="bandPosition" source="DatumDef" %}
+
+## Examples
+
+### Line Position
+
+By default, points in line marks are placed at the beginning of a time interval (e.g., "month"):
+
+<div class="vl-example" data-name="line_month"></div>
+
+Setting `bandPosition` to `0.5` moves the points to the middle of the time interval.
+
+<div class="vl-example" data-name="line_month_center_band"></div>
+
+### Bar Position
+
+By default, bar marks are placed from the beginning of a time interval (e.g., "month") to the end of the interval:
+
+<div class="vl-example" data-name="bar_month_temporal"></div>
+
+Setting `bandPosition` to `0` moves the bar to center-align with ticks.
+
+<div class="vl-example" data-name="bar_month_temporal_band_center"></div>

site/docs/transform/timeunit.md

@@ -68,6 +68,12 @@ Using `timeUnit` with rect-based marks (including `bar`, `rect`, and `image`) wi
 
 You can also add `"binned"` prefix if your data has already been binned and want Vega-Lite to apply the right formatting, including the right bands for the interval, to your charts.
 
+By default, bar marks are placed from the beginning of a time interval (e.g., "month") to the end of the interval.
+
+Setting [`bandPosition`](bandposition.html) to `0` moves the bar to center-align with ticks.
+
+<div class="vl-example" data-name="bar_month_temporal_band_center"></div>
+
 <span class="vl-example" data-name="bar_binnedyearmonth"></span>
 
 ### Time Unit's Band