The Streamlit Epic Overview (part 1/2)

you just heard about streamlining like this quickly build your data science web app what kind of widgets can you use well you know what i'm going to go through all of the stream widgets for you in this one video buckle up create an empty app.pi import from it as st and then run the extremely run app.pi command it's going to be a long ride right unmagic streaming as an st.right method that interprets the variable that you put as argument and then printed inside the web app so you can give it text or a matplotlib chart and alter your chart or a pandas data frame and it's going to print in the web app accordingly to its type you can call multiple variables in there they are going to be stacked vertically from top to bottom even more lazy just write the name of the variable in your script and streamline it is going to try and wrap it around an sd.write command to print it for i use this in live demos or interactive lectures every time i i tell my students they have to imagine that sd.write is like a print to the web app and i can just put anything i want in this summit is going to manage text element so now that we are familiarized with st right it's time to go into the more specific widgets to display text and information title header sub header use this to structure your content you can add an uncore argument to quickly navigate through your app by changing the url [Music] markdown if you know how to build github readmes you know your way around malcolm and you can display it in streamlit it also accepts emoji shortcodes so you can add some emotions to your apps and also latex formatting if you want to put mathematical formulas inside your markdown it also accepts a unsafe allow with shame and argument which you can use to color your text in blue or use the css hack caption you can add small text in streaming as footnotes for example code add code snippet to your code to explain to your colleagues how you implemented back propagation in your deep learning model text write text yeah i don't know what to say about it logic now it's time to showcase some data table and data frame i use sd.table when i need to display a small configuration table in my app but whenever i've got a bigger data frame to display like the penguins data set i will use the sd.dataframe method because it comes with height and with scroll bar so you can scroll inside your data frame trim it also accepts a panda styler which you can use to add some color formatting to your cells for example you can color any game to penguin as blue mertrick you know those di dashboards that show a big number and the up arrow and down arrow and they are estimetric here for you jason streaming as a pretty good json viewer i can just crap data from the youtube or twitter api dump it inside st.json and then scroll inside the documents while i edit the code to extract the information that i need altair altair is a python whopper around the phagolite specification so you use it to build interactive javascript oriented visualization with python have a look at the example gallery you can specify the used container with argument to tell streamly that every time it gets a chart it should extend it to the width of the container so you can then select to display the container as wide or constrained and the chart is going to respond accordingly line chart real chart bar charts are easy to use whipper methods around our tires so you can use them to quickly display data but whenever you want to edit the legends or the title then you are going to go back to the outside chart because you cannot customize those three methods vaguely if you don't like playing with the altar api and prefer json you can use the vegalite chart method to render vega light json specifications broadly and bulky let's stay in the interactive plotting libraries we are more used to using them because trimnet only has to send json from the server to the client and the client is going to render the json as a chart it's going to be much faster than libraries like matplotlib and in this environment we've got the plotly chart method and the bucky chart method now i personally use a lot of plotly expressed charts when i need to integrate shots with in on which i can zoom and quickly interact with but some of our harder plots in the streamic community use a lot of bokeh because you can build more javascript oriented interactions between the data points but know that you can use both don't try to integrate bulky applications or plotly dash it's not going to work what oh yeah okay yeah yeah sure razor data scientist obviously we have a pi plot method that you can use for matplotlib charts or any libraries that depend on matplotlib like cyborg geopandas or plot9 etc i just did a video about it go check it out graphis if you want to display psychology in decision trees you can export the tree as a dots file and then render it with the graph phase method by duck now go get yourself a map box token and store it inside your configuration file we are going to draw some maps with the pi deck library you can build 3d maps point cloud or scatter plots over a map there's a good streamlined demo called the new york city uber ride pickups which will showcase the power of pi dict if it looks a little bit overwhelming you can use the map method which is a simplified version that takes as input a data frame of geolocations to display a map with a scatter plot with each point corresponding to a latitude and longitude add row a little feature is that data frame and chart elements accept an ad rows method to programmatically add numpy or pandas date this is a quick way of running a real-time life block simulation can't edit nor remove data from elements for that you'll have to wait a little bit longer to learn about overriding elements with data from a state object media elements as deep learning masters you are going to generate a lot of images and audio and videos and you can display those three types inside free can take raw data from a file number data you generate it from an algorithm file names or an url yeah we've gone through a lot you know how to display information inside streamlight but now we need to react to the app so anyone can interact with it and say look i have built something input element most of the following elements share some functionality so here's the info that is common to all of the elements the first function parameter it's the label of your widget you've got the help argument if you want to add a little tooltip to your widget you can disable any widgets with the disabled argument so people don't miss click when obviously it's already right the key argument is really important because it is the identity of your widget by default it's going to be the label of the widget which is why if you've got multiple widgets that are named clickme then it is not able to differentiate between those two and will return an error so make sure to add unique identifiers to your widget using the key argument button click the button and it will return true don't click on it and it will return false we use this in an if condition to access some code after clicking on the button like run this model check box if it's checked it will return true otherwise it will return false a long time ago this was our preferred way of showing or hiding multiple sections radio returns the selected radio button for a given list of items i use this for example to select the kind of algorithm i want to use before running the whole code select box it's like radio but the items are put in the select box one of our favorite way of using the select box is by building multiple methods that will show different streamlink content and then map each item of the select box to a particular method so when you select an item in the select box you display a whole new page of strip need content this is like the poor man's multi-page app multi-select basically select box but on steroids because you can select multiple values i like to pass my data frame columns in there and then run some descriptive statistics on every column that i select inside the multi-select slider to define the numeric value or date that you want to use it accepts numbers and date if you pass a tuple as a default value this transforms into a rand slider so you can select the minimum value and the maximum value select slider what do you think happens when a select box and a slider have a baby it's like a slider but non-continuous text input have the user write its name in the text input and then print it back by specifying the type argument to password the text input will be masked by star so your user can write its password text area it's like text input but what both accept a max number of characters with the max card argument if you want to build a ui to send to it you can limit the size of the tweet here number input this is dedicated to choosing a number you can also scroll through a range of numbers defined by the mean max and step value date input this is nice you get a calendar to select a date it looks like any selected date to book a plane or a hotel room it returns a date time and like for the slider if you put as default value a tuple you will get a range date input so you can select a time period with a minimum and a maximum value time inputs it's a select box with lots of different time so you don't have to create it yourself file uploader upload your excel file there read as a pentas data frame and do some extreme data computation there you can limit the type of file that you can upload through the type argument which takes as input a list of file formats if you want to upload multiple files enable the accept multiple files argument then you're going to get a list of file uploads as a result the return result is of type uploaded file you can use get value on them to get the content as a byte array or it's also a file like object so you can use it with read csv or read text or anything that accepts a file as argument download button imagine you've uploaded your excel file you did some pretty cool computation with it and you want your user to download it back then you can add a download button to download gaza csv camera input say g to the webcam it will take a picture and upload it to streamlet color picker select a color and get its x representation back and then use it to colorize your face from the camera if you did not find your favorite widget you can go and have a look at the streaming components tracker it has community build widgets like real-time video or drawable canvas that you can use inside your app yes you can build your own components with html css and javascript but that's for another video tell me in the comments if you're interested how do i tell streamlit which part of the application should react we know how to stack our widgets vertically can we do better this is the cherry on the cake you're a streaming expert

Channel: Fanilo Andrianasolo

Views: 47,625

Keywords: build data science project, data analysis, data analytics, data apps, data science, data visualization, how to streamlit, how to use streamlit, learn streamlit, python streamlit, streamlit, streamlit deploy, streamlit python, streamlit tips, streamlit tutorial, teaching python

Id: vIQQR_yq-8I

Length: 13min 6sec (786 seconds)

Published: Mon Feb 28 2022