PyCafe - Solara - State-Wise Coordinate Visualization

app.py
requirements.txt
solara-dropdown.csv
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import pandas as pd
import solara
import altair as alt
from vega_datasets import data as vega_data

# Load the CSV file
file_path = 'solara-dropdown.csv'  # Adjusted path for your uploaded file
data = pd.read_csv(file_path)

# Load a Vega dataset for reference (not used in the final chart but shown for completeness)
stocks = vega_data.stocks()

# Extract unique states from CSV
unique_states = data['state'].unique().tolist()

# Reactive variables
selected_state = solara.reactive(unique_states[0])
generate_trigger = solara.reactive(0)

# Function to generate line chart using Altair
def plot_line_chart(df, state):
    filtered_data = df[df['state'] == state]
    if filtered_data.empty:
        print("No data available for the selected state.")
        return None

    # Melt the data for better plotting
    melted_data = filtered_data.melt(id_vars=['Name'], value_vars=['XCoordinate', 'YCoordinate'], var_name='variable', value_name='value')

    # Create the line chart
    lines = alt.Chart(melted_data).mark_line().encode(
        x=alt.X('Name:N', title='Name', axis=alt.Axis(labelAngle=45)),
        y=alt.Y('value:Q', title='Value'),
        color='variable:N',
        tooltip=[
            alt.Tooltip('Name:N', title='Name'),
            alt.Tooltip('variable:N', title='Coordinate Type'),
            alt.Tooltip('value:Q', title='Coordinate Value'),
            alt.Tooltip('XCoordinate:Q', title='X Coordinate'),
            alt.Tooltip('YCoordinate:Q', title='Y Coordinate')
        ]
    ).properties(
        width=800,  # adjust the width as needed
        height=400
    )

    # Define the horizontal overlay lines
    yrule1 = alt.Chart(pd.DataFrame({'value': [40]})).mark_rule(color="cyan", strokeWidth=2).encode(y='value:Q')
    yrule2 = alt.Chart(pd.DataFrame({'value': [60]})).mark_rule(color="magenta", strokeWidth=2, strokeDash=[5, 5]).encode(y='value:Q')
    yrule3 = alt.Chart(pd.DataFrame({'value': [80]})).mark_rule(color="red", strokeWidth=2).encode(y='value:Q')

    # Add points for better tooltip visibility
    points = lines.mark_point().encode(
        tooltip=[
            alt.Tooltip('Name:N', title='Name'),
            alt.Tooltip('variable:N', title='Coordinate Type'),
            alt.Tooltip('value:Q', title='Coordinate Value'),
            alt.Tooltip('XCoordinate:Q', title='X Coordinate'),
            alt.Tooltip('YCoordinate:Q', title='Y Coordinate')
        ]
    )

    # Create a layered chart
    layer_chart = alt.layer(lines, points, yrule1, yrule2, yrule3).resolve_scale(
        y='shared'
    )

    return layer_chart

# Components
@solara.component
def View():
    if generate_trigger.value > 0 and selected_state.value:
        chart = plot_line_chart(data, selected_state.value)
        if chart:
            with solara.VBox() as main:
                solara.FigureAltair(chart)
            solara.Info("Chart has been updated.")
        else:
            solara.Warning("No data available for the selected state.")
    else:
        solara.Warning("Please select a state.")

@solara.component
def Controls():
    solara.Select('State', values=unique_states, value=selected_state)
    
    def generate_chart():
        print(f"Generating chart for state: {selected_state.value}")
        generate_trigger.value += 1

    solara.Button(label="Generate Chart", on_click=generate_chart, icon_name="mdi-chart-line")

@solara.component
def Page():
    with solara.Sidebar():
        Controls()
    View()

# Display the page
Page()
Py.Cafe

solara-state-coordinates

State-Wise Coordinate Visualization
