Update app.py

app.py

@@ -1,74 +1,117 @@
-# Import panel and vega datasets
-
+# load up the libraries
 import panel as pn
-import vega_datasets
+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')
 
-# Enable Panel extensions
-pn.extension()
+# 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 Altair3',
+    title='SI649 Walkthrough',
 )
 
+# the main column will hold our key content
 maincol = pn.Column()
 
-# Define a function to create and return a plot
-def create_plot(subgroup, date_range, moving_av_window):
+# 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)')
 
-    # Apply any required transformations to the data in pandas)
-    filtered_df = df2_approve[df2_approve['subgroup'] == subgroup]
-    filtered_df = filtered_df[(filtered_df['timestamp'].dt.date >= date_range[0]) & (filtered_df['timestamp'].dt.date <= date_range[1])]
-    filtered_df['mov_avg'] = filtered_df['rate'].rolling(window=moving_av_window, min_periods=1).mean().shift(moving_av_window//2)
+# 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()
 
-    # Line chart
-    line_chart = alt.Chart(filtered_df).mark_line(color='red', size=2).encode(
-        x='timestamp:T',
-        y='mov_avg:Q'
-    )
+maincol.append(temps.head(10))
 
-    # Scatter plot with individual polls
-    scatter_plot = alt.Chart(filtered_df).mark_point(color='grey', size=2, opacity=0.7).encode(
-        x='timestamp:T',
-        y='rate:Q'
-    )
+# 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'
+)
 
-    # Put them togetehr
-    plot = scatter_plot + line_chart
-    
-    # Return the combined chart
-    return plot
-    
+# dispaly it in the main column
+# maincol.append(hp_mpg)
 
-# # Create the selection widget
-select = pn.widgets.Select(name='Select', options=['All polls', 'Adults', 'Voters'])
+# 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}'
 
-# # Create the slider for the date range
-date_range_slider = pn.widgets.DateRangeSlider(
-    name='Date Range Slider',
-    start=df2['timestamp'].dt.date.min(), end=df2['timestamp'].dt.date.max(),
-    value=(df2['timestamp'].dt.date.min(), df2['timestamp'].dt.date.max()),
-    step=1
-)
 
+# 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)
 
-# # Create the slider for the moving average window
-moving_av_slider = pn.widgets.IntSlider(name='Moving Average Window', start=1, end=100, value=1)
+# 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"
+)
 
-# Bind the widgets to the create_plot function
-final = pn.Row(pn.bind(create_plot, 
-                       subgroup=select, 
-                       date_range=date_range_slider, 
-                       moving_av_window=moving_av_slider))
+# 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'])
 
-# # Combine everything in a Panel Column to create an app
-maincol.append(final)
+# 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)
-maincol.append(date_range_slider)
-maincol.append(moving_av_slider)
+# 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)
 
-# # set the app to be servable
-template.servable(title="SI649 Altair3")
+# Indicate that the template object is the "application" and serve it
+template.servable(title="SI649 Walkthrough")