Groupe 11

lyon1-m2/2024/gallery/11-desc-en.md

@@ -0,0 +1,63 @@
+# Spotify Personal Data Visualization
+
+## Abstract
+
+This project addresses the need for analyzing and visualizing Spotify users’ musical behaviors. Our goal is to provide interactive tools that allow users to explore their 
+personal data, better understand their listening habits and uncover insights into their musical preferences, moods, and consumption patterns.
+
+The data used in this project was sourced from the Spotify listening histories of several users. These datasets were obtained through Spotify’s personal data request feature. 
+To ensure a legitimate and reliable source, we contacted friends and obtained their explicit consent to share their data. The files, containing information such as songs played,
+favorite artists, preferred genres, and listening times were downloaded in JSON format.
+
+After the five days required by Spotify to generate the files, users shared the data with us. We implemented a data processing and preparation pipeline to structure the 
+information from the JSON files (history, playlists, etc.) for efficient and optimal use.
+
+This project highlights an innovative approach to delivering personalized musical insights while maintaining transparency and respecting users’ data privacy.
+
+## Questions
+
+- Which artists dominate my musical universe?
+- Which artists have had the greatest impact on my playlists?
+- How do my listening habits vary from month to month?
+- How do my listening habits differ between the morning, afternoon, and evening?
+- Which music genres represent my preferences?
+- Am I more inclined toward music or storytelling (podcasts) daily?
+- Which of my playlists is the most content-rich?
+
+## Visualizations
+
+1. **Your Listening Ecosystem**
+   A visual map highlighting your most-listened-to artists, showcasing the most intense points and the pillars of your musical year.
+
+3. **Your Musical Icons of the Year!**
+   A visualization where the size of rectangles reflects each artist's impact on your playlists, spotlighting your standout artists with interactive details.
+
+5. **The Minutes That Defined Your Months!**  
+   A colorful timeline chart showing your listening habits minute by minute for each month, revealing peaks and dips in your musical activity.
+
+6. **Your Daily Listening Cycle**  
+   A temporal analysis illustrating your listening habits throughout the day, divided into morning, afternoon, and evening patterns.
+
+7. **The Music Genre That Defines You**  
+   A pie chart displaying the distribution of your favorite music genres and providing a glimpse into your sonic universe.
+
+8. **Your Balance Between Podcasts and Music**  
+   A comparative visualization showing the share of your listening time dedicated to music versus podcasts, revealing your preferences between the two worlds.
+
+9. **Top 20 Most Content-Rich Playlists: A Sea of Music**  
+   An interactive ranking of playlists with the highest song counts, including filters to explore the evolution of their content over time.
+
+## Technologies
+
+* **D3.js**: (or D3 for Data-Driven Documents) is a JavaScript graphics library that enables the display of numerical data in a graphical and dynamic form. It is an important tool for adhering to W3C standards, utilizing common technologies such as SVG, JavaScript, and CSS for data visualization.le données.
+
+* **HTML**: HyperText Markup Language, usually abbreviated as HTML or, in its latest version, HTML5, is the markup language designed for writing web pages.
+
+* **CSS**: (Cascading Style Sheets) allows for the creation of visually appealing web pages.
+
+* **GitHub**: For version control and management.
+
+#### Note: 
+During the development of this project, we primarily relied on the D3 documentation. The first visualization is directly inspired by an example provided in this documentation. We also used ChatGPT to assist us in working with the D3 language, while remaining attentive to potential errors it might produce.
+
+

lyon1-m2/2024/gallery/11-desc-fr.md

