01
Graphiques
Création d’un composant Astro pour afficher des graphiques Observable Plot côté serveur, à partir du jeu de données des manchots.
✱ Portfolio 2026
Projet étudiant ✱ 2026
Des graphiques et des cartes interactifs, construits avec Astro.
Accéder au site (nouvel onglet)Contexte
BUT MMI, 2e année
Format
Site de graphiques interactifs
Mon rôle
Développement web, data visualisation
Technologies
Astro, Tailwind CSS, Observable Plot, Leaflet
Dans le cadre d’un cours de développement web, cette série de travaux pratiques consistait à apprendre à afficher des données sous forme de graphiques et de cartes dans un site Astro, avec la librairie Observable Plot.
À partir du jeu de données des manchots, j’ai testé plusieurs façons de présenter et de parcourir les graphiques : une page par espèce, une page unique avec un slider et un menu qui suit le défilement, des onglets accessibles, puis des filtres par espèce, île et sexe qui redessinent le graphique en direct. J’ai aussi généré les pages automatiquement à partir des données, et réalisé des cartes avec Leaflet et GeoJSON.
Ce projet m’a appris à choisir entre le rendu côté serveur et côté client, à rendre des graphiques accessibles (titres, légendes, aria-label) et à vérifier l’accessibilité avec Lighthouse.
01
Création d’un composant Astro pour afficher des graphiques Observable Plot côté serveur, à partir du jeu de données des manchots.
02
Une page par espèce, un slider avec un menu qui suit le défilement, des onglets accessibles et des pages générées automatiquement.
03
Filtres par espèce, île et sexe qui redessinent le graphique en direct, puis cartes interactives avec Leaflet et GeoJSON.