Add example of left aligning title with axis line via frame=group

[joelostblom]

What is your suggestion?

I didn't know about frame='group' until vega/vega#3903. I have been avoiding using left aligned titles because I don't like the aesthetics of them going past the y-axis line. Now that's no longer an issue and it looks so great when it's aligned with the axis line:

import altair as alt
from vega_datasets import data


source = data.movies.url

title = alt.Title('A title for my histogram', anchor='start')
chart = alt.Chart(source, title=title, height=200).mark_bar().encode(
    alt.X("IMDB_Rating:Q", bin=True),
    y='count()',
)

title2 = alt.Title('A title for my histogram', anchor='start', frame='group')

chart | chart.properties(title=title2)

Have you considered any alternative solutions?

No response

[dsmedia]

@joelostblom Do you have something like this in mind for the example gallery?

import altair as alt
from vega_datasets import data

source = data.movies.url

# Base chart
base = alt.Chart(source).mark_bar().encode(
    alt.X("IMDB_Rating:Q", bin=True),
    y='count()',
).properties(
    width=200,
    height=200
)

# Chart 1: Left align to axis (title starts at axis line)
chart1 = base.encode(
    color=alt.value('steelblue')
).properties(
    title=alt.Title('Left Aligned to Axis', anchor='start', frame='group')
)

# Chart 2: Right align to axis, y-axis on the right
chart2 = base.encode(
    alt.Y('count()', axis=alt.Axis(orient='right')),
    color=alt.value('steelblue')
).properties(
    title=alt.Title('Right Aligned to Axis', anchor='end', frame='group')
)

# Chart 3: Left align to chart (title starts at chart edge)
chart3 = base.encode(
    color=alt.value('orange')
).properties(
    title=alt.Title('Left Aligned to Chart', anchor='start')
)

# Chart 4: Right align to chart edge, y-axis on the right
chart4 = base.encode(
    alt.Y('count()', axis=alt.Axis(orient='right')),
    color=alt.value('orange')
).properties(
    title=alt.Title(['Right Aligned to Chart'], anchor='end')
)

# Combine charts in a 2x2 grid
grid = (alt.vconcat(
    alt.hconcat(chart1, chart2),
    alt.hconcat(chart3, chart4)
)).resolve_scale(
)

grid

[joelostblom]

Thanks @dsmedia! After reviewing the docs I'm thinking it would be more helpful if we add this example to the title section of the User Guide rather than to the example gallery. In general I think it is easier to find when we manage to fit information and examples into the user guide, but it is not always easy to find the right spot.

Maybe you example can be appended to the section I linked above? The last example currently is showing the "caption" going out all the way to the left of the frame, so it I think it could fit naturally to explain how to do different alignments after that. Instead of the histogram you can use the same energy area chart as in the other examples. What do you think?