Aller au contenu

✱ Portfolio 2026

Visuel du projet Dataviz

Projet étudiant ✱ 2026

Dataviz.

Des graphiques et des cartes interactifs, construits avec Astro.

Accéder au site (nouvel onglet)
Retour aux projets

Fiche projet

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

L'intention.

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.

Le processus.

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.

02

Navigation

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

Interactivité & Cartes

Filtres par espèce, île et sexe qui redessinent le graphique en direct, puis cartes interactives avec Leaflet et GeoJSON.

Le rendu.

Version desktop

Version desktop du projet Dataviz

Identité visuelle

Identité visuelle du projet Dataviz
Identité visuelle du projet Dataviz, détailIdentité visuelle du projet Dataviz, détail