Wrapped facet doesn't work with geoshape

[juanfrans]

Hi. I'm trying to follow this example: https://altair-viz.github.io/gallery/us_incomebrackets_by_state_facet.html?highlight=wrapped with my own data but it doesn't seem to be working.

Here is the snipped of code I'm using:

alt.Chart(testData).mark_geoshape().encode(
    color='citiStartDiff:Q',
    facet=alt.Facet('weekNumber:O', columns=4),
    tooltip=['NTAName:N']
).properties(
    width=250,
    height=250
)

And here is a sample of the data I'm using: https://github.com/juanfrans/data-sample/blob/master/testData.csv

I get the grid of charts and the legend with the appropriate scale range, but the charts are empty.

If I only do one chart with one weekNumber it works fine.

Any ideas? Thank you.

[jakevdp]

Can you provide a full reproducible code snippet to eliminate the guesswork required to reproduce your problem? For example, reading your data with pandas like this produces a dataframe:

testData = pd.read_csv('https://raw.githubusercontent.com/juanfrans/data-sample/master/testData.csv')

but this doesn't work in a geo chart, because geographic features are represented as raw strings. I suspect you're loading your data differently, but there's no way for me to know what code you're running.

[juanfrans]

@jakevdp Sure. Here's the full code:

import pandas as pd
import numpy as np
import altair as alt
import geopandas as gpd
from shapely import wkt

testData = pd.read_csv('https://raw.githubusercontent.com/juanfrans/data-sample/master/testData.csv')

testData.geometry = testData.geometry.apply(wkt.loads)

testData = gpd.GeoDataFrame(testData, geometry=testData.geometry, crs='EPSG:4326')

#### This chart works well ####
alt.Chart(testData[testData.weekNumber == 0]).mark_geoshape().encode(
    color='citiStartDiff:Q'
)

#### This is the one that doesn't work ####
alt.Chart(testData[testData.weekNumber < 8]).mark_geoshape().encode(
    color='citiStartDiff:Q',
    tooltip=['NTAName:N'],
    facet=alt.Facet('weekNumber:N', columns=4),
).properties(
    width=200,
    height=200,
)

Thank you.

[jakevdp]

Thanks! This appears to be a known vega-lite bug: vega/vega-lite#3729

You may be able to work around this through manual filtering and concatenation.

[juanfrans]

@jakevdp Oh, ok. Could you give me some pointers about the manual filtering and concatenation? I tried to figure it out before seeing your suggestion about the facets but couldn't do it 🤦‍♂️

[jakevdp]

Sure, you could do something like this:

alt.concat(*(
    alt.Chart(testData[testData.weekNumber == weekNumber]).mark_geoshape().encode(
      color='citiStartDiff:Q',
    ).properties(
      width=200, height=200
    )
    for weekNumber in range(8)
  ), columns=4
)

[juanfrans]

@jakevdp Amazing! Thank you.

[jakevdp]

Updated the StackOverflow answer as well 😁
https://stackoverflow.com/questions/65202224/how-to-make-small-multiples-map-chart-in-altair

[armsp]

Ah, was scratching my head for so long wondering why a simple facet is not working....
For anyone who is wondering how to get the facet headers....till this is resolved you can use the chart title parameter of alt.Chart using the same variable that you are iterating over.
So for example, in this case it would become -

alt.concat(*(
    alt.Chart(testData[testData.weekNumber == weekNumber], title=weekNumber).mark_geoshape().encode(
      color='citiStartDiff:Q',
    ).properties(
      width=200, height=200
    )
    for weekNumber in range(8)
  ), columns=4
)

[joelostblom]

@juanfrans I am going through Altair issues to find those that have been resolved and can be closed. It looks to me like this issue has been solved so I am closing it, but please feel free to reopen and add a comment if there is something you don't think is resolved yet.

[armsp]

Hi @joelostblom, I understand what you are doing, but some of the issues, like this one, point to actual bugs. You can definitely say that this one in particular is from the Vega-Lite side, even then I think we ought to keep it open. It's just a humble personal opinion though. Until there is a fix for this in upcoming releases, I think we should also track it here apart from Vega-Lite repo.

[juanfrans]

Hi @joelostblom. I agree with @armsp. Even though this issue might not originate directly with Altair, it's still an issue, and I think it should stay open. I'm thinking in particular of people who are encountering the same problem, to whom seeing this as a "closed" issue might be confusing.

[joelostblom]

Thanks for clarifying @armsp and @juanfrans! I've reopened the issue so that it's easily visible for others until the VegaLite bug is fixed.

[armsp]

@joelostblom Thank you so much Joel. I have a vested interest in this issue as well as few more that have origins in Vega-Lite. I am tracking this in my portfolio myself in this visualization - https://armsp.github.io/covidviz/geospatial/vaccine/2021/02/20/vaccine-tracker.html
So, as soon as a fix is available, I will comment to close this issue here.
Really appreciate the work you do!