Third presentation – progress update

During this presentation we first updated the class about our more concrete plans for the visualization as already described in a previous post. Subsequently, we presented the progress made with the implementation in d3js.

Below you can see the progress made on the part of small multiples showing trendlines. Here we have already implemented the listener trends (for every song, the trend in the weekly number of listeners). Each block of one color represents one song and its listeners. When a song is no longer in the top 50s, there is a white space. When hovering over a block, the title and artist of the song are displayed. The number of listeners are normalized in this view.

Small multiples

The following two pictures show two possible map implementation. The first one show a equirectangular representation of the world, the second one is a mercator projection. Countries can already be colored, the implementation to make this dependent on our data still needs to be coded as well as the timeline function. During our presentation we asked which map projection would be the best. Their was a consensus on the first one, equirectangular, being the best.

World map v1 - equirectangular

World map v1 – equirectangular

World map v2 - mercator

World map v2 – mercator

We have choosen to use a single hue color scale in green, with the darkest color signifying the best ranked songs. We have used ColorBrewer to determine our colors.

Thirdly, we have also started on the dropdown visualization, making it possible to compare country rankings. Below you can see the current progress.


One mayor problem we are facing at the moment is that the data of LastFM is currently not being updated anymore. We have contacted LastFM and will look into other sources/alternatives.


  • it would be good to include some explanation with the small multiples as this is not clear at the first glance. ==> This is indeed included in our worked out plan, but we didn’t have the time yet to implement this
  • maybe a line chart or line chart with colored area underneath would give a clearer view for the small multiples ==> We will look into these possibilities as well
  • an overlay will be provided to change views but it would also be good to include navigation by clicking on songs, countries … ==> this is intended in our plan
  • check on the website of LastFM whether the problem with your data lies with them or with our program downloading the data. Possibly contact them to ask for an update ==> A message was posted by them 10 days ago that their system is down and they are looking into fixing this. We have contacted their team explaining that we are dependent on their information for this project and asked for an update. We will also already start looking into other options.
  • As a comment on the feeling meter per song, we were pointed on the fact to focus on the main story, visualization. ==> we believe the feeling of a song could explain why certain songs are popular in certain countries or how fast a song goes viral. The implementation of this feature however will be of second priority.
  • Concerning the possible projections of the world map, take a look at what the major services such as Google Maps use as a projection. ==> a poll in class showed that there was a consensus about the first projection being the best, Google Maps however uses the second projection.

Some very interesting suggestions and feedback were given, we will certainly take those into account during the further implementation.


InfoVis of the Week – 6


Liveplasma is a music and movie visualization app that aims to help you discover other musicians or movies you might enjoy. Type in the name of a band, artist, movie, director or actor and liveplasma will show you related people, bands or movies. [1]

Liveplasma - Adele

Liveplasma – Adele [2]

This specific screenshot from the Liveplasma website shows the visualization for Adele. This shows all artists that are related to Adele and how they relate to each other. When selecting another artist, the visualization will recalculate to visualize all related artist to the selected one. In this way, it is very easy to discover new, related music. Another nice feature is that the music which is being discover, will be played back on the website while doing so which makes it easier to bring your personal preferences of music into the discovery process.

This feature of playing back music within the visualization (or including a direct link to the music) is something that we should look into for our own visualization as well as this will make the exploration process for the user a lot easier.




This week, I came across a visualisation of Wikipedia edits.

infovis 6 birgit

The interactive visualisation shows every edit made in Wikipedia, real-time. Green circles are edits by unregistered users, purple ones are made by registered contributors. The interesting thing in this visualisation is that another dimension is added to it: sound. Every time an edit is made and a circle appears, you hear either a bell sound or a string pluck. When you hear a bell, it means an addition has been made, a string pluck indicates a subtraction. The note also indicates the size of the edit: the deeper the note, the larger the edit.

Here, the sound adds information – it indicates additions and subtractions. Hence, the makers were able to keep the visualisation very simple, while still ‘displaying’ all information they wanted to. This seems to be the biggest strength to me in this visualisation, and it makes you think of other ways to ‘visualise’ data.


InfoVis of the Week – 5


This week a visualisation to compare week to week data caught my eye.


It visualizes the change in theoretical win rate (week by week) of the team in the NFL.
First you have the full list of matches for each week and for each team the ‘predicted’ win rate for that match. On hover over a team it highlights all the matches of that team each week and combine them into a little flowchart so the smaller the line, the smaller the win rate in that time period.

