Invité·e

UI/UX DesignFigmaHTML/CSSJavaScriptWordPressPhotoshopIllustratorAfter EffectsBlenderAstroPremiere ProInDesignTailwind CSSUI/UX DesignFigmaHTML/CSSJavaScriptWordPressPhotoshopIllustratorAfter EffectsBlenderAstroPremiere ProInDesignTailwind CSS

20 décembre 2024

Visualisation de données — Le Pass Culture

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 ?

Data VizDéveloppement WebMotion DesignHTML/CSSJavaScriptGSAPLottieIllustrator

Voir le site

Visualisation de données — Le Pass Culture

Rôle

Développeur Front-end, Dataviz Designer

Durée

2 semaines

Équipe

Équipe de 3 étudiants

01Contexte

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.

02Problé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.

03Dé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).

04Solution

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.

05Ré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).

Galerie

Site one-page — section d'introduction

Ce que j'ai appris

Analyse et interprétation de jeux de données open data

Design d'information et data storytelling

Animations scroll-driven avec GSAP ScrollTrigger

Intégration d'animations Lottie dans un site web

Travail collaboratif en équipe de 3 sur un projet de 2 semaines

Stack

Front-end

HTML5CSS3JavaScript

Animation

GSAPScrollTriggerLottie

Design

Adobe IllustratorFigma

Data

Open DataSVG

Kit d'illustration pour l'Office de Tourisme de Limoges

Leafbay