Facet Charts with dynamic spacing

[chrisHassan]

Hi There,

I’d like to control the height of each row (facet group) in a faceted Altair chart, rather than having a uniform facet height.

In the example below, I have three groups with different numbers of rows. Each group currently renders as a facet with the same height, but I’d like each row’s height to scale based on the number of items (i.e. width per record plotted rather than per facet group).

Here’s a minimal example:

import altair as alt
import pandas as pd
import numpy as np
np.random.seed(1234)

image_urls = [
    "https://vega.github.io/vega-datasets/data/ffox.png",
    "https://vega.github.io/vega-datasets/data/gimp.png",
    "https://vega.github.io/vega-datasets/data/7zip.png",
]

df = pd.DataFrame(dict(facet_group=['a'] *3 + ['b'] * 2 + ['c'] * 1))
df['image_url'] = np.random.choice(image_urls, size=len(df), replace=True)

chart = alt.Chart(df).mark_image().encode(
    y=alt.Y('image_url', title=None),
    url=alt.Url('image_url'),
).properties(
    height=200, width=200
).facet(
    row=alt.Row('facet_group', header=alt.Header(orient='top'))
).resolve_scale(
    y='independent'
)

chart

This produces a chart where each facet block has the same height, even though the number of rows (images) varies by group:

To approximate variable facet heights, I tried generating each group separately and concatenating them with a height proportional to the number of rows. This almost works - but feels a bit clunky and manual:

def plot_chart(df, group):
    group = group[0]
    pixels_per_row = 50
    
    chart = alt.Chart(df).mark_image().encode(
        y=alt.Y('image_url', title=None),
        url=alt.Url('image_url'),
    ).properties(
        height=pixels_per_row * len(df),
        width=200,
        title=group
    )    
    return chart
   
charts = [] 
for group, group_df in df.groupby(['facet_group']):
    charts.append(plot_chart(df=group_df, group=group))
    
final_chart = alt.vconcat(*charts)
final_chart
    

Is there a way:

• control the height of each facet row individually, or
• automatically scale facet heights based on the number of records in each group?

Appreciate time and help with this :-)