lab7 / app.py
ritaycw's picture
Update app.py
2a4ebc7 verified
# 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")