Cadre: ÉcoleVisualisation de données2023
MusicGate
Une visualisation interactive, sur une seule page, des habitudes musicales d'une promo, aux couleurs de Spotify.
Image 1 sur 2
- Année
- 2023
- Type
- Visualisation de données
- Stack
- TypeScript
- HTML
- CSS
- JSON
- Classes
- Développeuse
Le projet
MusicGate transforme les habitudes musicales de la promo BDDI, designers et développeurs confondus, en une seule page de graphiques interactifs à faire défiler.
On compare le temps d'écoute et les genres préférés, et on filtre les données par groupe pour voir ce qui distingue designers et développeurs. Chaque section a son propre thème de couleur, inspiré du langage visuel de Spotify.
Les données viennent d'un Google Form rempli par la promo, exporté vers Excel puis converti en JSON par un script. TypeScript les intègre ensuite au DOM, et les graphiques eux-mêmes sont dessinés en CSS.
Points clés
- Graphiques interactifs filtrables par groupe et par indicateur
- Chaîne de données, des réponses au formulaire jusqu'au JSON
- Graphiques dessinés en CSS à partir de données typées
- Sections thématisées comme un petit système visuel