=================================== TP n°6 : Visualisation de données =================================== .. role:: en .. |template| replace:: `template`:en: Dans ce TP, nous allons enrichir l'application commencée au `tp4`:doc: 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 : .. code-block:: bash pip install matplotlib Votre travail ============= Histogramme avec Matplotlib +++++++++++++++++++++++++++ * Créez une vue ``/genes//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/``, dans une balise ```` pointant vers la vue que vous venez de créer. Représentation graphique des transcripts avec SVG +++++++++++++++++++++++++++++++++++++++++++++++++ * Créez une vue ``/genes//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/``, en intégrant le SVG *directement* dans le HTML (sans balise ````). Pour cela, il pourra être nécessaire d'utiliser la syntaxe Jinja2 : .. code-block:: text {{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``. __ https://devdocs.io/css/:hover 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.