TP n°6 : Visualisation de données§

Dans ce TP, nous allons enrichir l’application commencée au TP n°4 : Une application Flask plus intéressante avec des représentations graphiques des données présentées.

Mise en place§

  • Dans l’environnement virtuel du TP4, installez matplotlib avec la commande :

    pip install matplotlib

Votre travail§

Histogramme avec Matplotlib§

  • Créez une vue /genes/<id>/parts.png, produisant une image PNG d’un histogramme horizontal. Il doit représenter , pour chaque partie d’organisme concernée par le gène, combien de transcrits de ce gène sont y sont liés.
  • Insérez l’image ci-dessus à la fin de la vue /genes/<id>, dans une balise <img> pointant vers la vue que vous venez de créer.

Représentation graphique des transcripts avec SVG§

  • Créez une vue /genes/<id>/transcripts.svg, produisant une image SVG représentant les transcrits du gène. Plus précisément, chaque transcrit sera représenté par une barre horizontale, dont la position et la longueur reflètent la position du transcrit (start et end) à l’intérieur du gène. Sur la barre de chaque transcrit apparaîtra également son identifiant.

  • Pour cela, on vous conseille d’écrire d’abord une fonction Python, qui calculera les informations nécessaires à l’affichage :

    • hauteur de l’image (en fonction du nombre de transcrits),
    • coordonnées des rectangles représentant chaque transcrit.

    Vous passerez ensuite ces informations à un template Jinja2, qui se chargera de la mise en forme SVG.

  • Insérez ensuite cette image SVG dans la vue /genes/<id>, en intégrant le SVG directement dans le HTML (sans balise <img>). Pour cela, il pourra être nécessaire d’utiliser la syntaxe Jinja2 :

    {{code_svg|safe}}

    L’option safe demande à Jinja2 de ne pas “échapper” les balises présentes dans code_svg.

    Important

    N’utilisez jamais l’option safe avec des données qui proviennent de l’extérieur (e.g. saisies par l’utilisateur).

Interactivité§

À l’aide de CSS, faites en sorte que les identifiants de transcrits, dans le diagramme SVG, ne s’affichent que pour le transcrit survolé par le pointeur de la souris. Vous pourrez pour cela utiliser

  • la pseudo-classe CSS :hover (documentation),
  • l’attribut CSS opacity.

Pour aller plus loin§

  • Si vous avez créé une vue spécifique pour un transcrit, faites en sorte que chaque barre (et son texte) soit un lien vers la fiche du transcrit correspondant.
  • Pour une présentation plus agréable, donnez des couleurs différentes aux barres représentant les transcrits. Une méthode consiste à avoir une liste pré-définie de couleurs, et à les attribuer cycliquement à chaque barre.
  • Affichez des graduation correspondant aux multiples de 10,000.