Music Data Portrait

link to code


I was tasked to design and code a data portrait. The habit I tracked were my music listening habits, especially what genres/song I listened to at certain times of the day.

To read the data, the viewer must hover their mouse over each bar. When hovered, the bar will reveal the a notable song from that time period. If the person clicks on the canvas, time stamps will be revealed.

Design Process

The design and colors are inspired by abstract artist Mark Rothko. The square patterns I thought could naturally aign with a vertical timeline.


By translating the data into a coded pattern, I was able to notice what hours of the day I listened to music. It mostly aligns with the times I am commuting to and from the city. And, since I was also tracking music vaguely by genre, I noticed my sadder music would come out late at night.

By tracking the data, I cannot deny I was a little nervous having my music taste on display. I feel like I was more hesitant to listen to my weirder music, since I wasn't sure whether or not I wanted to share it with others. Worries aside, I think this kind of project could be an awesome data visualizer for a streaming service or app.


The assignment can be found here from the Critical Computation course website.