The Sound of Forced Movement

Uitgangspunt

Dit is een verbetering op ‘Migration Music‘. Een interactieve visualisatie die een stem geeft aan de enorme hoeveelheid mensen die eind 2015 Europa in vluchtten. Samen ontwikkeld met Maarten van Veldhoven.

Verbeterd design van Migration Music

De volgende onderdelen wilde we verbeteren/veranderen:

  • Nieuw ontwerp
  • Generatieve visualisatie
  • Betere muziek
  • Overzichtelijkere weergave van de data
  • Betere aanduiding van keypoints van belangrijke gebeurtenissen in Syrie
  • Betere filteropties voor betere interactie

Proces

Design

Maarten was hoofdzakelijk verantwoordelijk voor het design. Hij heeft verschillende combinaties geprobeerd met kleuren en lettertypes.

In de voorgaande visualisatie bestond een leeftijdsgroep uit een interval van 10 jaar. In verband met de begrijpelijkheid hebben we besloten om dit te versimpelen naar vier leeftijdsgroepen:

  • Kinderen (0-18)
  • Mannen (18-65)
  • Vrouwen (18-65)
  • Ouderen (65+)

Daarnaast zijn we voor het nieuwe design afgestapt van het ‘notenbalk-idee’. We vonden dat je op deze manier minder met mensen te maken had en zo de data minder goed kon voelen. Uiteindelijk zijn we op dit design gekomen:

[1.0] Vernieuwde design

Code

Tijdens deze minor wilde ik graag beter worden met D3.js. Daarom is deze hele visualisatie gemaakt in D3.js of met een SVG (legenda).

Om te beginnen ben ik begonnen om de data te visualiseren in een simpele lijn grafiek. Daarnaast bied D3 mooie hulpmiddelen om deze grafiek zoombaar te maken. Het geselecteerde gebied kan dan versleept worden zoals te zien is op onderstaande afbeelding.

Grafiek waarmee kan worden ingezoomd op de data. Een minimap met een gebied wordt eronder weergegeven. Het grijze gebied is te verslepen.

Daarna zijn de volgende dingen gebeurd:

  1. Y-as naar rechts verplaatst
  2. Inzoomen vastgezet op 45x
  3. Dynamische y-as
  4. Animatieloop die het zoomgebied elk frame met 0.3 pixels opschuift
  5. Titel en introductietekst toegevoegd
  6. Lijnen juiste kleur gegeven

Broncode beschikbaar op GitHub.

Muziek

Daarna was het tijd om de muziek toe te voegen. Hiervoor heb ik MIDI.js gebruikt. Dit is een Javascript library die MIDI instrumenten kan laten spelen aan de hand van code. De noot wordt bepaald door de hoogte op de y-as. Dit heeft ook invloed op het volume van de noot. Elke leeftijdsgroep heeft zijn eigen instrument gekregen.

Leeftijdsgroep Instrument
Kinderen Viool
Mannen Akoestische bas
Vrouwen Koor
Ouderen Cello

Door een selectie te maken in de noten die gespeeld kunnen worden klinkt het geheel meer melodisch. Daarnaast wordt deze selectie om de vier maanden omgezet naar een andere toonladder.
De beschikbare toonladders:

  • E majeur
  • B majeur
  • C harmonisch mineur
  • A majeur

Interactie

Legenda

Als interactie is de legenda toegevoegd. De verschillende leeftijdsgroepen zijn aan en uit te zetten. Dit heeft ook invloed op de muziek. Daarnaast kan de visualisatie worden gepauseerd en herstart.

Eindresultaat

Live

Zelf ervaren? Klik hier.

Demo

Expositie

We zijn erg tevreden met de expositie van ons project. Op het grote doek kwamen de kleuren goed naar voren door het hoge contrast. We hadden een goede koptelefoon die over de oren heen ging voor de beste ervaring. Daarnaast lag er nog een draadloze muis als interactiemiddel.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *