Skip to content

Commit

Permalink
docs: update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
kanitw committed Oct 5, 2023
1 parent 42e9aed commit f22bd4c
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 21 deletions.
4 changes: 4 additions & 0 deletions site/_data/examples.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
21 changes: 0 additions & 21 deletions site/docs/encoding/band.md

This file was deleted.

31 changes: 31 additions & 0 deletions site/docs/encoding/bandPosition.md
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 7 additions & 0 deletions site/docs/transform/timeunit.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit f22bd4c

Please sign in to comment.