Update app.py

app.py

@@ -1,117 +1,173 @@
-# load up the libraries
-import panel as pn
-import pandas as pd
-import altair as alt
-from vega_datasets import data
-
-# we want to use bootstrap/template, tell Panel to load up what we need
-pn.extension(design='bootstrap')
-
-# we want to use vega, tell Panel to load up what we need
-pn.extension('vega')
-
-# create a basic template using bootstrap
-template = pn.template.BootstrapTemplate(
-    title='SI649 Walkthrough',
-)
-
-# the main column will hold our key content
-maincol = pn.Column()
-
-# add some markdown to the main column
-maincol.append("# Markdown Title")
-maincol.append("I can format in cool ways. Like **bold** or *italics* or ***both*** or ~~strikethrough~~ or `code` or [links](https://panel.holoviz.org)")
-maincol.append("I am writing a link [to the streamlit documentation page](https://docs.streamlit.io/en/stable/api.html)")
-maincol.append('![alt text](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Irises-Vincent_van_Gogh.jpg/314px-Irises-Vincent_van_Gogh.jpg)')
+# # load up the libraries
+# import panel as pn
+# import pandas as pd
+# import altair as alt
+# from vega_datasets import data
+
+# # we want to use bootstrap/template, tell Panel to load up what we need
+# pn.extension(design='bootstrap')
+
+# # we want to use vega, tell Panel to load up what we need
+# pn.extension('vega')
+
+# # create a basic template using bootstrap
+# template = pn.template.BootstrapTemplate(
+#     title='SI649 Walkthrough',
+# )
+
+# # the main column will hold our key content
+# maincol = pn.Column()
+
+# # add some markdown to the main column
+# maincol.append("# Markdown Title")
+# maincol.append("I can format in cool ways. Like **bold** or *italics* or ***both*** or ~~strikethrough~~ or `code` or [links](https://panel.holoviz.org)")
+# maincol.append("I am writing a link [to the streamlit documentation page](https://docs.streamlit.io/en/stable/api.html)")
+# maincol.append('![alt text](https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Irises-Vincent_van_Gogh.jpg/314px-Irises-Vincent_van_Gogh.jpg)')
+
+# # load up a dataframe and show it in the main column
+# cars_url = "https://raw.githubusercontent.com/altair-viz/vega_datasets/master/vega_datasets/_data/cars.json"
+# cars = pd.read_json(cars_url)
+# temps = data.seattle_weather()
+
+# maincol.append(temps.head(10))
+
+# # create a basic chart
+# hp_mpg = alt.Chart(cars).mark_circle(size=80).encode(
+#     x='Horsepower:Q',
+#     y='Miles_per_Gallon:Q',
+#     color='Origin:N'
+# )
+
+# # dispaly it in the main column
+# # maincol.append(hp_mpg)
+
+# # create a basic slider
+# simpleslider = pn.widgets.IntSlider(name='Simple Slider', start=0, end=100, value=0)
+
+# # generate text based on slider value
+# def square(x):
+#     return f'{x} squared is {x**2}'
+
+
+# # bind the slider to the function and hold the output in a row
+# row = pn.Column(pn.bind(square,simpleslider))
+
+# # add both slider and row
+# maincol.append(simpleslider)
+# maincol.append(row)
+
+# # variable to track state of visualization
+# flip = False
+
+# # function to either return the vis or a message
+# def makeChartVisible(val):
+#     global flip  # grab the variable outside the function
+#     if (flip == True):
+#         flip = not flip             # flip to False
+#         return pn.pane.Vega(hp_mpg) # return the vis
+#     else:
+#         flip = not flip             # flip to true and return text
+#         return pn.panel("Click the button to see the chart")
+    
+# # add a button and then create the binding
+# btn = pn.widgets.Button(name='Click me')
+# row = pn.Row(pn.bind(makeChartVisible, btn))
+
+# # add button and new row to main column
+# maincol.append(btn)
+# maincol.append(row)
+
+# # create a base chart
+# basechart = alt.Chart(cars).mark_circle(size=80,opacity=0.5).encode(
+#     x='Horsepower:Q',
+#     y='Acceleration:Q',
+#     color="Origin:N"
+# )
+
+# # create something to hold the base chart
+# currentoption = pn.panel(basechart)
+
+# # create a selection widget
+# select = pn.widgets.Select(name='Select', options=['Horsepower','Acceleration','Miles_per_Gallon'])
+
+# # create a function to modify the basechart that is being
+# # held in currentoption
+# def changeOption(val):
+#     # grab what's there now
+#     chrt = currentoption.object
+#     # change the encoding based on val
+#     chrt = chrt.encode(
+#         y=val+":Q"
+#     )
+#     # replace old chart in currentoption with new one
+#     currentoption.object = chrt
+
+# # append the selection
+# maincol.append(select)
+# # append the binding (in thise case nothing is being returned by changeOption, so...)
+# chartchange = pn.Row(pn.bind(changeOption, select))
+# # ... we need to also add the chart
+# maincol.append(chartchange)
+# maincol.append(currentoption)
+
+# # add the main column to the template
+# template.main.append(maincol)
+
+# # Indicate that the template object is the "application" and serve it
+# template.servable(title="SI649 Walkthrough")
 
-# load up a dataframe and show it in the main column
-cars_url = "https://raw.githubusercontent.com/altair-viz/vega_datasets/master/vega_datasets/_data/cars.json"
-cars = pd.read_json(cars_url)
-temps = data.seattle_weather()
 
