From f22bd4c510fb56b1d8c930150a373e9a8944bbbc Mon Sep 17 00:00:00 2001
From: Kanit Wongsuphasawat <kanit.w@databricks.com>
Date: Thu, 5 Oct 2023 16:13:08 -0700
Subject: [PATCH] docs: update docs

---
 site/_data/examples.json           |  4 ++++
 site/docs/encoding/band.md         | 21 --------------------
 site/docs/encoding/bandPosition.md | 31 ++++++++++++++++++++++++++++++
 site/docs/transform/timeunit.md    |  7 +++++++
 4 files changed, 42 insertions(+), 21 deletions(-)
 delete mode 100644 site/docs/encoding/band.md
 create mode 100644 site/docs/encoding/bandPosition.md

diff --git a/site/_data/examples.json b/site/_data/examples.json
index 94159777c3c..a1fab1f0064 100644
--- a/site/_data/examples.json
+++ b/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"
diff --git a/site/docs/encoding/band.md b/site/docs/encoding/band.md
deleted file mode 100644
index e5d15520cd5..00000000000
--- a/site/docs/encoding/band.md
+++ /dev/null
@@ -1,21 +0,0 @@
----
-layout: docs
-title: Band
-permalink: /docs/band.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="band" 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 `band` to `0.5` moves the points to the middle of the time interval.
-
-<div class="vl-example" data-name="line_month_center_band"></div>
diff --git a/site/docs/encoding/bandPosition.md b/site/docs/encoding/bandPosition.md
new file mode 100644
index 00000000000..943ea756e1b
--- /dev/null
+++ b/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>
diff --git a/site/docs/transform/timeunit.md b/site/docs/transform/timeunit.md
index 7f6ef48e6b4..0fbb9ec8776 100644
--- a/site/docs/transform/timeunit.md
+++ b/site/docs/transform/timeunit.md
@@ -68,6 +68,13 @@ 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