Things I built at MusixMatch
I landed an internship at MusixMatch this summer, here are behind the scenes of some projects I worked on
If you've been following me on Twitter or Medium, you'd know how much I love articles about behind the scenes of building digital products. I enjoy reading them, sharing them and writing them too. Recently I completed my internship at MusixMatch. That gave me a chance to share another process, and here I am, doing exactly that. Let us begin.
Numero Uno
This first thing was built in little over a weekend, it was a part of the interview process. I was given access to a sample data with top trending songs and tags for different countries, and was asked to build something using that.
On the left you will see is a collection of all the top trending tags for the country in question. Tags are sorted by an intrinsic value that shows their relative importance, they have a lighter or darker shade depending on the same value. To be honest there isn't much to talk about this particular project, let’s skip over it … but after having a quick look at a video demo.
The Largest Vocabulary in Music
The very first project I worked on was visualizing the data collected for the vocabulary of various artists. We made it live on 22nd of July. You can read it here, chances are, if you’re into music you’ve already read it. It was picked up by many blogs and news channels. CNN, BBC, Quartz, MTV, COS, Billboard … hell we even made it to the front page of The Guardian UK.
I was in charge of all the front-end, design and converting raw data to visualization. I had a lot of fun doing it. I admit, upto this point, I never wrote this amount of JavaScript in my life.
Let us talk through how I went about building and designing some parts of the page. Starting with …
The BIG list
While introducing the analysis at the beginning of the article, it was essential to also show all the top selling artists whose songs are being analysed. There are a total of 93 artists, going the simplest route possible, the 93 artists could be shown as a simple long unordered list. Obviously not a very good choice, think about how difficult it would be to spot an artist, even though ordered alphabetically it still puts a significant mental load.
Using images was the way to go, I also wanted to make it easy to locate an artist, in case you were looking for your favorites.
Sorting the list of artists alphabetically (with images) is one way to solve the problem, and we did exactly that.
The whole list if laid vertically (with images) would span several 100 pixels, if you're not into the list, scrolling and skipping it can be a pain. I tried to fit the whole list horizontally in a rectangle with a comfortable height.
Personally, I am not a big fan of horizontal scrolling. Web Pages are vertical, and meant to be scrolled vertically. Suddenly you see something that scrolls horizontally, and if you're not using Apple’s magical pointing devices or something like those, what do you do? Click and drag. That breaks the flow.
One might argue that you don't need “magical” pointing devices, just use the scroll wheel. Picture this, you are scrolling vertically and eventually your cursor lands on this module. You scroll but the page doesn't, the list does. In case you want to move forward you will need to get the cursor away from this list, that can be annoying. Not a very good experience, is it?
While looking around online for inspiration, I ended up on this page http://www.globalslaveryindex.org/findings/
They had a long list of countries with data, I liked the way they hid most part of the list with a convenient show all button, for anyone interested.
Even though I liked this idea very much, there was something that was missing. Once you click on the “Show all” button and you're halfway through the list, there is no way you can revert back. For example, if I am interested in the ratings for Malaysia, I click on the “Show all” button, find Malaysia, I still had to scroll through the rest of the list to continue reading the article.
This was the “extra thing” that I wanted to add to my implementation.
The button doesn't just vanish once you click it. It stays at its place, and the whole long list can be quickly skipped with just one click.
Though the alphabetically sorted list makes it easier to locate artists, the visible part of the list showed just 20 out of the 93 artists.
We wanted to show a good number of artists in the visible region and maintain the ease of spotting an artist too. I was suggested to sort the list by genre.
The list sorted by genre showed 43 artists in the visible region, that is 23 more than the alphabetically sorted list. It was still simple to find if your favorite country artist is in the list or not. Therefore I decided to stick with this.
I proceeded along with the rest of the site, not paying much attention to the initial list anymore.
Then about halfway through the project, I decided to do a little routine usability test. I showed the site to a friend asking him to go through it, here is what I discovered.
When you're on a smaller screen and the gradient that hides the latter portion of the list is not visible. The purpose of the “Show all” button isn't very clear. Even at this stage, out of curiosity, I found my friend clicking the show all button a few times with no visible feedback.
Therefore, I decided to move the button to the end, where the list starts vanishing.
And that was that. As far as developing this part goes, the images and other relevant data, like genre and names were extracted using MusixMatch API and put in place using Handlebars templates.
The main visualization
Moving to more interesting parts of the page, let us talk about the main visualization.
We were able to extract a rich amount of data from the MusixMatch database, we had data for the total sales, years active, number of songs released, age, name, genre and of course vocabulary length. In case you haven't already went through the article yet, you would know that we analyzed only a maximum of 100 most lyrically densest songs. We ranked all the 93 artists based on their vocabulary size, and wanted to represent that on a chart.
A search field was also put up to make it easier to locate an artist.
After a couple of refinements…
Out of several other iterations, I found the following quite promising too. In my opinion it unapologetically throws raw data right at your face. It’s cleaner and at a glance you can easily tell which section of the chart has most or least number of artists.
Since rank is something that intuitively makes more sense, I tweaked the tooltip a little to emphasise more on the ranks.
We had a long discussion on which version of the visualization to keep. In the end, we ended up sharing videos demonstrating the two options around in the office asking for their opinion. To my surprise, the first option came out to be the one more preferred.
Pondering over it, you realize that to an average person, raw data representation won't make as much sense. Recognizing your favorite artist on the chart by looking at their faces triggers different emotions than seeing them as a white dot. In other words the former option was more “human” . And we decided to stick with it.
Along the way to cure what looks like a jumbled mess, I rounded off vocabulary sizes of the artists to a closest 30, and this was the result
If this had been a personal project of mine, I'd have went with this version and made a huge mistake. As I was explained, real world data isn't always pretty and symmetric. Most of the time it is a jumbled mess. By tampering with the data I would have ended up showing false information, which is not acceptable.
Here is the demo of the prefinal version.
The final color scheme I picked was this greenish golden color. This wasn't a decision I agonized over much. I picked what felt easy to the eyes, maintained a proper contrast and looked nice. When this was sent to Nicola, the lead designer at MusixMatch for feedback, he said he liked the golden color scheme, it was like giving an award. The insights you get!
The chart is rendered dynamically using d3. In this project I took an Object Oriented approach to the problem. Each time d3 renders an artist on the chart, a new Object is created. For example, let's say when Eminem is rendered, a new Artist Object is created and Eminem’s data is binded to that object.
This makes it a lot easier to show data in the tooltip or to play that artist’s most popular song on click.
The polyglots section
I am a little skeptical about this one on how many visitors actually understood this feature, did you? . For the section referencing the Polyglots we also wanted to show the languages that those artists sing in.
Since the name of the languages was not a chief concern, I didn't want it to take up too much visual weight and steal the reader’s focus.
I ended up adding an unobtrusive list of languages to the left, hovering over an artist highlights the languages he/she sings in.
Notice that the cursor doesn't change to a pointer when you hover, never do that if the target is not clickable, that is false feedback. I learned it the hard way.
Realtime activity feed
My job this time was to take MusixMatch’s real time activity data and show it on a world map. Nothing big, nothing much to talk about, but here are a few iterations.
The map is generated using d3. White spots you see are simply svg circles with an alpha value of 0.5. Giving the circles an intermediate alpha value highlights the dense location more than less dense locations.
I also tried replacing the normal svg circles, with the graphic on the left. While adding this graphic to the map, I also gave it a random rotation between -180–180 and it resulted into this…
What happens is, in places with higher density almost every single spot gets an angle between -180–180 and forms a complete circle. If you look closely, you can see major cities of the world highlighted. There is Cairo, Tokyo, Delhi, Mumbai, NYC e.t.c . Sadly this didn't make the cut :-( .
We also had an idea of coloring locations based on the operating systems that made the request. And I did exactly that,
And this brought an end to my term at MusixMatch. I’d like to thank MusixMatch for giving me the opportunity to work with them. It was an amazing experience.
