Recherche de site Web

Créer des applications interactives de science des données avec Python


Utiliser Python pour créer des applications attrayantes et interactives où les utilisateurs peuvent transmettre une entrée, obtenir et commenter et utiliser des éléments multimédias tels que des images, des vidéos et de l'audio.

L'interaction est avant tout une question de contact, c'est-à-dire la façon dont vous racontez une histoire à vos utilisateurs, comment ils la comprennent et comment ils peuvent s'y intéresser. Les gens aiment voir les choses avec leurs yeux, ils aiment les projections avec lesquelles ils peuvent interagir.

Une application interactive est un logiciel informatique conçu pour engager les utilisateurs dans un engagement actif. Cela indique que lorsqu'un utilisateur clique sur un bouton, tape du texte ou déplace un objet sur l'écran, le programme réagit à ces actions. Cela ressemble à un dialogue dans lequel vous accomplissez un acte et l'ordinateur réagit.

Une application interactive comprend ces fonctionnalités principales, la saisie de l'utilisateur (où les utilisateurs peuvent saisir des données ou des commandes), le retour d'information (c'est le résultat de la saisie de l'utilisateur) et les éléments multimédias (par exemple, les images, les vidéos et l'audio utilisés pour créer l'application). interaction plus engageante).

Quelques exemples d'applications interactives sont les logiciels éducatifs, les applications de médias sociaux, les jeux vidéo informatiques, etc. Un très bon exemple de logiciel informatique qui n'est pas interactif est un économiseur d'écran d'ordinateur, qui ne nécessite aucune interaction de l'utilisateur lors de son exécution.

Bibliothèques offrant une interactivité en science des données

À l'époque, vous deviez présenter vos applications de science des données à l'aide de Flask ou apprendre le HTML, le CSS et le JavaScript. Mais à l'heure actuelle, les choses sont devenues bien meilleures et plus faciles depuis l'introduction des bibliothèques Web interactives de science des données. Ces cadres donnent aux scientifiques de données la flexibilité nécessaire pour créer des applications interactives de science des données sans avoir à apprendre les technologies frontales, à partager des applications de données, à déployer des applications. applications sur le cloud avec uniquement le langage de programmation Python.

Certaines de ces bibliothèques incluent :

  • Rationalisé
  • Gradio
  • Tiret
  • Panneau

Rationalisé

Streamlit est un framework Python open source utilisé pour créer des applications de données hautement interactives en quelques lignes de code seulement. Son objectif premier lors de sa création en 2019 était de vous aider à vous concentrer sur ce qui compte le plus pour vous : votre analyse de données !

Rationalisez les fonctions en transformant les scripts Python en applications Web pouvant être partagées. La simplicité de Streamlit est ce qui le rend si populaire. L'utilisation de la bibliothèque Streamlit est simple et rapide, vous n'avez donc pas besoin de compétences préalables en programmation Web pour créer des applications de données. Apprenez-en davantage sur Streamlit ici.

Même si Streamlit est un excellent outil, son utilité peut différer selon la situation. Toutes vos applications auront la même mise en page et le même style, à moins que vous ne soyez prêt à créer du HTML, du JS et du CSS, car les applications Streamlit ont des conceptions et des apparences plutôt rigides.

Gradio

Gradio est un framework Web open source qui facilite la création d'applications d'apprentissage automatique (ML). Il évite aux développeurs de développer du code frontal et vous permet de créer facilement des interfaces pour les modèles ML.

Les développeurs utilisent Gradio pour créer des interfaces pour des modèles textuels, graphiques ou audio. Gradio prend également en charge de nombreux frameworks ML bien connus, notamment TensorFlow, PyTorch et Scikit-learn.

Gradio est plus adapté aux démonstrations d'apprentissage automatique, tandis que Streamlit se concentre davantage sur la création de tableaux de bord de données. C'est la principale distinction entre les deux langues. Son interface glisser-déposer facilite la création de champs de saisie et de sorties personnalisés, et sa prise en charge intégrée de l'hébergement et du partage de modèles d'apprentissage automatique simplifie le processus de déploiement.

Certaines applications Gradio peuvent paraître assez anciennes et obsolètes. Il faut donc savoir écrire du CSS de base pour les personnaliser. Contrairement aux applications Streamlit, qui fonctionnent mieux en tant qu'applications indépendantes, les applications Gradio fonctionnent mieux lorsqu'elles sont intégrées dans une autre page Web.

Tiret

Dash est un framework open source permettant de créer des applications de données avec Python, R ou Julia. Il s'agit d'un excellent outil pour créer des tableaux de bord interactifs basés sur les données, et il présente l'avantage d'être un framework low-code pour développer rapidement des applications de données Python.

