PyCafe - Solara - bite-sized-goatskin

app.py
merged_river_data.csv
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
68
import altair as alt
import pandas as pd
import solara
from vega_datasets import data

# Load the dataset from the provided file
file_path = 'merged_river_data.csv'
rivers = pd.read_csv(file_path)

# Print the column names to check their names
print("Column names in the dataset:", rivers.columns)

# Print the first few rows of the dataset for verification
print("Dataset loaded successfully.")
print(rivers.head())

# Ensure that the required columns are present
required_columns = ['XCoordinate', 'YCoordinate', 'Name', 'RiverNumber', 'ForecastData']
missing_columns = [col for col in required_columns if col not in rivers.columns]
if missing_columns:
    raise ValueError(f"Missing columns in the dataset: {missing_columns}")

# Define the Solara component
@solara.component
def Page():
    selected_datum = solara.reactive(None)

    def on_click(event):
        datum = event['datum']  # Access the datum directly from the event
        print("Clicked datum:", datum)  # Debug print statement
        selected_datum.value = datum

    # Load the geographic data for the background map
    states = alt.topo_feature(data.us_10m.url, 'states')

    # Create the background map
    background = alt.Chart(states).mark_geoshape(
        fill='lightgray',
        stroke='white'
    ).properties(
        width=800,
        height=500
    )

    # Create the Altair chart for the river points
    points = alt.Chart(rivers).mark_circle(size=100).encode(
        longitude='XCoordinate:Q',
        latitude='YCoordinate:Q',
        tooltip=['Name:N', 'RiverNumber:Q', 'ForecastData:N'],
        color='RiverNumber:Q'
    ).interactive()

    # Combine the background map and the points
    chart = background + points

    with solara.Card("Rivers Data"):
        solara.AltairChart(chart, on_click=on_click)
        
        if selected_datum.value:
            river_name = selected_datum.value['Name']
            river_number = selected_datum.value['RiverNumber']
            forecast_data = selected_datum.value['ForecastData']
            solara.Markdown(f"**Selected River:** {river_name}\n\n**River Number:** {river_number}\n\n**Forecast Data:** {forecast_data}")
        else:
            solara.Markdown("Click on a river to see its details")