-maincol.append(temps.head(10))
+import panel as pn
+import pandas as pd 
+import altair as alt  
 
-# create a basic chart
-hp_mpg = alt.Chart(cars).mark_circle(size=80).encode(
-    x='Horsepower:Q',
-    y='Miles_per_Gallon:Q',
-    color='Origin:N'
-)
+#load data 
+df1=pd.read_csv("https://raw.githubusercontent.com/dallascard/SI649_public/main/altair_hw3/approval_polllist.csv")
+df2=pd.read_csv("https://raw.githubusercontent.com/dallascard/SI649_public/main/altair_hw3/approval_topline.csv")
 
-# dispaly it in the main column
-# maincol.append(hp_mpg)
+# fix the time stamps and reorganize the data to combine approve and disapprove into one column
+df2['timestamp']=pd.to_datetime(df2['timestamp'])
+df2=pd.melt(df2, id_vars=['president', 'subgroup', 'timestamp'], value_vars=['approve','disapprove']).rename(columns={'variable':'choice', 'value':'rate'})
 
-# create a basic slider
-simpleslider = pn.widgets.IntSlider(name='Simple Slider', start=0, end=100, value=0)
+pn.extension('vega')
 
-# generate text based on slider value
-def square(x):
-    return f'{x} squared is {x**2}'
+# Selection widgets
+subgroup_select = pn.widgets.Select(name='Select', options=['Adults', 'Voters', 'All polls'])
+date_slider = pn.widgets.DateRangeSlider(name='Date Range Slider', start=df2['timestamp'].min(), end=df2['timestamp'].max())
+moving_avg_slider = pn.widgets.IntSlider(name='Moving Average Window', start=1, end=100, step=1)
+
+# Bind the widgets to the create_plot function
+@pn.depends(subgroup_select.param.value, date_slider.param.value, moving_avg_slider.param.value)
+def create_plot(subgroup, date_range, moving_av_window):
+    data = df2[(df2['subgroup'] == subgroup) & (df2['choice'] == "approve") & (df2['timestamp'].dt.date.between(date_range[0], date_range[1]))]
+    min_rate = df2['rate'].min()
+    max_rate = df2['rate'].max()
+
+    data = data.sort_values('timestamp')
+    data['moving_avg'] = data['rate'].rolling(window=moving_av_window, min_periods=1).mean()
+
+    # Line chart for moving average
+    line = alt.Chart(data).mark_line(interpolate='natural').encode(
+        x=alt.X('timestamp:T', axis=alt.Axis(title='', format='%b %d, %Y')),
+        y=alt.Y('moving_avg:Q', axis=alt.Axis(title='approve,mov_avg'), scale=alt.Scale(domain=[min_rate, max_rate])),
+        color=alt.value('red')
+    )
 
+    # Scatter plot for individual data points
+    points = alt.Chart(data).mark_point().encode(
+        x=alt.X('timestamp:T'),
+        y=alt.Y('rate:Q', axis=alt.Axis(title='approve,mov_avg'), scale=alt.Scale(domain=[min_rate, max_rate])),
+        color=alt.value('gray'),
+        tooltip=['timestamp:T', 'rate:Q']
+    )
 
-# bind the slider to the function and hold the output in a row
-row = pn.Column(pn.bind(square,simpleslider))
+    # Combine line chart and scatter plot
+    plot = alt.layer(points, line).resolve_scale(y='shared')
 
-# add both slider and row
-maincol.append(simpleslider)
-maincol.append(row)
+    return plot
 
-# variable to track state of visualization
-flip = False
+# Combine everything in a Panel Column to create an app
+app = pn.Column("# Polling Data Interactive Visualization", pn.panel(create_plot, reactive=True), subgroup_select, date_slider, moving_avg_slider)
 
-# function to either return the vis or a message
-def makeChartVisible(val):
-    global flip  # grab the variable outside the function
-    if (flip == True):
-        flip = not flip             # flip to False
-        return pn.pane.Vega(hp_mpg) # return the vis
-    else:
-        flip = not flip             # flip to true and return text
-        return pn.panel("Click the button to see the chart")
-    
-# add a button and then create the binding
-btn = pn.widgets.Button(name='Click me')
-row = pn.Row(pn.bind(makeChartVisible, btn))
-
-# add button and new row to main column
-maincol.append(btn)
-maincol.append(row)
-
-# create a base chart
-basechart = alt.Chart(cars).mark_circle(size=80,opacity=0.5).encode(
-    x='Horsepower:Q',
-    y='Acceleration:Q',
-    color="Origin:N"
-)
-
-# create something to hold the base chart
-currentoption = pn.panel(basechart)
-
-# create a selection widget
-select = pn.widgets.Select(name='Select', options=['Horsepower','Acceleration','Miles_per_Gallon'])
-
-# create a function to modify the basechart that is being
-# held in currentoption
-def changeOption(val):
-    # grab what's there now
-    chrt = currentoption.object
-    # change the encoding based on val
-    chrt = chrt.encode(
-        y=val+":Q"
-    )
-    # replace old chart in currentoption with new one
-    currentoption.object = chrt
-
-# append the selection
-maincol.append(select)
-# append the binding (in thise case nothing is being returned by changeOption, so...)
-chartchange = pn.Row(pn.bind(changeOption, select))
-# ... we need to also add the chart
-maincol.append(chartchange)
-maincol.append(currentoption)
-
-# add the main column to the template
-template.main.append(maincol)
-
-# Indicate that the template object is the "application" and serve it
-template.servable(title="SI649 Walkthrough")
+# Set the app to be servable
+app.servable()