Data Visualization con Streamlit

Streamlit è un progetto open source che permette di creare in pochi minuti delle data-web-app (e non solo) scrivendo solamente codice Python senza necessità di avere esperienza di front-end. In questa sessione scopriremo il suo funzionamento, come deployare un’app e vedremo un possibile caso d’uso.
Abstract

Vi è mai capitato di dover mostrare e spiegare i risultati di un progetto di analisi di dati? Non c’è sempre tempo e modo di sviluppare da zero una dashboard per l’occasione e presentare direttamente un jupyter notebook potrebbe non essere la soluzione ideale.

E qui arriva in soccorso Streamlit: si tratta di un progetto open source che permette di creare in pochissimi minuti una data-web-app (e non solo) scrivendo solamente codice Python senza necessità di avere esperienza di front-end.

In questa sessione scopriremo come funziona Streamlit, come deployare un’app e vedremo un possibile caso d’uso.

Transcript

1. Data Visualization
   con 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. C’era una volta, alla fine di
   un progetto
   universitario…
   

   View Slide

4. View Slide

5. View Slide

6. Come possiamo
   riportare i risultati senza
   sviluppare da zero una
   dashboard?
   

   View Slide

7. View Slide

8. Cos’è Streamlit
   • È un framework open source per data scientist e ML engineer
   
   • Permette di sviluppare delle interfacce per progetti di ML
   
   • Ti permette di scrivere l’interfaccia utilizzando solamente Python
   
   • È facile da usare! Non avrai bisogno di essere esperto di frontend per scrivere
   la tua data app
   
   • Permette un deploy facile del progetto
   

   View Slide

9. Installazione
   

   View Slide

10. Creiamo la nostra prima 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”)
    
    
    # possiamo anche scrivere
    
    
    # “# Hello Pycon IT”
    
    
    # Oppure
    
    
    # st.write(“# 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 è nostro amico
    • Non vogliamo eseguire più volte lo stesso
    codice, specialmente se l’esecuzione non
    è veloce
    
    • Possiamo usare il decoratore @st.cache
    
    • Ci permette di riutilizzare il codice già
    eseguito senza necessità di eseguirlo più
    volte
    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
    
    
    def load_data(path: str) -> pd.DataFrame:
    
    
    data = pd.read_csv(path)
    
    
    return data
    
    
    df = load_data("./race-winners.csv")
    
    
    st.dataframe(df)
    
    
    • Non vogliamo eseguire più volte lo stesso
    codice, specialmente se l’esecuzione non
    è veloce
    
    • Possiamo usare il decoratore @st.cache
    
    • Ci permette di riutilizzare il codice già
    eseguito senza necessità di eseguirlo più
    volte
    @st.cache è nostro amico
    

    View Slide

19. @st.cache nel dettaglio
    • Una volta aggiunto il decoratore, Streamlit controllerà:
    
    • Se i parametri di input della funzione sono cambiati
    
    • Se il body della funzione è cambiato
    
    • Se il body delle funzioni chiamate nella funzione è cambiato
    
    • Se le variabili usate dentro la funzione sono cambiate
    
    • Streamlit memorizza i dati in una cache locale, se uno di questi componenti
    viene modi
    fi
    cato allora eseguirà il codice di nuovo, altrimenti utilizzerà i dati
    della cache.
    

    View Slide

20. View Slide

21. Eseguiamo il deploy della nostra data app
    • Streamlit permette il deploy delle data app direttamente su Streamlit Cloud
    
    • Streamlit Cloud è connesso ad una repo GitHub ed è in grado di eseguire il
    deploy
    
    • Il servizio è gratuito (con alcune limitazioni)
    

    View Slide

22. Eseguiamo il deploy della nostra data app
    

    View Slide

23. Demo!
    

    View Slide

24. Thank you
    @lucacorbucci
    🌏 lucacorbucci.me
    👨💻 github.com/lucacorbucci/
    📥 corbuccilu@gmail.com
    💬 http://chat.pointerpodcast.it/
    

    View Slide