Concept

Waar ik aan dacht voor mijn project

In het midden van de visualisatie staat een vinylplaat die half afgesneden is, zodat het geheel er minimalistisch uitziet en het lijkt alsof de vinyl uit de cover komt

De vinylplaat staat stil, maar begint met ronddraaien zodra de gebruiker iets afspeelt op Spotify (live sync).

Deze hele visuele metafoor om t zo te zeggen is een vinyl die draait op basis van allerlei data m.b.t. het huidige afspelende liedje en de artiest/het album

De vinyl fungeert als centraal object dat kenmerken/stats/feitjes omzet naar een visuele “custom” vinylplaat. Hierdoor krijg je eigenlijk gewoon een custom vinyl plaat voor elk liedje dat je luistert. (op basis van data van het liedje/artiest/album)

• Grootte van de plaat = Popularity score van het nummer (realtime)

• Rotatiesnelheid = Duration (lengte van de track of waarde van de populariteit)

  → Sneller draaien = populairder, of sneller draaien = korter

• Aantal groeven = Release year → ouder = meer groeven

• Kleur & glow = Visuele identiteit van de albumcover, gextraheerd via node-vibrant

• Genreverdeling (ambitieus..) = De vinyl visueel opdelen in segmenten per genre van de artiest

Door deze koppeling ontstaat een abstract maar herkenbaar beeld van hoe een liedje “voelt” en wat de kenmerken ervan zijn op basis van Spotify-data met een custom vinyl plaat.

---

Waar ik verder aan dacht bij de data

Ik zet informatie over de track die op dat moment speelt om naar een custom vinylplaat.

De visualisatie blijft in sync met Spotify: telkens wanneer het nummer wisselt, wordt de plaat opnieuw gegenereerd.

---

Koppeling Spotify ↔ D3 ↔ Visuele feature

D3 Functie	Visuele feature / actie	Spotify data
d3.scale	Grootte van de vinylplaat	Popularity score (of duration)
d3.transition / d3.rotate / d3.timer	Rotatiesnelheid van de vinylplaat	Duration (of populariteit)
d3.arc	Hoeveelheid groeven in de plaat	Release year (ouder = meer groeven)
(ambitieusz) d3.pie / d3.scaleOrdinal	Vinyl visueel opdelen in genres	Genres van de artiest of track

Daarnaast gebruik ik de dominante kleur van de albumcover (met node-vibrant) om een glow-effect achter de vinyl te genereren.

Die glow groeit of krimpt afhankelijk van de gekozen Spotify-variabele.

Mogelijke datakoppelingen voor de glow

• Aantal volgers van de artiest → vertaald via d3.scaleLinear() zodat grote verschillen (200.000 vs 4.000.000 volgers) visueel bruikbaar blijven, misschien moet ik zelfs kijken wat d3 met logaritmische scales kan
• Popularity score van de artiest → Ook leuk om de popularity score van de artiest te zien in combinatie met (of t.o.v.) de track popularity score
• (of mogelijk) volume van de speler

---

Interactie en storytelling

De visualisatie is niet bedoeld als dashboard, maar als data story.

• Hover over genre-segmenten toont de naam van het genre (idealiter)
• Tooltip kan extra context geven (bijv. releasejaar of popularitytscore)
• Het geheel vormt één dynamisch, uitlegbaar beeld in plaats van losse data punten

Idealiter zorg ik er ook nog voor dat onderaan de visualisatie / player information een soort mini verhaaltje komt over de track met {svelte variabelen} zodat je de data ook in een textuele vorm kan lezen door te scrollen als je het zou willen.

---

Concept design

Mockup van de interface. De afbeelding is alleen een design de echte visualisatie zal dynamisch

---

Bronnen

• https://d3js.org/api
• https://developer.spotify.com/documentation/web-api
• https://github.com/Vibrant-Colors/node-vibrant
• https://chatgpt.com/ (ondersteuning bij conceptverduidelijking)

Optionals

• radial gradient op basis van node-vibrant

Grafiek ideeën

danny heeft gezegd dat hij het beter vind om 1 diepgaande interactieve grafiek te hebben, dan 3 oppervlakkige simpele grafieken. daarom vallen deze eerste 2 ideeen af, de bubble & pie chart.

1. Bubble Chart

   Een bubble chart met daarin hoe vaak de artiest afgespeeld is in de sessie. grotere bubbel = vaker afgespeeld. idealiter maak ik de kleur/fill van de bubbels de artist profile picture

2. Pie chart

   Een pie chart die hierarchisch is ingedeeld op basis van hoe lang elk liedjes t.o.v. de totale sessie duur. omdat de duraties tegen elkaar afwegen hoef ik hiervoor niet een totale sessie duur uit te rekenen, want als je alle piechart elementen (liedjes) optelt, krijg je toch automatisch de totale sessie duur.

   ---

3. genre = kleur, artiest/genre timeline https://observablehq.com/@d3/treemap/2

   waar danny naar suggereerde wat betreft de visualisatie was dat hij het interessant zou vinden om informatie m.b.t. de genre te zien. hoe ik dit kan koppelen aan een treemap is als volgt:

   Ik zou kleuren kunnen koppelen aan genres, en vervolgens een “sliced” treemap (verticaal gestapeld) die alle genres van alle liedjes laat zien tijdens je sessie. Het onderste element van de treemap is het eerste liedje, het bovenste element is het laatste liedje, en alles daartussenin is chronologisch gewoon opgebouwd want de session slaat de volgorde op van liedjes. wat je dan krijgt is een soort kleurrijke barcode van muziekgenres gedurende je avond/sessie. Op basis van de genre kan je dan ook een beetje de “mood” tracken gedurende de avond

   Afhankelijk van hoeveel tijd ik ga hebben kan ik ook nog filters toevoegen aan de grafiek zelf en dat het dan niet meer van eerst→laatste liedje gaat, maar bijv op basis van langste liedje naar kortste liedje, of gekleurd op basis van artiestnaam en dan ook gesorteerd op artiestnaam. Dit leid dan tot → grootste kleur = meest beluisterde artiest.