While it seems a little bit weird at first, it makes a reasonable good representation of the data. And having seen this we might use it ourselves to compare ranking of songs, maybe for a country over the weeks, maybe for a song over multiple countries, we’re still discussing about it.



This visualisation was made based on 6 years worth of personal listening data from a user on
On the left is a bar chart of the artists this person listened most to and how many times he listened to them. Underneath, they are represented as a part of his total song plays. On the right, which I think is the more interesting visualisation, the artists he listened to are connected to a genre.

The main thing I learn from this visualisation is the importance of choosing the right colours for your visualisation. In the right part of the image, it is still somewhat ok, but it is hard to distinguish the different parts on the left visualisation of the total plays.

Apart from that, I think the visualisation on the right does a good job of representing the connections, but a nice addition would have been to make it hoverable, so that if you for example hovered over a genre, only the lines connected to that genre would be visible.



This week I look into the choropleth, and this compared to the cartogram, which I discussed last week. I also discuss which of both representations would be more relevant to our project.

Choropleth vs Cartogram [1]

“A choropleth map is a thematic map in which areas are shaded or patterned in proportion to the measurement of the statistical variable being displayed on the map, such as population density or per-capita income.” [2]

Within a choropleth areas do not get distorted which makes it easier to recognize the global geographical area being discussed and its regions. This regions will be colored using a color scale from low to high to visualize some quantitive data.

Within a cartogram areas do get distorted which may make it more difficult to recognize the geographical areas, yet it adds another dimension to the visualization by scaling the regions relative to the quantitive data being visualized.

On a world scale a cartogram will also make it possible to quickly spot small countries with a high value for the data being visualized, while this may go lost with a choropleth. Yet, this downsize of a choropleth on world scale may be solved by allowing zooming upon the world map. However, this solution doesn’t solve the problem at first glance but only upon further exploration.

The best visualization way will this depend on the situation. More concretely whether it is most important to be able to recognize the geographical areas easily or to be able to see also the small countries with high values at first glance.
In our visualization, we can ask the question whether it is important for the user to know the exact information per country at first glance or it is more important to see a spreading pattern over countries in which the user can easily recognize the geographical positioning of this pattern.


Show & Tell (1)

Last week, we started to make our plans for the visualisation more concrete. What we came up with as  a first draft is the following:

We want to be able to compare the charts for two countries. We decided on two dropdowns, where you can select a country, and then the chart will be shown as a list. Songs that appear in both charts will be connected through a line. Furthermore, there will be a measure of how much these two countries are alike in terms of their charts.
compare countries

We think it would also be interesting to compare how two songs or two artists are performing in different countries. We would visualise this with two maps, probably using a colour gradient to indicate differences between countries. Below is a timeline with a slider, so you can see the maps at different moments in artists-songs

Last, we thought it would be fun to analyse the sentiments of the lyrics. That way we might be able to see if maybe more happy songs make it to the top of the charts,… We are currently thinking of bubbles that fill up with the percentages, as we feel the visualisation doesn’t have to be very precise, but just has to give the user an idea.

song sentiment

Some of the feedback we received is that we have to think about the application as a whole: what is the landing page, how do you transition between visualisations? So we sat together to sketch more thought out plans:


This first picture would be the landing page. When it is loaded, a dummy artist and song are selected to show how the visualisation works. The biggest area is a world map, on which countries will be coloured with a gradient, according to the ranking of the song in the respective charts. Underneath is a trendline that shows the global number of listeners for every week. When you move the slider on the timeline, the map changes and the specific moment in time is indicated on the trendline. On the right side, the analysis of the lyrics’ sentiments is shown.


Second is an overlay screen, that allows you to navigate through the visualisations.


Another screen is the view where charts from different countries can be compared. Not much has changed from the original design, except for the timeline and the likeness measure.


The view in which you can compare two songs or two artist is essentially twice the visualisation on the landing page. A possibility for navigation would be that if you click one of the crosses on the maps, you return to the home page.

5A last visualisation comprises small multiples to show trendlines. There are different tabs that can be toggled: listener trends (for every song, the trend in the weekly number of listeners), a song ranking over the countries (meaning that for one song, you see the trendline of its ranking in every country) and a country ranking (where you would see ranking trendlines for all the songs that appeared in the charts of that particular country).

We’re already working on the implementation of these sketches, looking forward to seeing how it works out!

InfoVis of the week – 4


A cartogram is a map, but a special type of map which attempts to convey a general sense of geography in addition to one or more other important statistical elements. Most maps attempt to portray an accurate image of the Earth’s surface, superimposed with other information such as political borders or place names. A cartogram, by contrast, is primarily concerned with accurately portraying a unique data set, while secondarily doing the best it can to stay true to geographic accuracy. [1]

