Graphiques en 3D

Fonctions :

• updatemenus (sans Dash)

  L'option updatemenus permet de créer des menus interactifs tels que des boutons ou des sélecteurs dans un graphique Plotly pour modifier dynamiquement certains éléments du graphique, comme le type de graphique, les axes ou les couleurs. Ces menus peuvent être utilisés sans nécessiter de Dash ou d'autres frameworks externes.

  Importation :

  import plotly.graph_objects as go

  Attributs :

  Paramètre	Type	Description	Valeur par défaut
  buttons	list	Liste de boutons définissant l'action de mise à jour.	[]
  direction	str	La direction dans laquelle les boutons seront disposés. Peut être 'left', 'right', 'down', ou 'up'.	'down'
  showactive	bool	Indique si le bouton actif doit être mis en surbrillance.	True
  x	float	Position horizontale du menu sur le graphique.	0.5
  y	float	Position verticale du menu sur le graphique.	1.05
  active	int	Index du bouton actif au départ.	0

  Exemple de code :

  📋 Copy

  import plotly.graph_objects as go
  import pandas as pd
  
  # Création d'un DataFrame simple
  df = pd.DataFrame({
      'X': [1, 2, 3, 4, 5],
      'Y': [10, 11, 12, 13, 14]
  })
  
  # Créer un graphique de base
  fig = go.Figure()
  
  # Ajouter une courbe linéaire initiale
  fig.add_trace(go.Scatter(x=df['X'], y=df['Y'], mode='lines', name='Ligne'))
  
  # Ajouter un bouton pour changer le type de graphique
  fig.update_layout(
      updatemenus=[
          {
              'buttons': [
                  {
                      'label': 'Ligne',
                      'method': 'relayout',
                      'args': [{'xaxis.title': 'X', 'yaxis.title': 'Y'}]
                  },
                  {
                      'label': 'Barres',
                      'method': 'relayout',
                      'args': [{'type': 'bar'}]
                  }
              ],
              'direction': 'down',  # Menu déroulant
              'showactive': True,  # Mettre en surbrillance l'élément actif
              'active': 0,  # État initial du bouton actif
              'x': 0.17,  # Positionnement du menu horizontalement
              'xanchor': 'left',  # Alignement du menu
              'y': 1.15,  # Positionnement vertical
              'yanchor': 'top',  # Alignement du menu
          }
      ]
  )
  
  # Afficher le graphique
  fig.show()

  Explication du code :

  1. Création d'un graphique de base :

     • Un graphique est créé avec une courbe linéaire (mode 'lines'), où les données X et Y sont extraites d'un DataFrame simple.

  2. Utilisation de updatemenus :

     • La clé updatemenus est utilisée pour ajouter un menu interactif avec des boutons pour changer le type de graphique entre une courbe linéaire et un graphique en barres.

     • Les boutons définissent l'action à effectuer :

       • Le bouton "Ligne" réinitialise l'affichage des axes.

       • Le bouton "Barres" modifie le type de graphique en barres.

  3. Positionnement et affichage du menu :

     • Le menu est affiché sous forme de liste déroulante (direction: 'down') et est positionné sur le graphique grâce aux paramètres x et y.

  Remarques :

  • updatemenus est particulièrement utile pour ajouter des contrôles interactifs directement dans le graphique Plotly, ce qui améliore l'interactivité sans avoir besoin de frameworks externes comme Dash.

  • Les boutons peuvent être configurés pour effectuer une variété d'actions, allant de la modification des données affichées à des ajustements visuels comme les axes, les couleurs, et même la disposition du graphique.

• Filtrage dynamique avec Dash (curseur ou dropdown)

  Le filtrage dynamique dans Dash permet aux utilisateurs de filtrer et d'explorer les données en temps réel en fonction de leurs besoins, sans avoir à recharger la page. Cela se fait généralement en combinant des composants interactifs, tels que des curseurs, des listes déroulantes, des cases à cocher, et des graphiques. Le résultat du filtrage est souvent affiché dans des graphiques ou des tableaux mis à jour en temps réel.

