Plotting spatial data on individual map using altair

Question

I want to plot spatial data on a map. I want to use streamlit because it seems to be easy to use and I want to explore it a bit.
First a tried plotting my data with their inbuilt deck_gl-API. This worked pretty good, but since I need to plot glyphs/icons and the IconLayer isn't built into streamlit yet, I need to switch to another library.

I've read that Altair should be a good fit for me and it's also well supported by streamlit. However, I can't figure out how to create a visualization with altair when I don't use one of the vega_datasets.

My data is in a dataframe with the following structure:

|   latitude   |   longitude   |   temperature   |  
| ------------ | ------------- | --------------- |  
| -122.23123   | 38.2321       | 23              | 
| -122.2321    | 28.2342       | 25              |

How can I create a plot like this using altair?

Any help or hints are highly appreciated!

Furmenty

Vega datasets return either pandas dataframes, or URLs to data stored as JSON records, CSV, or TSV. If you have your data in one of these formats, you can use altair the same way as in the examples. – Crinkumcrankum

Thank you for your input but I'm having a hard time figuring out how my data should look like to get the Altair plot working. Most examples tend to use this dataset https://raw.githubusercontent.com/vega/vega-datasets/master/data/us-10m.json but its quite difficult for me to figure out how to get my data into a form that works out for Altair. I'm also unable to find examples on how somebody did this before. – Furmenty

That is a TopoJSON file that contains the boundaries of US states to be plotted behind the data. You can use any TopoJSON file you would like to customize the background map. – Crinkumcrankum

But I should add: if you're looking for a solution where you plug some lat/lon points into a chart, and the renderer will automatically populate the background map in that location with city and county names and boundaries, Altair is not the charting package you're looking for. You might try something like folium: python-visualization.github.io/folium. – Crinkumcrankum

Thank you for your information. Seems like there isn't an easy solution ready where it's able to use Streamlit to create a geospatial plot with icons since it doesn't support folium either. – Furmenty

Answer 1

If you have a pandas DataFrame with a latitude and longitude column then you can use the latitude and longitude encoding channels in Altair. Here an example using the vega_datasets (it looks like your data).

import altair as alt
from vega_datasets import data

df = data.airports()
df = df[df.state=='TX']
df.reset_index(inplace=True)

df.head()

alt.Chart(df).mark_point().encode(
    latitude='latitude',
    longitude='longitude',
    color='index'
)

Note: Make sure your latitude and longitude data is in WGS-84 (EPSG:4326) projection.

To add a basemap to your data is a bit hard at the moment. I'm sure somebody will come up with a good approach with the new image mark in Vega-lite (to be included in Altair 4), since there is already a working proof-of-concept in Vega (issue, editor) and in Vega-Lite (issue, editor).

UPDATE:

To add some more context to your map you can add other shapes using geopandas as such:

import geopandas as gpd
gdf = gpd.read_file('https://raw.githubusercontent.com/python-visualization/folium/master/tests/us-states.json', driver='GeoJSON')
gdf = gdf[gdf.id=='TX']

base = alt.Chart(gdf).mark_geoshape(
    stroke='gray', 
    fill=None
)

pts = alt.Chart(df).mark_point().encode(
    latitude='latitude',
    longitude='longitude',
    color='index'
)

base + pts

Insurgency

Thank you for taking your time helping me with my problem. I'm able to understand altair a bit better now. I can't mark your question as accepted because the lack of a basemap makes this kind of geospatial plot rather useless, but thank you anyway! – Furmenty

Useless is a strong word. Many people have found Altair's geospatial vlsualization tools useful. I'd mark this answer as accepted, because it's the best possible answer for your question, which is how to visualize geospatial lat/long points in Altair, along with caveats about why the specific thing you're asking for is not possible right now, and pointers at how you might approach it. – Crinkumcrankum

Yes, thank you for pointing this out. I understand your argumentation and marked this as the accepted answer. I didn't want to sound mean but it's hard for me to see the use of geospatial plots without any context information. It feels like a scatterplot without any information about the axis. – Furmenty

I feel your pain. I updated the answer how you could use geopandas in combination with the mark_geoshape to add some more context. Its not google maps like, but in many cases does it lead to an acceptable solution. – Insurgency