Dash inclut un wrapper HTML en Python pour créer des interfaces utilisateur, mais son utilisation nécessite toujours des connaissances en HTML. Il n'est pas non plus aussi simple à démarrer que Streamlit car il est un peu plus complexe (vous devrez utiliser des "rappels" et du HTML).

Panneau

Panel est une boîte à outils Python open source destinée à faciliter la création d'outils puissants, de tableaux de bord et d'applications complexes en utilisant uniquement Python. L'approche large de Panel lui permet de se connecter sans effort à l'écosystème PyData tout en fournissant des tableaux de données puissants et interactifs, des visualisations et bien plus encore pour vous permettre de déverrouiller, d'analyser, de partager et de travailler ensemble sur vos données pour des flux de travail productifs.

Son ensemble de fonctionnalités comprend à la fois des API basées sur des rappels de bas niveau et des API réactives de haut niveau, qui facilitent la création d'applications complexes multipages avec beaucoup d'interactivité et la conception rapide d'applications exploratoires.

Semblable à toutes les solutions disponibles, Panel facilite l'exécution et l'hébergement faciles de vos applications localement ; cependant, vous êtes seul lorsqu'il s'agit de les déployer dans le cloud. Ils offrent des instructions sur plusieurs choix de déploiement

Créer des applications de données interactives avec Streamlit

Dans cette section, vous allez créer un tableau de bord entièrement fonctionnel et interactif qui affiche les visualisations et les données de la population des États-Unis pour les années 2010-2019 du US Census Bureau.

Voici la démo de l'application :

Remarque : Si vous souhaitez tester l'application, vous pouvez la consulter ici mais, si vous souhaitez aller plus loin et jeter un œil au code, n'hésitez pas pour le vérifier ici

Exigences

  • Python3.5+
  • Streamlit pip install streamlit
  • Pandas - pour l'analyse et la discussion des données
  • Altair - ceci est une bibliothèque de visualisation Python
  • Plotly Express - cette bibliothèque est utilisée comme API de haut niveau pour créer des figures

Ensemble de données

L'ensemble de données du US Census Bureau qui sera utilisé pour notre tableau de bord comporte trois colonnes importantes (États, année et population), qui serviront de base principale à nos mesures.

L'image ci-dessous montre à quoi ressemble l'ensemble de données :

Importez les bibliothèques requises

import streamlit as st
import pandas as pd
import altair as alt
import plotly.express as px

Configurer la page

L'étape suivante consiste à spécifier les paramètres de l'application en lui attribuant un titre et une icône de page affichée dans le navigateur. Ceci spécifie comment la barre latérale sera affichée lorsqu'elle est agrandie et comment le contenu de la page sera présenté dans une mise en page large qui correspond à la largeur de la page.

Nous pouvons ajuster le thème de couleur du tracé Altair pour qu'il corresponde à la palette de couleurs sombres de l'application.

st.set_page_config(
    page_title="USA Population Trends",
    page_icon="??",
    layout="wide",
    initial_sidebar_state="expanded")

alt.themes.enable("dark")

Importer des données

Chargez l'ensemble de données dans le projet à l'aide de Pandas.

population_data = pd.read_csv('data/us-population-census-2010-2019.csv')

Configuration de la barre latérale

En utilisant st.title(), nous allons construire le titre de l'application. En utilisant st.selectbox(), nous créerons des widgets déroulants qui permettront aux utilisateurs de choisir une certaine année et un certain thème de couleur.

Après cela, les données de cette année seront sous-ensembles en utilisant le chosen_year (parmi les années accessibles de 2010 à 2019), et elles seront affichées dans l'application. À l'aide de la chosen_palette, la heatmap et la carte choroplèthe peuvent être colorées en fonction de la couleur fournie par le widget susmentionné.

with st.sidebar:
    st.title('?? USA Population Trends')
    
    available_years = list(population_data.year.unique())[::-1]
    
    chosen_year = st.selectbox('Choose a year', available_years)
    year_data = population_data[population_data.year == chosen_year]
    sorted_year_data = year_data.sort_values(by="population", ascending=False)

    palette_options = ['blues', 'greens', 'reds', 'purples', 'oranges', 'greys']
    chosen_palette = st.selectbox('Choose a color palette', palette_options)

Types de tracés et de graphiques

Nous utiliserons trois graphiques, à savoir la carte thermique, la carte Choropleth et le graphique Donut. Commençons par définir une fonction personnalisée pour afficher les différents tracés.

Carte thermique

La fonction create_heat_map() sera utilisée pour afficher la carte thermique de la population américaine pour l'année 2010 - 2019.

