pythonaltair

How to troubleshoot altair charts that draw blank


I'm trying to plot a facet plot of client ids with timeseries of year (x axis) and total_vchrs (y)

    client_id   year    total_vchrs
0   1564931 2021    4.00
1   2013493 2021    0.00
2   1587580 2021    1.00
3   2259014 2021    0.00
4   2293939 2021    0.00
...

The data looks simple.

client_id       object
year             int64
total_vchrs    float64
dtype: object

Code is transparent.

chart = alt.Chart(melted_df).mark_bar().encode(
    x=alt.X('year:O', title='Year'),
    y=alt.Y('total_vchrs:Q', title='Total Vouchers'),
    #color=alt.Color('client_id:N', title='Client ID'),
    facet=alt.Facet('client_id:N', columns=1, title='Client ID')
).properties(
    width=600,
    height=100,
    title="Total vouchers Over Time by Client ID"
)

chart

But the result is unhappy square face:

enter image description here

What do I need to do to fix this?


Solution

  • This is due to the many facets you are creating and the size of each facet (so somehow related to the total area of charts that are plotted). You can try it out with the following code by increasing and decreasing both the number of observations in the dataframe (500) and the height of each chart (10):

    import altair as alt
    import pandas as pd
    
    df = pd.DataFrame({
        'client_id': [random.randint(0, 11111) for x in range(500)] 
    })
    alt.Chart(df).mark_bar().encode(
        facet=alt.Facet('client_id:N', columns=1, title='Client ID')
    ).properties(
        height=10,
    )
    

    I don't know enough about how browsers handle graphics to say exactly what is happening, but I believe the sad face indicates that some rendering process crashed. You could try different browsers to see if it differs between them.