docs: add example with overlapping bars in a grouped bar chart

This PR adds an example that demonstrates how to create partially overlapping bars in a grouped bar chart.

The example looks as such:

The overlapping effect was created using the following code (method-based syntax):

import altair as alt
import pandas as pd

source = pd.DataFrame(
    {
        "category": list("AABBCC"),
        "group": list("xyxyxy"),
        "value": [0.1, 0.6, 0.7, 0.2, 0.6, 0.1],
    }
)

base = alt.Chart(source, width=alt.Step(12)).encode(
    x="category:N",
    y="value:Q",
    xOffset=alt.XOffset("group:N").scale(paddingOuter=0.5),
)

alt.layer(
    base.mark_bar(size=20, stroke="white", fillOpacity=0.9).encode(fill="group:N"),
    base.mark_text(dy=-5).encode(text="value:Q"),
)

Explanation:

The partial overlap is achieved by controlling the allocated space for each bar and its actual size.
width=alt.Step(12) in alt.Chart() defines the space allocated for each bar and thus defines the amount of overlap.
mark_bar(size=20) sets the actual width of the bars.
The paddingOuter=0.5 parameter in the xOffset scale creates spacing between the categories along the x-axis, to make sure the groups are distinct

vega / altair

docs: add example with overlapping bars in a grouped bar chart #3612