# Heatmap
def create_heat_map(data, y_axis, x_axis, color_var, color_scheme):
    heat_map = alt.Chart(data).mark_rect().encode(
            y=alt.Y(f'{y_axis}:O', axis=alt.Axis(title="Year", titleFontSize=18, titlePadding=15, titleFontWeight=900, labelAngle=0)),
            x=alt.X(f'{x_axis}:O', axis=alt.Axis(title="", titleFontSize=18, titlePadding=15, titleFontWeight=900)),
            color=alt.Color(f'max({color_var}):Q',
                             legend=None,
                             scale=alt.Scale(scheme=color_scheme)),
            stroke=alt.value('black'),
            strokeWidth=alt.value(0.25),
        ).properties(width=900
        ).configure_axis(
        labelFontSize=12,
        titleFontSize=12
        )
    # height=300
    return heat_map

Voici le résultat :

Choroplèthe, carte

La fonction create_choropleth() affichera une carte colorée des 52 états des USA pour l'année sélectionnée.

# Choropleth map
def create_choropleth(data, location_col, color_col, color_scheme):
    map_plot = px.choropleth(data, locations=location_col, color=color_col, locationmode="USA-states",
                               color_continuous_scale=color_scheme,
                               range_color=(0, max(year_data.population)),
                               scope="usa",
                               labels={'population':'Population'}
                              )
    map_plot.update_layout(
        template='plotly_dark',
        plot_bgcolor='rgba(0, 0, 0, 0)',
        paper_bgcolor='rgba(0, 0, 0, 0)',
        margin=dict(l=0, r=0, t=0, b=0),
        height=350
    )
    return map_plot

Voici le résultat :

Graphique en beignet

Le dernier graphique que nous créerons est un graphique en anneau, qui montrera le pourcentage de migration de chaque État. Avant de réaliser le graphique du donut, il faut déterminer les mouvements de population d'année en année.

# Donut chart
def create_donut(value, label, color):
    color_map = {
        'blue': ['#29b5e8', '#155F7A'],
        'green': ['#27AE60', '#12783D'],
        'red': ['#E74C3C', '#781F16'],
        'purple': ['#8E44AD', '#4A235A']
    }
    chart_colors = color_map.get(color, ['#F39C12', '#875A12'])
    
    data = pd.DataFrame({
        "Category": ['', label],
        "Percentage": [100-value, value]
    })
    background = pd.DataFrame({
        "Category": ['', label],
        "Percentage": [100, 0]
    })
    
    chart = alt.Chart(data).mark_arc(innerRadius=45, cornerRadius=25).encode(
        theta="Percentage",
        color= alt.Color("Category:N",
                        scale=alt.Scale(domain=[label, ''], range=chart_colors),
                        legend=None),
    ).properties(width=130, height=130)
    
    text = chart.mark_text(align='center', color="#29b5e8", font="Lato", fontSize=32, fontWeight=700, fontStyle="italic").encode(text=alt.value(f'{value} %'))
    background_chart = alt.Chart(background).mark_arc(innerRadius=45, cornerRadius=20).encode(
        theta="Percentage",
        color= alt.Color("Category:N",
                        scale=alt.Scale(domain=[label, ''], range=chart_colors),
                        legend=None),
    ).properties(width=130, height=130)
    return background_chart + chart + text

Sortir :

Convertir la population en texte

La prochaine étape consistera à développer une fonction personnalisée pour condenser les valeurs de la population. En particulier, la présentation des valeurs sur la carte de métriques est réduite de 28 995 881 à un chiffre plus gérable de 29,0 M. Cela vaut pour les nombres compris dans la fourchette des milliers.

# Convert population to text 
def format_population(number):
    if number > 1000000:
        if not number % 1000000:
            return f'{number // 1000000} M'
        return f'{round(number / 1000000, 1)} M'
    return f'{number // 1000} K'

# Calculation year-over-year population migrations
def compute_population_change(data, target_year):
    current_year = data[data['year'] == target_year].reset_index()
    previous_year = data[data['year'] == target_year - 1].reset_index()
    current_year['population_change'] = current_year.population.sub(previous_year.population, fill_value=0)
    return pd.concat([current_year.states, current_year.id, current_year.population, current_year.population_change], axis=1).sort_values(by="population_change", ascending=False)

Voici le résultat :

Définir la présentation de l'application

Maintenant que tous les éléments sont prêts, rassemblons-les tous dans l'application en définissant la présentation de l'application. Commencez par créer 3 colonnes :

columns = st.columns((1.5, 4.5, 2), gap='medium')

Les arguments d'entrée (1.5, 4.5, 2) montrent que la deuxième colonne est la plus grande, avec une largeur environ trois fois supérieure à celle de la première colonne.

Première colonne

Cette colonne contient la fiche de métriques affichant les États avec la migration entrante et sortante la plus élevée pour l'année choisie. Cette colonne contient également le graphique en anneau montrant la migration de l'État, à la fois entrante et sortante.

