Le projet
Aujourd’hui, la collecte de données est présente dans presque tous les domaines. Les montres connectées, les capteurs météorologiques, la reconnaissance faciale, les réseaux sociaux, les applications de streaming… Alors pourquoi pas s’amuser avec ces collectes ?
DataPlay, c’est un projet qui a pour but de permettre à l’utilisateur de visualiser des données. L’objectif est donc de créer par groupe une expérience interactive basée sur un jeu de données.
L'idée
02 mars 2026
Dès le départ on s’est vite mis d’accord sur notre sujet. On voulait comparer des licences de jeux vidéo avec leurs adaptations en films et inversement. On s’était donc mis d’accord sur des données à chercher: le coût de production, qui a eu le plus de succès entre les films et les jeux, la date de sortie, le coût de l’hobby par heure (prix du jeu, prix de l’entrée du cinéma), le nombre de gens qui ont travaillé… Mais quand on s’est mis à chercher les données, on s’est rendu compte que certaines étaient difficiles à trouver car elles sont privées.
09 mars 2026
Il était prévu qu’on présente notre idée aux profs le lundi matin afin qu’ils la valident. Mais cette présentation s’est plutôt transformée en discussion pour nous aider à trouver un sujet avec des données plus accessibles. On a donc changé pour parler uniquement de films.
Mais quelles données récolter et pour en faire quoi ?
Après une longue réflexion en groupe et avec l’aide d’un prof, on a décidé de faire une visualisation qui établit un lien entre le genre de film dominant et l'acteur·rice dominant·e en fonction des années en reprenant le top 10 des films (en fonction du nombre de votes) de chaque année entre 2000 et 2025.
Le design
10 mars 2026
Ensuite on s’est penché sur le nom du projet. Parce que oui, DataPlay, c’est juste le nom du travail. On a chacun fait quelques propositions comme “Play watch” ou “Play your film”, mais celui qui a retenu notre attention est “Rematch/Rewatch”. On a directement eu des idées de mises en page sympas pour noter notre titre.
11 mars 2026
Puis on est passé au prototype. On avait tous des idées très différentes, donc pour mieux se comprendre on a chacun réalisé un prototype en 15 minutes qu’on a ensuite présenté au reste du groupe. On a sélectionné celui qui nous paraissait le plus complet. Puis finalement, après l’avoir montré aux professeurs, on a choisi notre second choix car il était plus facile à coder et plus facile à adapter en responsive.
Premier prototype
Deuxième prototype
Yasmine a ensuite mis en page, en testant avec des typographies, des hiérarchies visuelles, des mises en page… en se basant sur plusieurs inspirations. Puis j’ai testé avec plusieurs couleurs vives pour ajouter des petites touches colorées à certains endroits. On a préféré rester principalement dans du sombre car souvent les sites de streaming ou de cinéma ont une ambiance sombre avec une couleur qui ressort à certains endroits.
Le code
12 mars 2026
Après tous ces choix, il nous restait à choisir qui allait coder quoi. À cette étape, on a rencontré pas mal de difficultés.
Au départ on s’était divisé le design en quatre parties. Chacun devait faire de l'HTML, du SCSS et du JS. Mais on a vite été bloqué sans savoir par où commencer ni comment éviter les conflits une fois le code rassemblé. Alors on a changé la répartition: Anhelina s’occupe de mettre en forme le design (HTML et SCSS), je m’occupe de le rendre responsive et Yasmine et Dylan s’occupent des animations et des interactions en JS.
Pour lier toutes ces lignes de code, on a utilisé GitHub. Jusqu’ici on l’avait encore très peu utilisé en cas concret. C’était d’ailleurs la première fois qu’on réalisait un projet en groupe sur GitHub. On a eu du mal à bien comprendre son fonctionnement et à prendre nos repères, mais ce fut une expérience ! Ceci dit, je ne suis toujours pas à l’aise, il va me falloir encore un peu d'entrainement pour que ça devienne une partie de plaisir.
En conclusion, notre difficulté principale était de travailler en groupe sur le même code. Le temps de nous adapter à cette méthode de travail nous a ralenti un petit peu. On aurait sûrement dû demander à nos profs si notre plan d’action était le plus efficace.
Le stand
23 mars 2026
Pour présenter ce travail, nous devons créer un stand sur le thème de notre projet. Pendant que Yasmine et Dylan terminent de coder le JS, Anhelina et moi cherchons des idées pour notre décoration. Par chance, Anhelina connait quelqu’un qui travaille au cinéma, on a donc pu récupérer des affiches de films. On décide aussi de profiter du local d’impression de l’école, Anhelina crée une affiche représentant notre site et moi je crée des faux tickets de cinéma. J’ai aussi été acheter un paquet de popcorn et j’ai noté sur une feuille noire “director” à coller au dossier d’une chaise pour imiter les chaises sur les tournages.