Invité·e
UI/UX DesignFigmaHTML/CSSJavaScriptWordPressPhotoshopIllustratorAfter EffectsBlenderAstroPremiere ProInDesignTailwind CSSUI/UX DesignFigmaHTML/CSSJavaScriptWordPressPhotoshopIllustratorAfter EffectsBlenderAstroPremiere ProInDesignTailwind CSS
Data VizDéveloppement WebMotion Design
Visualisation de données — Le Pass Culture
À propos du projet
Site web one-page de data visualization explorant l'impact du Pass Culture sur l'accès culturel des jeunes, réalisé dans le cadre d'Open Data University × Latitudes.
Rôle
Développeur Front-end, Dataviz DesignerDurée
2 semainesÉquipe
Équipe de 3 étudiantsOutils
HTML/CSSJavaScriptGSAPLottieIllustrator
Aperçu Global
Site one-page — section d'introduction
Bilan & Apprentissages
- 1Analyse et interprétation de jeux de données open data
- 2Design d'information et data storytelling
- 3Animations scroll-driven avec GSAP ScrollTrigger
- 4Intégration d'animations Lottie dans un site web
- 5Travail collaboratif en équipe de 3 sur un projet de 2 semaines
L'essentiel
Le Pass Culture contribue-t-il à réduire les disparités entre les jeunes des milieux ruraux et urbains en matière d'accès aux activités culturelles ?
01Contexte & Défi
Contexte & Brief
Dans le cadre d'une collaboration avec Open Data University et Latitudes, nous avons été sollicités pour créer un ensemble de supports numériques visant à informer et sensibiliser le public sur le thème de l'offre culturelle en France. Le Pass Culture, dispositif gouvernemental généralisé en 2021 pour les 15-21 ans, constituait notre terrain d'étude.
- Commanditaire : Open Data University × Latitudes — sensibilisation à l'open data.
- Thématique : Offre culturelle — accès des jeunes ruraux vs. urbains.
- Objectif de communication : montrer l'impact réel du Pass Culture à travers des données chiffrées.
- Cible : grand public, décideurs politiques et acteurs culturels.
02La Problématique
Problématique & Enjeux
Comment concevoir des visualisations de données apportant une information pertinente et conforme à un objectif de communication, tout en rendant accessibles des jeux de données complexes ?
- Analyser et croiser plusieurs sources de données ouvertes sur le Pass Culture.
- Extraire des indicateurs statistiques pertinents (taux d'adoption, utilisation par catégorie, disparités géographiques).
- Rendre les données compréhensibles et engageantes pour un public non-spécialiste.
- Concevoir un storytelling data-driven cohérent du début à la fin.
03Notre Démarche
Démarche & Réalisation
Le projet s'est déroulé en deux phases : une semaine d'analyse et de recherche graphique, puis une semaine d'intégration web avec animations interactives.
- Semaine 1 — Collecte et nettoyage de données open data sur le Pass Culture (bénéficiaires, infrastructure culturelle, usages par catégorie).
- Définition du message clé : l'impact du Pass sur les disparités rurales/urbaines.
- Création de deux pistes graphiques et maquettage du site one-page.
- Semaine 2 — Développement du site avec animations scroll-driven (GSAP ScrollTrigger).
- Intégration d'animations Lottie pour les transitions et éléments décoratifs.
- Création d'infographies SVG animées : cartes de France, diagrammes, compteurs.
- Conception de supports de communication complémentaires (affiches, plaquettes).
04La Solution proposée
Le Site & Les Dataviz
Un site one-page immersif guidant l'utilisateur à travers une narration data-driven, avec des visualisations interactives et des animations au scroll.
- Sections thématiques : présentation du Pass, profils utilisateurs, géographie culturelle, cinéma, livres, conclusion.
- Carte interactive de France montrant les disparités d'infrastructures culturelles par région.
- Compteurs animés au scroll (3,6M de bénéficiaires, taux d'adoption par tranche d'âge).
- Dataviz sur l'utilisation du Pass : cinéma (87% choisissent par proximité), livres (60-67% ont découvert de nouveaux genres).
- Animations CSS scroll-driven et GSAP ScrollTrigger pour le dynamisme.
- Design responsive adapté mobile et desktop.
05Mesure des Résultats
Résultats & Apprentissages
Le projet a permis de développer des compétences transversales en analyse de données, design d'information et développement front interactif.
- Site déployé sur GitHub Pages — narration fluide avec transitions au scroll.
- Maîtrise de GSAP ScrollTrigger pour les animations liées au défilement.
- Intégration d'animations Lottie dans un workflow web.
- Compétences en data storytelling : transformer des données brutes en récit visuel.
- Production de supports de communication complémentaires (print + web).
Aperçu Global
Bilan & Apprentissages
- 1Analyse et interprétation de jeux de données open data
- 2Design d'information et data storytelling
- 3Animations scroll-driven avec GSAP ScrollTrigger
- 4Intégration d'animations Lottie dans un site web
- 5Travail collaboratif en équipe de 3 sur un projet de 2 semaines
