Data Visualization with Streamlit

Transcript

1. Data Visualization
   With Streamlit
   Luca Corbucci
   PyCon Italia - Firenze
   
   04/06/2022
   

   View Slide

2. • 👨💻 Ph.D. Student @ University of Pisa
   
   • 🎤 Podcaster @ PointerPodcast
   
   • 🦸 Community Manager @ SuperHeroesValley
   
   • 🌏 lucacorbucci.me
   👋 Hi, I’m Luca
   @lucacorbucci
   

   View Slide

3. Once upon a time, at the
   end of a university
   project…
   

   View Slide

4. View Slide

5. View Slide

6. How could we report our
   results without developing a
   dashboard?
   

   View Slide

7. View Slide

8. What is Streamlit?
   • It is an open source framework for data scientist and ML engineer
   
   • It allows you to develop interfaces for ML projects
   
   • It allows you to write your interface using Python
   
   • It is easy to use: you don’t need any previous frontend experience
   
   • It o
   ff
   ers an easy way to deploy your projects
   

   View Slide

9. Installation
   

   View Slide

10. Let’s create our first app
    

    View Slide

11. import streamlit as st
    
    
    import pandas as pd
    

    View Slide

12. import streamlit as st
    
    
    import pandas as pd
    
    
    st.title("Hello Pycon IT")
    

    View Slide

13. import streamlit as st
    
    
    import pandas as pd
    
    
    st.title("Hello Pycon IT")
    
    
    df = pd.read_csv("./race-winners.csv")
    
    
    st.dataframe(df)
    
    
    

    View Slide

14. import streamlit as st
    
    
    import pandas as pd
    
    
    st.title("Hello Pycon IT")
    
    
    df = pd.read_csv("./race-winners.csv")
    
    
    st.dataframe(df)
    
    
    df1 = df[df['Class'] == 'MotoGP™']
    
    
    count = df1['Rider'].value_counts().head(20)
    
    
    st.bar_chart(count)
    
    
    

    View Slide

15. import streamlit as st
    
    
    import pandas as pd
    
    
    st.title("Hello Pycon IT")
    
    
    df = pd.read_csv("./race-winners.csv")
    
    
    st.dataframe(df)
    
    
    class_type = st.radio(
    
    
    "Choose the class you want to display",
    
    
    ('Moto3™', 'Moto2™', 'MotoGP™'))
    
    
    df1 = df[df['Class'] == class_type]
    
    
    count = df1['Rider'].value_counts().head(20)
    
    
    st.bar_chart(count)
    
    
    

    View Slide

16. import streamlit as st
    
    
    import pandas as pd
    
    
    st.title("Hello Pycon IT")
    
    
    df = pd.read_csv("./race-winners.csv")
    
    
    st.dataframe(df)
    
    
    class_type = st.radio(
    
    
    "Choose the class you want to display",
    
    
    ('Moto3™', 'Moto2™', 'MotoGP™'))
    
    
    df1 = df[df['Class'] == class_type]
    
    
    count = df1['Rider'].value_counts().head(20)
    
    
    st.bar_chart(count)
    
    
    option = st.selectbox(
    
    
    'Select the year you want to display:',
    
    
    (i for i in range(1949, 2023)))
    
    
    df1 = df1[df1['Season'] == option]
    
    
    count = df1['Rider'].value_counts().head(20)
    
    
    st.bar_chart(count)
    
    
    

    View Slide

17. @st.cache is our friend
    • We don’t want to execute multiple
    times a slow code
    
    • We can mark functions with the
    decorator @st.cache
    
    • It allows us to reuse data avoiding
    executing slow code multiple times
    def load_data(path: str) -> pd.DataFrame:
    
    
    data = pd.read_csv(path)
    
    
    return data
    
    
    df = load_data("./race-winners.csv")
    
    
    st.dataframe(df)
    
    
    

    View Slide

18. @st.cache is our friend
    • We don’t want to execute multiple
    times a slow code
    
    • We can mark functions with the
    decorator @st.cache
    
    • It allows us to reuse data avoiding
    executing slow code multiple times
    @st.cache
    
    
    def load_data(path: str) -> pd.DataFrame:
    
    
    data = pd.read_csv(path)
    
    
    return data
    
    
    df = load_data("./race-winners.csv")
    
    
    st.dataframe(df)
    
    
    

    View Slide

19. @st.cache in details
    • Once we add the decorator, Streamlit will check:
    
    • If the input parameters changed
    
    • If the body of the function changed
    
    • If the body of the functions called inside the function changed
    
    • If the variables used inside the function changed
    
    • Streamlit stores the data in a local cache, if any of these components changed
    then it will execute again the function otherwise it will use the cached data
    

    View Slide

20. View Slide

21. Deploy your first data app
    • Streamlit allows the deployment of the data apps on Streamlit Cloud
    
    • Streamlit Cloud is connected with a GitHub repo and it is able to deploy your
    app
    
    • It is a free service (with some limitations)
    

    View Slide

22. Deploy your first data app
    

    View Slide

23. Demo!
    

    View Slide

24. Thank you
    @lucacorbucci
    🌏 lucacorbucci.me
    👨💻 github.com/lucacorbucci/
    📥 corbuccilu@gmail.com
    

    View Slide