• dcc.Slider(curseur numérique)

  dcc.Slider est un composant Dash qui permet de créer un curseur numérique, permettant à l'utilisateur de sélectionner une seule valeur dans une plage définie. Il est idéal pour des cas où l'utilisateur doit choisir une valeur numérique, comme dans des graphiques, des paramètres ou des contrôles de seuil.

  Importation :

  import dash_core_components as dcc

  Attributs :

  Paramètre	Type	Description	Valeur par défaut
  min	int ou float	La valeur minimale possible du curseur.	0
  max	int ou float	La valeur maximale possible du curseur.	100
  step	int ou float	La valeur par laquelle le curseur est ajusté (ex : 1, 0.1, etc.).	1
  marks	dict	Dictionnaire où chaque clé est une valeur et la valeur correspondante est l'étiquette à afficher pour cette valeur sur le curseur.	{}
  value	int ou float	La valeur initiale du curseur.	0
  id	str	Identifiant unique pour le composant, nécessaire pour l'interaction avec les callbacks.	None
  disabled	bool	Permet de désactiver l'interaction avec le composant (le curseur devient non interactif).	False

  Exemple de code :

  📋 Copy

  import dash
  import dash_core_components as dcc
  import dash_html_components as html
  from dash.dependencies import Input, Output
  
  # Initialisation de l'application Dash
  app = dash.Dash(__name__)
  
  # Mise en place du layout avec un dcc.Slider pour une valeur numérique
  app.layout = html.Div([
      dcc.Slider(
          id='slider',
          min=0,
          max=100,
          step=1,
          marks={i: str(i) for i in range(0, 101, 10)},  # Marque les multiples de 10
          value=50  # Valeur initiale du curseur
      ),
      html.Div(id='output-slider')
  ])
  
  # Callback pour mettre à jour l'affichage en fonction de la valeur sélectionnée
  @app.callback(
      Output('output-slider', 'children'),
      [Input('slider', 'value')]
  )
  def update_output(value):
      return f'Valeur sélectionnée : {value}'
  
  # Lancer l'application
  if __name__ == '__main__':
      app.run_server(debug=True)

  Explication du code :

  1. Création du composant Slider : Le dcc.Slider crée un curseur numérique avec une plage de valeurs allant de 0 à 100, avec des étapes de 1. Des marques sont affichées tous les 10 unités sur le curseur. La valeur initiale du curseur est définie à 50.

  2. Callback Dash : Un callback est utilisé pour afficher la valeur sélectionnée par l'utilisateur dans un html.Div. La valeur du curseur est récupérée via Input('slider', 'value').

  3. Affichage dynamique : La valeur du curseur est mise à jour en temps réel dans l'interface, et l'utilisateur voit la valeur sélectionnée dans le Div.

  Remarque importante :

  • Plage et étape : Vous pouvez ajuster les valeurs de min, max et step en fonction de vos besoins. Par exemple, si vous utilisez un slider pour choisir un pourcentage, vous pouvez définir min=0, max=100 et step=1.

  • Marques personnalisées : L'attribut marks est utilisé pour personnaliser l'apparence des valeurs sur le curseur. Vous pouvez l'utiliser pour afficher des valeurs significatives, comme des intervalles de temps, des pourcentages, ou des catégories spécifiques.

  • Interaction avec les callbacks : dcc.Slider fonctionne très bien avec les callbacks pour interagir avec d'autres éléments de l'application, comme des graphiques ou des filtres.

• dcc.RangeSlider (intervalle de dates ou valeurs)

  dcc.RangeSlider est un composant Dash qui permet de créer un curseur (slider) pour sélectionner un intervalle de valeurs numériques ou de dates. Il est idéal pour les cas où l'utilisateur doit spécifier une plage, comme une période temporelle ou une plage de valeurs dans un graphique ou un tableau.

  Importation :

  import dash_core_components as dcc

  Attributs :

  Paramètre	Type	Description	Valeur par défaut
  min	int ou float	La valeur minimale possible du curseur.	0
  max	int ou float	La valeur maximale possible du curseur.	100
  step	int ou float	La valeur par laquelle l'intervalle est divisé (ex : 1, 0.5, etc.).	1
  marks	dict	Dictionnaire où chaque clé est une valeur et la valeur correspondante est l'étiquette à afficher pour cette valeur sur le curseur.	{}
  value	list	Liste de deux valeurs représentant l'intervalle sélectionné (min et max).	[min, max]
  id	str	Identifiant unique pour le composant, nécessaire pour l'interaction avec les callbacks.	None
  disabled	bool	Permet de désactiver l'interaction avec le composant (le curseur devient non interactif).	False
  marks_position	str	Détermine la position des marques : soit "bottom", "top", "both".	'bottom'

  Exemple de code :

  📋 Copy

  import dash
  import dash_core_components as dcc
  import dash_html_components as html
  from dash.dependencies import Input, Output
  
  # Initialisation de l'application Dash
  app = dash.Dash(__name__)
  
  # Mise en place du layout avec un dcc.RangeSlider pour une plage de valeurs
  app.layout = html.Div([
      dcc.RangeSlider(
          id='range-slider',
          min=0,
          max=100,
          step=1,
          marks={i: str(i) for i in range(0, 101, 10)},  # Marque les multiples de 10
          value=[20, 80],  # Plage de valeurs par défaut
      ),
      html.Div(id='output-range')
  ])
  
  # Callback pour mettre à jour l'affichage en fonction de l'intervalle sélectionné
  @app.callback(
      Output('output-range', 'children'),
      [Input('range-slider', 'value')]
  )
  def update_output(value):
      return f'Plage sélectionnée : {value[0]} à {value[1]}'
  
  # Lancer l'application
  if __name__ == '__main__':
      app.run_server(debug=True)

  Explication du code :

  1. Création du composant RangeSlider : Le dcc.RangeSlider crée un curseur avec une plage de valeurs allant de 0 à 100, avec des étapes de 1. Des marques sont affichées tous les 10 unités sur le curseur. La plage initiale est définie à [20, 80].

  2. Callback Dash : Un callback est utilisé pour afficher la plage sélectionnée par l'utilisateur dans un html.Div. L'intervalle sélectionné est récupéré via Input('range-slider', 'value').

  3. Affichage dynamique : La valeur du curseur est mise à jour en temps réel dans l'interface et l'utilisateur voit l'intervalle sélectionné dans le Div.

  Remarque importante :

  • Intervalle de dates : Si vous souhaitez utiliser le RangeSlider pour des intervalles de dates, vous pouvez convertir les dates en entiers (par exemple, le nombre de jours depuis une date de référence) et utiliser ces valeurs comme minimum, maximum et étapes pour le curseur.

  • Interaction avec les callbacks : Le RangeSlider est conçu pour être utilisé avec des callbacks, permettant d'interagir dynamiquement avec d'autres éléments du tableau de bord, comme des graphiques ou des filtres.

  • Affichage des marques : L'attribut marks est utilisé pour personnaliser l'apparence des valeurs sur le curseur. Vous pouvez personnaliser les marques pour améliorer l'expérience utilisateur, par exemple, en affichant des dates ou des étiquettes compréhensibles.

