PyCafe - Solara - State and ID Data 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import pandas as pd
import solara
import matplotlib.pyplot as plt
import numpy as np
import folium
from folium.plugins import MarkerCluster

# Load the CSV files
file_path = 'solara-dropdown.csv'
id_file_path = 'test_longtable_line.csv'
data = pd.read_csv(file_path)
id_data = pd.read_csv(id_file_path)

# Extract unique states and IDs
unique_states = data['state'].unique().tolist()
unique_ids = id_data['Id'].unique().tolist()

# Reactive variables
selected_id = solara.reactive(unique_ids[0])
selected_state = solara.reactive("")
selected_name = solara.reactive("")
generate_trigger = solara.reactive(0)

# Function to update state and name based on selected ID
def update_state_and_name(id):
    filtered_data = data[data['Id'] == id]
    if not filtered_data.empty:
        selected_state.value = filtered_data['state'].iloc[0]
        selected_name.value = filtered_data['Name'].iloc[0]
    else:
        selected_state.value = ""
        selected_name.value = ""

# Function to filter data based on selected state and ID
def get_filtered_names(state, id):
    filtered_names = data[(data['state'] == state) & (data['Id'] == id)]['Name'].unique().tolist()
    if filtered_names:
        selected_name.value = filtered_names[0]
    return filtered_names

# Function to plot bar chart using matplotlib
def plot_bar_chart(df, name):
    filtered_data = df[df['Name'] == name]
    if filtered_data.empty:
        print("No data available for the selected filters.")
        return None
    fig, ax = plt.subplots(figsize=(10, 6))
    width = 0.3  # Bar width
    x = np.arange(len(filtered_data))  # the label locations
    ax.bar(x - width/2, filtered_data['XCoordinate'], width, label='XCoordinate', color='blue')
    ax.bar(x + width/2, filtered_data['YCoordinate'], width, label='YCoordinate', color='orange', alpha=0.7)
    ax.set_xticks(x)
    ax.set_xticklabels(filtered_data['Name'], rotation=45, ha='right')
    ax.set_xlabel('Name', fontweight='bold')
    ax.set_ylabel('Coordinate Value', fontweight='bold')
    ax.set_title(f'Bar Chart for {name}', fontweight='bold')
    ax.legend(loc='upper right')
    
    # Add data labels
    for i in range(len(filtered_data)):
        ax.text(i - width/2, filtered_data['XCoordinate'].iloc[i] / 2, str(filtered_data['XCoordinate'].iloc[i]), ha='center', va='bottom', color='white')
        ax.text(i + width/2, filtered_data['YCoordinate'].iloc[i] / 2, str(filtered_data['YCoordinate'].iloc[i]), ha='center', va='bottom', color='black')
    
    fig.tight_layout()  # Adjust layout to make room for rotated x-tick labels
    return fig

# Function to plot map using folium
def plot_map(df, name):
    filtered_data = df[df['Name'] == name]
    if filtered_data.empty:
        print("No data available for the selected filters.")
        return None
    
    # Create a map centered around the mean coordinates with a specific zoom level
    m = folium.Map(location=[0, 20], zoom_start=4)
    marker_cluster = MarkerCluster().add_to(m)
    
    # Add markers to the map
    for i, row in filtered_data.iterrows():
        folium.Marker(
            location=[row['YCoordinate'], row['XCoordinate']],
            popup=f"{row['Name']}: ({row['XCoordinate']}, {row['YCoordinate']})"
        ).add_to(marker_cluster)
    
    # Set explicit bounds for Africa
    africa_bounds = [[-35, -20], [37, 55]]
    m.fit_bounds(africa_bounds)

    return m

# Components
@solara.component
def View():
    if generate_trigger.value > 0 and selected_name.value:
        m = plot_map(data, selected_name.value)
        fig = plot_bar_chart(data, selected_name.value)
        if m and fig:
            with solara.VBox() as main:
                solara.HTML(tag="div", unsafe_innerHTML=m._repr_html_())
                solara.FigureMatplotlib(fig)
            solara.Info("Map and chart have been updated.")
        else:
            solara.Warning("No data available for the selected state and name")
    else:
        solara.Warning("Please select a state and a name.")

@solara.component
def Controls():
    # Update the options for the Name dropdown based on the selected state and ID
    update_state_and_name(selected_id.value)
    filtered_names = get_filtered_names(selected_state.value, selected_id.value)
    
    solara.Select('ID', values=unique_ids, value=selected_id)
    solara.Select('State', values=unique_states, value=selected_state)
    solara.Select('Name', values=filtered_names, value=selected_name)
    
    def generate_chart():
        generate_trigger.value += 1

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

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

# Display the page
Page()
Py.Cafe

state-id-data-visualization

State and ID Data Visualization