with columns[0]:
    st.markdown('#### Population Changes')

    population_change_data = compute_population_change(population_data, chosen_year)

    if chosen_year > 2010:
        top_state = population_change_data.states.iloc[0]
        top_state_pop = format_population(population_change_data.population.iloc[0])
        top_state_change = format_population(population_change_data.population_change.iloc[0])
        
        bottom_state = population_change_data.states.iloc[-1]
        bottom_state_pop = format_population(population_change_data.population.iloc[-1])   
        bottom_state_change = format_population(population_change_data.population_change.iloc[-1])   
    else:
        top_state = bottom_state = '-'
        top_state_pop = bottom_state_pop = '-'
        top_state_change = bottom_state_change = ''
    
    st.metric(label=top_state, value=top_state_pop, delta=top_state_change)
    st.metric(label=bottom_state, value=bottom_state_pop, delta=bottom_state_change)
    
    st.markdown('#### Migration Trends')

    if chosen_year > 2010:
        growing_states = population_change_data[population_change_data.population_change > 50000]
        shrinking_states = population_change_data[population_change_data.population_change < -50000]
        
        growth_percentage = round((len(growing_states)/population_change_data.states.nunique())*100)
        shrink_percentage = round((len(shrinking_states)/population_change_data.states.nunique())*100)
        growth_chart = create_donut(growth_percentage, 'Population Growth', 'green')
        shrink_chart = create_donut(shrink_percentage, 'Population Decline', 'red')
    else:
        growth_percentage = shrink_percentage = 0
        growth_chart = create_donut(growth_percentage, 'Population Growth', 'green')
        shrink_chart = create_donut(shrink_percentage, 'Population Decline', 'red')

    chart_columns = st.columns((0.2, 1, 0.2))
    with chart_columns[1]:
        st.write('Growth')
        st.altair_chart(growth_chart)
        st.write('Decline')
        st.altair_chart(shrink_chart)

Deuxième colonne

La deuxième colonne, qui est la plus grande, affiche la carte choroplèthe et la carte thermique à l'aide de fonctions personnalisées créées précédemment.

with columns[1]:
    st.markdown('#### Total Population Distribution')
    
    choropleth = create_choropleth(year_data, 'states_code', 'population', chosen_palette)
    st.plotly_chart(choropleth, use_container_width=True)
    
    heat_map = create_heat_map(population_data, 'year', 'states', 'population', chosen_palette)
    st.altair_chart(heat_map, use_container_width=True)

Troisième colonne

La troisième colonne affiche les principaux États, avec la population affichée sous forme de barre de progression colorée. Une section À propos est également ajoutée en dessous.

with columns[2]:
    st.markdown('#### State Rankings')

    st.dataframe(sorted_year_data,
                 column_order=("states", "population"),
                 hide_index=True,
                 width=None,
                 column_config={
                    "states": st.column_config.TextColumn(
                        "State",
                    ),
                    "population": st.column_config.ProgressColumn(
                        "Population",
                        format="%f",
                        min_value=0,
                        max_value=max(sorted_year_data.population),
                     )}
                 )
    
    with st.expander('Information', expanded=True):
        st.write('''
            - Data Source: [U.S. Census Bureau](https://www.census.gov/data/datasets/time-series/demo/popest/2010s-state-total.html)
            - :blue[**Population Changes**]: States with significant population increase/decrease for the selected year
            - :blue[**Migration Trends**]: Percentage of states with annual population change exceeding 50,000
            - Developed with Streamlit
            ''')

Exécution de l'application

Pour exécuter l’application, c’est très simple, accédez à votre terminal et accédez au dossier/répertoire du projet. Exécutez cette commande :

Streamlit run your_app_name.py

L'application s'exécutera et s'ouvrira dans le port 8501 de votre navigateur (http://localhost:8501/).

Déployez votre application

Une fois que vous avez créé avec succès votre application, vous pouvez la déployer en suivant les étapes ci-dessous :

  1. Publiez votre application dans un référentiel GitHub public et assurez-vous qu'elle dispose d'un fichier requis.txt
  2. Connectez-vous à share.streamlit.io et connectez votre GitHub
  3. Cliquez sur Déployer une application, puis collez votre URL GitHub.
  4. Cliquez sur Déployer et votre application sera déployée sur le Streamlit Community Cloud en quelques minutes
  5. Copiez le lien de votre application déployée et partagez-le avec le monde

Conclusion

Nous sommes arrivés à la fin de cet article et, comme vous pouvez le constater, les applications de données interactives atteignent un tout autre niveau, apportant davantage d'interaction et de compréhension aux applications de données. Ils sont intéressants et captivent le public.

Plus vous ajoutez d’interactivité à votre application de science des données, plus vos utilisateurs comprennent la valeur que vous leur transmettez.

Pour une étude plus approfondie, consultez ces ressources utiles :

  • Documentation simplifiée
  • Débloquez la science des données interactives avec Streamlit
  • Streamlit 101 : Les fondamentaux d'une application de données Python

Articles connexes