Large Altair Plots Overlap

Panel
1

Hi!
I’m trying to combine multiple Altair plots with variable sizes using Panel, but once they grow too large, they start overlapping.

Some example code that demonstrates this issue:

Summary 
import panel as pn
import pandas as pd
import numpy as np
import altair as alt


def make_plot():
    # Example heatmap from
    # https://altair-viz.github.io/gallery/simple_heatmap.html
    # with increased width/height

    # Compute x^2 + y^2 across a 2D grid
    x, y = np.meshgrid(range(-5, 5), range(-5, 5))
    z = x**2 + y**2

    # Convert this grid to columnar data expected by Altair
    source = pd.DataFrame({'x': x.ravel(), 'y': y.ravel(), 'z': z.ravel()})

    return pn.pane.Vega(
        alt.Chart(source).\
        mark_rect().\
        encode(x='x:O', y='y:O',
                color='z:Q').\
        properties(
            height=500,
            width=500
        ))


plots = []
for i in range(5):
    plots.append(make_plot())

pn.serve(pn.Row(objects=plots))

It appears as though the individual items of the row are limited to ~450 pixels in width.

2 Likes
3

Hi @Yusu

Thanks for providing such an easy to reproduce example. I can confirm the problem

image
image2153×643 44.7 KB

The pn.pane.Vega indeed seems to have a fixed width. But setting their sizing_mode="stretch_width" fixes the problem if you have a wide enough window/ screen.

altair
altair1894×512 3.73 MB

import panel as pn
import pandas as pd
import numpy as np
import altair as alt


def make_plot():
    # Example heatmap from
    # https://altair-viz.github.io/gallery/simple_heatmap.html
    # with increased width/height

    # Compute x^2 + y^2 across a 2D grid
    x, y = np.meshgrid(range(-5, 5), range(-5, 5))
    z = x**2 + y**2

    # Convert this grid to columnar data expected by Altair
    source = pd.DataFrame({'x': x.ravel(), 'y': y.ravel(), 'z': z.ravel()})

    return pn.pane.Vega(
        alt.Chart(source).\
        mark_rect().\
        encode(x='x:O', y='y:O',
                color='z:Q').\
        properties(
            height=500,
            width=500
        ), sizing_mode="stretch_width")


plots = []
for i in range(5):
    plots.append(make_plot())

pn.serve(pn.Row(objects=plots), port=5007)

An alternative to fixed width would be responsive. I think that is better. You do that by also setting width="container".

altair_responsive
altair_responsive1698×654 4.82 MB

import panel as pn
import pandas as pd
import numpy as np
import altair as alt


def make_plot():
    # Example heatmap from
    # https://altair-viz.github.io/gallery/simple_heatmap.html
    # with increased width/height

    # Compute x^2 + y^2 across a 2D grid
    x, y = np.meshgrid(range(-5, 5), range(-5, 5))
    z = x**2 + y**2

    # Convert this grid to columnar data expected by Altair
    source = pd.DataFrame({'x': x.ravel(), 'y': y.ravel(), 'z': z.ravel()})

    return pn.pane.Vega(
        alt.Chart(source).\
        mark_rect().\
        encode(x='x:O', y='y:O',
                color='z:Q').\
        properties(
            height=500,
            width="container",
        ), sizing_mode="stretch_width")


plots = []
for i in range(5):
    plots.append(make_plot())

pn.serve(pn.Row(objects=plots), port=5007)
2 Likes
4

Perfect, thank you very much! :smile:

5

No Problem.

Just post some more nice questions like these. From the Q&A we can build the knowledge of the community here on discourse.

And share some of the work you do as well if possible… I have a feeling its awesome. :+1: