Py.Cafe

Sindhup24/

altair-us-airports-map

Interactive U.S. Airports Map with Altair

DocsPricing
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import altair as alt
import pandas as pd
from vega_datasets import data

import solara
from solara.website.utils import apidoc

# Load airports data
airports = data.airports()

# Create a map chart using Altair
background = alt.Chart(airports).mark_geoshape(
    fill='lightgray',
    stroke='white'
).properties(
    width=800,
    height=400
).project('albersUsa')

points = alt.Chart(airports).mark_circle(
    size=10,
    color='steelblue',
    opacity=0.8
).encode(
    longitude='longitude:Q',
    latitude='latitude:Q',
    tooltip=['name:N', 'city:N', 'state:N']
)

map_chart = background + points

@solara.component
def Page():
    click_data, set_click_data = solara.use_state({})
    hover_data, set_hover_data = solara.use_state({})

    def convert_to_dataframe(data):
        if data:
            relevant_keys = ["iata", "name", "city", "state", "country", "latitude", "longitude"]
            filtered_data = {key: [data.get(key, '')] for key in relevant_keys}
            return pd.DataFrame(filtered_data)
        return pd.DataFrame()

    click_df = convert_to_dataframe(click_data)
    hover_df = convert_to_dataframe(hover_data)

    with solara.Div() as main:
        solara.AltairChart(map_chart, on_click=set_click_data, on_hover=set_hover_data)

        solara.Markdown("### Click data:")
        if not click_df.empty:
            solara.DataFrame(click_df)
        else:
            solara.Markdown("No data")

        solara.Markdown("### Hover data:")
        if not hover_df.empty:
            solara.DataFrame(hover_df)
        else:
            solara.Markdown("No data")

    return main

# This is for documentation purposes
doc = apidoc(solara.AltairChart)  # type: ignore