@@ -0,0 +1,56 @@
+# Visualisation des données personnelles Spotify
+
+## Résumée
+
+Ce projet vise à répondre aux besoins d’analyse et de visualisation des comportements musicaux des utilisateurs de Spotify. Nous cherchons à fournir des outils interactifs permettant aux utilisateurs d’explorer leurs données personnelles, de mieux comprendre leurs habitudes d’écoute, et de découvrir des insights sur leurs préférences musicales, leurs humeurs, et leur comportement de consommation.
+
+Les données utilisées proviennent des historiques Spotify de plusieurs utilisateurs. Ces données ont été obtenues grâce à la fonctionnalité de demande de données personnelles disponible sur Spotify. Afin de garantir une source légitime et fiable, nous avons contacté des amis et obtenu leur consentement explicite pour partager leurs données. Ces fichiers, contenant des informations telles que les chansons écoutées, les artistes favoris, les genres préférés et les horaires d’écoute, ont été téléchargés au format JSON.
+
+Après un délai de cinq jours requis par Spotify pour générer les fichiers, les utilisateurs nous ont transmis ces derniers. Nous avons mis en place un processus de traitement et préparation des données en structurant les informations issues des fichiers JSON (historique, playlists, etc.) pour permettre une utilisation efficace et optimale.
+
+Ce projet met en avant une approche innovante pour offrir des insights musicaux personnalisés, tout en respectant la transparence et la confidentialité des données des utilisateurs.
+
+## Questions
+
+- Quels artistes dominent mon univers musical ?
+- Quels artistes ont eu le plus d’impact sur mes playlists ?
+- Comment mes habitudes d’écoute varient-elles d’un mois à l’autre ?
+- Comment mes habitudes d’écoute diffèrent-elles entre le matin, l’après-midi et le soir ?
+- Quels genres musicaux représentent mes préférences ?
+- Suis-je plus orienté vers la musique ou les récits (podcasts) dans mon quotidien ?
+- Quelles sont mes playlists les plus riches en contenu ?
+
+
+## Visualisations Principales
+
+1. **L'Écosystème de Vos Écoutes**  
+   Une carte visuelle qui met en évidence vos artistes les plus écoutés, montrant les points les plus intenses et les piliers de votre année musicale.
+
+2. **Vos Icônes Musicales de l’Année !**  
+   Une visualisation où la taille des rectangles reflète l'impact de chaque artiste sur vos playlists. Elle met en lumière vos artistes phares avec des détails interactifs.
+
+3. **Les Minutes Qui Ont Rythmé Vos Mois !**  
+   Un graphique chronologique coloré montrant vos habitudes d'écoute minute par minute pour chaque mois, révélant vos pics et creux d'activité musicale.
+
+4. **Ton Cycle Quotidien d'Écoute**  
+   Une analyse temporelle illustrant vos habitudes d'écoute au cours de la journée, avec une répartition entre le matin, l’après-midi et le soir.
+
+5. **Le Genre Musical Qui Te Définit**  
+   Un diagramme circulaire qui montre la répartition de vos genres musicaux préférés, offrant un aperçu de votre univers sonore.
+
+6. **Ton Équilibre Entre Podcasts et Musique**  
+   Une visualisation comparative qui illustre la part de votre temps d'écoute consacrée à la musique et aux podcasts, montrant vos préférences entre ces deux univers.
+
+7. **Top 20 des Playlists les Plus Remplies : Un Océan de Musique**  
+   Un classement interactif des playlists contenant le plus de chansons, avec des filtres pour explorer l’évolution de leur contenu au fil des mois.
+
+
+   ## Technologies 
+
+* **D3.js** : (ou D3 pour Data-Driven Documents) est une bibliothèque graphique JavaScript qui permet l'affichage de données numériques sous une forme graphique et dynamique. Il s'agit d'un outil important pour la conformation aux normes W3C qui utilise les technologies courantes SVG, JavaScript et CSS pour la visualisation de données.
+* **HTML** : Le HyperText Markup Language, généralement abrégé HTML ou, dans sa dernière version, HTML5, est le langage de balisage conçu pour écrire les pages web.
+* **CSS** : (Cascading Style Sheets) permet de créer des pages web à l'apparence soignée.
+* **GitHub** : pour la gestion des versions
+
+#### Note:
+Lors de la réalisation de ce projet, nous nous sommes principalement appuyés sur la documentation de D3. La première visualisation est directement inspirée d’un exemple issu de cette documentation. Nous avons également utilisé ChatGPT pour nous assister dans l’exploitation du langage D3, tout en restant attentifs aux éventuelles erreurs générées par cet outil.