HISTORIQUE D'ÉCOUTE LAST.FM

ID: MD-0002-1.0.0

Visualisation interactive

L'activation des filtres impacte la visualisation en temps réel.

Les appels au backend elasticsearch fournissent des analyses en temps réel très rapidement et les visuels sont mis à jour instantanément.

DONNÉES

Le jeu de données provient de l'API de last.fm. Il s'agit de mon historique d'écoute sur 8 ans. Chaque événement correspond à un morceau que j'ai écouté à un jour et une heure précis, pour un artiste, un album et un titre donnés.

ENCODAGE DE LA VISUALISATION

L'histogramme du haut représente la répartition du nombre de morceaux écoutés au fil du temps.

Au milieu se trouvent 6 calendriers par an. Chaque cellule carrée est colorée en fonction du nombre d'écoutes ce jour-là. Plus j'écoute de musique, plus la cellule est foncée.

En bas, vous trouverez les facettes. Il s'agit des morceaux / albums / artistes que j'écoute le plus, par fréquence.

INTERACTION AVEC LA VISUALISATION

Les facettes sont interactives. Lorsqu'on clique dessus, elles filtrent l'ensemble du jeu de données de la visualisation. L'histogramme et les calendriers sont mis à jour en temps réel.

TECHNOLOGIES

html, css, javascript, d3js, elasticsearch.

HISTOIRE

Visualisation sous forme de calendrier, par année, de mon historique d'écoute. Un histogramme global montre l'évolution dans le temps pour toutes les années. La densité des cellules du calendrier est liée au nombre d'écoutes ce jour-là.

Cette visualisation est interactive, vous pouvez filtrer par morceau/artiste. Le calendrier et l'histogramme seront mis à jour en temps réel.

J'aime beaucoup la vue calendrier. On ne la voit pas souvent, mais elle est vraiment connectée à notre vision intérieure de notre emploi du temps.

Historique d'écoute Last.fm : une frise en bâtons et des calendriers en heatmap, année par année, des morceaux écoutés de 2006 à 2013

MES PROJETS

Last.fm listening history: a bar chart timeline and year-by-year calendar heatmaps of tracks played from 2006 to 2013
LASTFM LISTENING HISTORY
Bordeaux weather: a dot-matrix heatmap where the size of each dot encodes the measured value
BORDEAUX METEO
Beehive weight over time: a 3D bar chart with one column per day and one bar per hour
BEEHIVE WEIGHT
Light sensor readings at home: a dot matrix where the size of each dot encodes the measured brightness
LIGHT SENSOR
Realtime beehive monitoring: line charts of temperature and weight for the OpenBeeLab project
REALTIME BEEHIVE
CAPC museum open data: acquisitions per year since 1950, with rankings by artwork type and by artist
CAPC OPEN DATA