• dcc.Checklist (cases à cocher)

  dcc.Checklist est un composant Dash qui permet de créer une liste de cases à cocher (checkboxes). Ce composant peut être utilisé pour permettre aux utilisateurs de sélectionner une ou plusieurs options parmi une liste d'éléments. Il est souvent utilisé pour des filtres ou des options de configuration.

  Importation :

  import dash_core_components as dcc

  Attributs :

  Paramètre	Type	Description	Valeur par défaut
  options	list	Liste de dictionnaires contenant les options à afficher sous forme de cases à cocher. Chaque option doit avoir une clé label pour l'étiquette et une clé value pour la valeur associée.	[]
  value	list	Liste des valeurs des options actuellement sélectionnées.	[]
  id	str	Identifiant unique pour le composant, nécessaire pour l'interaction avec les callbacks.	None
  inline	bool	Détermine si les cases à cocher seront affichées horizontalement (en ligne) ou verticalement.	False
  disabled	bool	Permet de désactiver l'interaction avec le composant (les cases à cocher ne peuvent pas être modifiées).	False

  Exemple de code :

  📋 Copy

  import dash
  import dash_core_components as dcc
  import dash_html_components as html
  from dash.dependencies import Input, Output
  
  # Initialisation de l'application Dash
  app = dash.Dash(__name__)
  
  # Mise en place du layout avec un dcc.Checklist
  app.layout = html.Div([
      dcc.Checklist(
          id='checklist-example',
          options=[
              {'label': 'Option 1', 'value': '1'},
              {'label': 'Option 2', 'value': '2'},
              {'label': 'Option 3', 'value': '3'}
          ],
          value=['1'],  # Valeur par défaut (Option 1 sélectionnée)
          inline=True    # Affichage en ligne
      ),
      html.Div(id='output-container')
  ])
  
  # Callback pour mettre à jour l'affichage en fonction des cases cochées
  @app.callback(
      Output('output-container', 'children'),
      [Input('checklist-example', 'value')]
  )
  def update_output(selected_values):
      return f'Vous avez sélectionné : {", ".join(selected_values)}'
  
  # Lancer l'application
  if __name__ == '__main__':
      app.run_server(debug=True)

  Explication du code :

  1. Création du composant Checklist : Le dcc.Checklist crée une liste de cases à cocher avec trois options : 'Option 1', 'Option 2' et 'Option 3'. Par défaut, la case 'Option 1' est sélectionnée.

  2. Callback Dash : Un callback est défini pour mettre à jour un html.Div en fonction des cases sélectionnées. La fonction update_output prend les valeurs des cases cochées et les affiche sous forme de texte dans le Div.

  3. Affichage en ligne : Grâce à l'attribut inline=True, les cases à cocher sont affichées côte à côte (horizontalement).

  Remarque importante :

  • Interaction avec les callbacks : dcc.Checklist est particulièrement utile pour interagir avec d'autres éléments de l'interface utilisateur. Le tableau de bord se met à jour dynamiquement selon les sélections faites par l'utilisateur.

  • Accessibilité : dcc.Checklist permet aussi d'implémenter une interface facile d'utilisation où l'utilisateur peut facilement sélectionner plusieurs options.

  • Usage des options : Les options sont définies sous forme de dictionnaires, chaque élément ayant une étiquette (label) et une valeur (value). La valeur peut être utilisée dans un callback pour manipuler les résultats ou actions en fonction des sélections de l'utilisateur.