File size: 5,467 Bytes
13a4cc8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
import streamlit as st

st.set_page_config(page_title="Widget Exploration", page_icon=":1234:")
st.sidebar.header("Widget Exploration")

st.title('Widget Exploration')

st.write("""In a "real" app, we probably wouldn't 
publish our explorations, but here it is a nice excuse to use pages here :smiley:.""")


st.write("How great are you feeling right now?")
sentiment_mapping = ["one", "two", "three", "four", "five"] # map to these numers
selected = st.feedback("stars")
if selected is not None: # make sure we have a selection
    st.markdown(f"You selected {sentiment_mapping[selected]} star(s).")
    if selected < 1:
        st.markdown('Sorry to hear you are so sad :(')
    elif selected < 3:
        st.markdown('A solid medium is great!')
    else:
        st.markdown('Fantastic you are having such a great day!')

st.subheader('Radio Buttons')

st.markdown("""
Let's try out a [radio button](https://docs.streamlit.io/develop/api-reference/widgets/st.radio) example.
""")

favoriteViz = st.radio(
    "What's your visualization tool so far?",
    [":rainbow[Streamlit]", "vega-lite :sparkles:", "matplotlib :material/Home:"],
    captions=[
        "New and cool!",
        "So sparkly.",
        "Familiar and comforting.",
    ],
)

if favoriteViz == ":rainbow[Streamlit]":
    st.write("You selected Streamlit!")
else:
    st.write("You didn't select Streamlit but that's ok, Data Viz still likes you :grin:")

st.header('Connecting Plots and Widgets')

import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
from io import BytesIO


df = pd.read_csv("https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/mobility.csv")

# vertical alignment so they end up side by side
fig_col2, controls_col2 = st.columns([2,1], vertical_alignment='center')

bins = np.linspace(df['Student_teacher_ratio'].min(),df['Student_teacher_ratio'].max(), 10)
table = df.pivot_table(index='State', columns=pd.cut(df['Student_teacher_ratio'], bins), aggfunc='size')

# multi-select
states_selected2 = controls_col2.multiselect('Which states do you want to view?', 
                                             table.index.values)#, key='unik1155') 
#                                            had to pass unique key to have double widgets with same value

# range slider -- added
student_teacher_ratio_range = controls_col2.slider("Range of student teacher ratio:", 
                                                   df['Student_teacher_ratio'].min(), 
                                                   df['Student_teacher_ratio'].max(), 
                                                   (0.25*df['Student_teacher_ratio'].mean(), 
                                                    0.75*df['Student_teacher_ratio'].mean()))

# note all the "2's" here, probably will just update the original one
if len(states_selected2) > 0: # here we set a default value for the slider, so no need to have a tag
    min_range = student_teacher_ratio_range[0] # added
    max_range = student_teacher_ratio_range[1] # added

    df_subset2 = df[(df['State'].isin(states_selected2)) & (df['Student_teacher_ratio'] >= min_range) & (df['Student_teacher_ratio']<=max_range)] # changed

    # just 10 bins over the full range --> changed
    bins2 = 10 #np.linspace(df['Student_teacher_ratio'].min(),df['Student_teacher_ratio'].max(), 10)

    # make pivot table -- changed
    table_sub2 = df_subset2.pivot_table(index='State', 
                                  columns=pd.cut(df_subset2['Student_teacher_ratio'], bins2), 
                                  aggfunc='size')

    base_size = 4
    fig2,ax2 = plt.subplots(figsize=(base_size,2*base_size)) # this changed too for different size
    extent2 = [df_subset2['Student_teacher_ratio'].min(), 
               df_subset2['Student_teacher_ratio'].max(), 
               0, len(table_sub2.index)]
    ax2.imshow(table_sub2.values, cmap='hot', interpolation='nearest', extent=extent2)
    ax2.set_yticks(range(len(table_sub2.index)))
    ax2.set_yticklabels(table_sub2.index)
    #ax2.set_xticklabels()

    buf2 = BytesIO()
    fig2.tight_layout()
    fig2.savefig(buf2, format="png")
    fig_col2.image(buf2, width = 400) # changed here to fit better
else:
    min_range = student_teacher_ratio_range[0] # added
    max_range = student_teacher_ratio_range[1] # added

    df_subset2 = df[(df['Student_teacher_ratio'] >= min_range) & (df['Student_teacher_ratio']<=max_range)] # changed

    # just 10 bins over the full range --> changed
    bins2 = 10 #np.linspace(df['Student_teacher_ratio'].min(),df['Student_teacher_ratio'].max(), 10)

    # make pivot table -- changed
    table_sub2 = df_subset2.pivot_table(index='State', 
                                  columns=pd.cut(df_subset2['Student_teacher_ratio'], bins2), 
                                  aggfunc='size')

    base_size = 4
    fig2,ax2 = plt.subplots(figsize=(base_size,2*base_size)) # this changed too for different size
    extent2 = [df_subset2['Student_teacher_ratio'].min(), 
               df_subset2['Student_teacher_ratio'].max(), 
               0, len(table_sub2.index)]
    ax2.imshow(table_sub2.values, cmap='hot', interpolation='nearest', extent=extent2)
    ax2.set_yticks(range(len(table_sub2.index)))
    ax2.set_yticklabels(table_sub2.index)
    #ax2.set_xticklabels()

    buf2 = BytesIO()
    fig2.tight_layout()
    fig2.savefig(buf2, format="png")
    fig_col2.image(buf2, width = 400) # changed here to fit better