DYNAMIC MUSIC VISUALIZATION
INFORMATION DESIGN
DURATION Four months
PROJECT BRIEF Display a music library, containing 50 songs, using the Javascript library, D3.
BACKGROUND
This project was part of the Information Design class offered at California State University, Chico. The course focused on developing ways to organize and showcase data in an interactive setting. Emphasis was put on typographic composition, hierarchy, navigation, and visual perception.
Students were asked to work on a semester-long project that focused on displaying a music library. Throughout the four-month period, students developed methods to display, sort, and filter data.
OVERVIEW
Utilizing several programs over five phases, this project focused on creating a dynamic visualization of a music library. Using Spotify, I created a playlist containing 50 of my favorite songs. Information, including duration, release dates, and recording locations, was collected and organized in a set of data. Using this data, I developed methods to display the information in a visually clear and meaningful way.
RESEARCH
The bulk of my research involved collecting data on the 50 songs I chose to use for the project. I used Spotify to select the songs, and then exported the data, including song titles, artist names, and duration, from the playlist. Other pieces of data, such as the recording location, album art, and genre, were not included in the exported data. These pieces were more difficult to find. A lot of the research I did during this phase involved finding this information. I looked for this data, and then also fact-checked it all across several sources to ensure that I was collecting the most accurate data. This research portion of the project ended up being one of the most time-consuming phases.
STRATEGY AND DESIGN
PHASE 1 | Vector Prototyping
The first phase of this project focused primarily on research and prototyping. My research started with exploring existing examples of dynamic visualizations. Using Dribbble and Pinterest, I looked through different methods other designers have used to display data. I saved examples that I found to be compelling and effective ways of presenting data. I also completed all the research required for collecting the data for the songs. After completing the research, then I focused on choosing how to organize the music playlist and developing a vector prototype using Illustrator.
For my playlist, I chose 50 of my favorite songs. All 50 songs fit within six genres. The six genres played a large part in how I organized the music. I planned to arrange the songs by their genres, as well as create a genre filtering element. I also decided that the songs would be able to be sorted by duration and date released.
Once the playlist was created, I began working on the vector prototype. The goal of the prototype was to develop a visual representation of how we wanted our project to look. I focused primarily on creating a cohesive layout that simply, yet effectively, displayed the data. The prototype was not interactive, but it showed the layout and visual design elements.
During this phase, I chose the color theme and the font. For the colors, I decided to go with a light rainbow-like color scheme, using red, orange, yellow, green, blue, and purple. Each color represented one of the six genres.
PHASE 2 | Interface and Visualization
During the second phase, I began to work with the code. The goal was to create the basic elements, such as the buttons and the visual representation of the songs, using code. However, this phase did not require interaction.
During this phase, my original design, based on the vector prototype began to change slightly. I made the choice to change the layout of my songs from vertical to horizontal. Moving into code allowed me to see certain elements in a different light. For instance, I realized that the songs would have more breathing room if I changed the layout to be more horizontal.
PHASE 3 | Dynamic Information Visualization
During the third phase, I began to add interaction to the various elements. I added mouseover and mouseout functions to the buttons and songs to provide user feedback. I also added functions to buttons, which allowed me to remove and add elements when a user clicked the buttons. Album art was also added to the data set, meaning that an image that correlated with each song appeared.
I was also able to add sorting and filtering elements during this phase. The genre filter element displayed a pie chart, with a percentage next to each genre title. From here, a user could also view the songs within each genre. The sorting element allowed users to sort all songs alphabetically, by duration, and by date released.
PHASE 4 | Interactive Map
The fourth phase involved creating a map. I used MapBox to design my own map. I wanted a simple greyscale map, as not to distract from the other colors. I found the coordinates for the recording location of each song and added them to the map. Users could then see all the recording locations for each song on the map, and click on a custom icon to learn more about the song and album.
PHASE 5 | Dynamic Music Visualization
During the fifth, and final, phase, I worked to create a visualization for when the music played. I started by finding the audio files for all 50 songs and adding them to my dataset. From there, I created the visualization. I chose to stick with a circular theme, something that is seen throughout the whole project.
Finally, I put everything together, making sure that everything functioned correctly and gave appropriate user feedback. We put on user testing, and I was able to receive feedback about the function and design from about 20 people.
CHALLENGES
The primary challenge associated with this project was learning all the code. At the time of this project, I did not have extensive experience with coding. I spent a lot of time outside of class learning the code and figuring out how to create what I was envisioning. All the effort to overcome this challenge, though, was completely worth it, because by the end I had a much deeper understanding of how the different functions worked.
EFFECTIVENESS
The final product was very effective. There were no clear glitches during the final user testing session, and I was able to accomplish everything I had planned. I was also asked to return to the class the following two semesters to help current students with coding questions.