Cartograms can visualize a wide range of types of information.

The following map is a gridded cartogram visualisation of global flight tracks taken from the OpenFlights database. The map distorts the land area by the number of flights that pass a certain space which leads to these ‘ploughing patterns’ over some areas where are airplanes basically just passing by, such as in the western part of Australia where planes simply fly over on their way to the most populated southeast of the country.
The colours in the map relate to the Worldmapper colour scheme. The colours used on the maps group the territories into 12 geographical regions, and allow for an easier visual comparison between the maps than would otherwise be possible. [2]
The colours of the world’s regions are chosen very consciously, and have a deeper sense behind their distribution. The world was split into twelve contiguous geographical regions of population groups, with every region being roughly symmetrically balanced and having at least a population of one hundred million people.The choice of which colour hue goes to which of the twelve regions of the world was made by looking at the Human Development Report. The HDR was used to sort these regions from the poorest to the richtest. Then, a rainbow colour scale was applied to determine the colour hue for each of the regions, starting with shades of dark red to demarcate the poorest territories, then moving through the rainbow scale to a shade violet for the best-off region which is Japan. [3]

cartogram visualisation of global flight tracks

cartogram visualisation of global flight tracks [2]

As said before, cartograms can visualize a wide range of types of information. The map below visualizes the unemployment rate in 2014 in percentage for Europe. It looks at the changing regional economic geography of Europe. Europe is in an economic crisis – but the crisis is felt in very different ways in different places. Official unemployment rates are high, especially in the south of Europe, but joblessness is very low in places, such as Germany. [4]
This cartogram shows that a cartogram does not have to cover the entire world but can also span only a certain continent or country.

cartogram visualization of unemployment in Europe

cartographic view of unemployment in Europe [4]


[1] Victor Vescovo, (June 2006), The Atlas of World Statistics, What is a cartogram?
[2] Benjamin Hennig, (February 2016), Views of the World, Air Spaces: Where the Planes Fly.
[3] Benjamin Hennig, (February 2013), Views of the World, The Worldmapper Rainbow.
[4] Hennig, B. D. Ballas, D., and Dorling, D. (December 2015): In Focus: Europe’s uneven development. Political Insight 6 (3), 20-21.


The visualisation I came across this week is the following by Philip Hodges on his blog Zoho:Lab.

He made an interactive visualisation of NME‘s top album picks from 1974 to 2012 based on their genre.
His intention was to see whether the representation of genres (and hence their popularity) changed over the years. He used a circular bubble chart for his visualisation, in which the size of the bubble stands for the number of times a genre is associated with an album. How close the bubble finds itself to the middle, represents the weighting of the genre within the charts picks. Philip Hodges created a formula himself, but doesn’t share it in his explanations.

Bubble charts can be seen as a variation on the scatter plot, for data with two to four dimensions. The first two dimensions can be represented by x- and y-coordinates, a third by the size of the bubble and a fourth by the colour. Caution must be taken when deciding on the size of the bubbles. It is advised that you choose the radius relative to the square root of the corresponding data value, to avoid misleading representations.

I really like that this visualisation is interactive, as it allows you to play around with it. You can click on the genres to see the outline of one genre more clearly, and the surrounding visualisations are also updated when you do so. You can also hover over the bubbles and get a bit more information, wiki and amazon links are included,… I also think the visualisation makes it very clear which genre is more popular in a certain year, even if you don’t completely understand or know the weighting or the formula used.



My InfoVis of the week can be found at

infovis glenn

It is a real-time visualisation of the blogposts that are being published in the world. A geographical place gets a bar when a blogpost has been published. The more blogposts published from that place, the higher the bar will be. On the left of the screen, is a column with a live feed of all the titles of these blogposts. You can either hide or show this column. Every line is a link to that particular blogpost, so it takes you to the webpage when you click it. The pause button freezes the screen, in case you want some more time to go through the appearing titles.

While it is a fun visualisation, it it not very accurate. The sizes of the bars are hard to compare, both because the visualisation is in 3D and you can also not zoom in. Parts of the bars sometimes fall outside of the window as well.

It is however easy to see in which regions there are a lot of blogposts, which I think was the main purpose of this visualisation – even if you cannot pinpoint the exact city. The live feed is also a nice element, especially because it consists of clickable links. Overall, it looks like a very simple visualisation, and the purpose is immediately clear – in itself a big strength.