Fifth presentation – progress update

We presented our progress since last week. We made some adjustments based on the remarks that were given after last week’s presentation, some of these adjustments were already scheduled to happen.

First of all we implemented the fixed position for the search box, this was a remark that was given during the last presentation. Secondly, we added the axes back to the multiples view.

Finally, we incorporated region and world data into our design. The World Bank dataset does not provide data for geographical continents, but features certain regions constructed on their similarity in geographical position, culture and economical conditions. We hence use these regions in our design.


Some interesting remarks were providing after our presentation:

  • The inclusion of the axes is certainly a positive adjustment. It might also be good to put the x-axis on the same level for each graph and scale each graph the same to be able to compare them to each other more easily. We looked into this possiblity: for series expressed in percentages, this is a possibility we will look into. Nevertheless, for series expressed in absolute numbers, scaling them the same is a problem as visible in Figure 1. We will look into the possibility of expressing these in a logaritmic scale.
problems with global scale for series in absolute numbers

problems with global scale for series in absolute numbers

  • Some remarks were about the graphs themselves: the dots are too small to easily pull up the tooltip, maybe another type of graph could work better, the usage of green and red for positive and negative numbers on the graph, to reduce the numbers shown after the decimal, etc. Increasing the size of the dots is not an option, the line graph will become too distorted and the goal of the visualization is not to see the exact number but the trend. Incorporating green/red for positive/negative values is not a good add-on in our eyes. First of, we use colors to diversify in country/region/world data, this would then no longer be possible. Secondly, it is already very easy to see which values are positive/negative at first glance by their position according to the x-axis which represents the zero value.
  • a valuable remark was made that some graphs or series had almost no data and that we should explore the possibility of dropping these. We will indeed investigate this.
  • One final remark was that for some series it is not very clear from their title what they actually entail. The suggestion was made to include a pop-up with further information about them. This information is available in the World Bank database and we will indeed look into adding this feature.

Fourth presentation – progress update

Last class, we presented our current state of the project and the updates we made since the last presentation.

For us, the update is quite big: we changed our data set. As LastFM’s API was still broken after four weeks, we decided to search for a new dataset to save our project. We looked for a dataset that would enable us to keep most of the visualisation we developed already. That way, we did not have to throw all of our work out the window.

We decided upon the World Bank Databank, and more specifically the dataset on World Development Indicators. We picked out a few series that we thought would be interesting to show. The small multiples visualisation was elaborated enough to show the class what we did so far.

There were a lot of interesting and useful design critiques:

  • A few critiques were about sorting: it would be nice to sort graphs from lowest to highest population growth percentage, sorting according to continent, enable the user to select a few aspects himself to be able to compare. The joint underlying thought was that they felt there were too many small multiples and it was hard to compare different aspects that way. This is why we are currently looking into filtering options, so the user can indeed select what he wants to see.
  • Some other remarks had to do with the graphs themselves: we should add the begin and end date to the graphs, add axes and show a mean value in the graph (in a different colour). There was a suggestion to use the same scale for every graph, but this is something that needs some further investigation. With our previous dataset, we also tried to do this, but then for some countries there were no trends to be seen because the numbers were too small compared to the maximum used for the scaling. Hence we need to check what the result will be on our current dataset before we take a design decision. Another thing is that for the year 2015, there is not always data present yet in the set, and so the graph often goes to zero, which presents a wrong image. So we need to look into how we will solve this.
  • Two general design critiques: it would be convenient if the search box stays fixed at the top of the window while scrolling and a ‘back’ button would also be in the interest of the user, as it is apparently not intuitive that you can click on the graphs.

In the mean time, we already implemented the fixed position of the search box. We also gathered aggregate data for different regions. The set does not provide data for the exact continents, but proposes some regions that are economically and culturally similar. We will hence use these regions for the aggregates. The other remarks are still being considered at this point.

Due to time constraints, on Joris’ advice, and because nobody even asked where they went, we decided to leave out the map visualisations and focus on perfecting the small multiples.

We think the way the presentations were organised, was more efficient compared to how it usually goes, although it would have been nice to be able to respond to certain critiques sometimes – it was sometimes very hard not to do so, as observed.

InfoVis of the week – 7


As we changed our dataset – more on that in a next post – I started looking at visualisations concerning population growth. I came across this Urban World Visualisation made by Periscopic for Unicef in 2012.

urban world infographic

It is based on their report ‘The State of the World’s Children’ from the same year. Periscopic used the global population data from the report to map the growth of over 100 countries since 1950. They also projected the population growth to 2050 and added the percentage of urban population for each country’s total population. The circles are scaled to the urban population size – so the bigger the circle, the higher the real number of urban population. Percentages are shown by means of the colour of the circles.

In this visualisation, I like the fact that it is not a map, although the circles are organised according to the relative geographic position of each country. In that way, you can quickly look up a country if you roughly know where it is situated, as you see a slight form of a map in it.

The nice thing with the scaling is that you can find some interesting insights: you can see e.g. that Mexico has a very high urban population compared to the total population, and compared to neighbour USA. Or that Belgium is 97% urban.


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.

Second presentation – illustrated scenario

This week, we gave the second presentation in class about the plans for our final visualisation.

In this presentation we look at possible ways of visualizing music charts. Our dataset still consists of the Shazam data as described in a previous blog post. During this week we looked into the Spotify API but came to the conclusion there was not more data to be found. We will look into the LastFM API during the upcoming week.

A first visualization is one that visualizes the top 100 of a country. This could then be extended into a second visualization where it is possible to compare the charts of two different countries by selecting them on a map.

Furthermore, a third visualization would allow to select an artist or a certain song and check its popularity over the world. A country where the song/artist ranks higher, would be coloured darker and vice versa.

A possible extension on this visualization would be to include a time aspect, where the popularity over time could be shown.

A few suggestions that were made in class:

  • include a view to see the same song over different countries
  • include an easy manner to listen to the songs being visualized
  • small countries are difficult to spot on a world map, it could be good to scale countries according to popularity
  • it would be interesting to see how a song goes viral over the world
  • it could be a possibility to also analyse the lyrics of the song and their mood
  • perhaps focus on a smaller number of songs and look into more detail for those

These were all very useful suggestions and we are certainly taking them into consideration to improve our work.

InfoVis of the week – 3


My InfoVis of this week is this representation of “38 ways to make a perfect coffee”. I think it is ordered in an accessible way. Even without the label reading ‘coffee’ you can tell that that is what it is about. The stylised drawings make it easier to compare the different cups to one another.

I also like the way the ingredients are represented. In my opinion, it is easier to see the amount of an ingredient you have to add as a part of the cup, than as an amount in centiliters – it is harder to imagine how much 8 cl is, then when you say ‘a quarter of a cup’ if you don’t have a measuring cup.

Another aspect of this visualisation is that you can immediately see the type of cup you are supposed to drink a certain coffee from for optimal results. It is much more difficult to describe this in words than with a simple image.

One more thing is that they ordered the types of coffee according to their similarity, which is also nice if you want to change your usual coffee just a little bit, you just look at the image left or right from it.




LinkedIn Network

This week I look into a Social Network visualisation.

InMaps is an interactive visual representation of your professional network. The tool is sadly enough not active anymore. The tool creates an interactive visual representation of your professional universe which visualizes the relationships between you and your LinkedIn connections. With it you can better leverage your professional network to help pass along job opportunities, seek professional advice, gather insights, and more.

The map is color-coded to represent different affiliations or groups from your professional career, such as your previous employer, college classmates, or industries you’ve worked in. In this person’s InMap, his LinkedIn colleagues are blue, while former colleagues at Yahoo Analytics are pink and other at Yahoo are green and his Carnegie Mellon classmates are orange and tangerine.

Bigger names represent people who are the most connected within that specific cluster or group. When you click on a contact within a circle you’ll see their profile pop up on the right, as well as lines highlighting how they’re connected to your connections.

Exploration of the map is possible to measure your own impact or influence, or create opportunities for someone else.

One can get a general insight in his network with a first glance by recognizing certain clusters or groups and how these are interconnected. From thereforward, it is possible to explore further. Look into how certain clusters are connected and through who, how certain possible future connections can be made and who are key figures within your network.

Other possible visualization tools for Social Networks and more specifically LinkedIn are Socilab, Iko System, Socioboard,…



This week, a visualisation on how long drugs stay in your body using bar charts caught my eye.

It’s is generally considered that bar charts make good visualisations, because we can compare lengths much better than areas or angles [1] (at least when it comes to quantitative data). This is demonstrated above. It’s nice and intuitive to look at it and see the differences. And instead of making it a weird 3D bar chart that combine the blood, urine and hair results into one, they made 3 seperate graphs, each showing their data in a good way.

But there is something wrong with the visualisation as a whole. First, they sorted the data within each graph from small to large, this makes comparison between graphs much more difficult since position is the best way to represent something [1]. So when you want to compare LSD with heroin on all 3 aspects it’s rather hard to do. This can be solved partially by making it interactive or by ordering the drugs alphabetically, so they all have the same position in each graph. Secondly, the scale used on the X-axis is not the same for all 3 graphs. In the first they use hours, probably because the data is more precise and in the last 2 they use days instead, probably an indicator of less accurate data. So to compare the first to the second or third graph, a conversion of the first to days or the latter to hours must be made. This leads to a visual misinterpretation of the data: the first bars are larger than the other but actually represent a shorter time period.

Lastly, there are some things wrong with the individual graphs.
In the first there is one drug that has a lot more hours which would lead to a graph similar to the second graph. But instead of doing that they made the scale non-lineair in the last part, which makes the visualisation less representational.
The last graph on itself doesn’t say much. It just says that each drug can stay in your hair up to 90 days, except for LSD which only stays in your hair up to 3 days. First, the data is very inaccurate which makes a good comparison with the other 2 graphs harder. Secondly, the graph is only useful in comparison to the others due to the lack of variation in the data itself for the third graph.

[1] J. Mackinlay. Automating the design of graphical presentations of relational information. ACM Transactions On Graphics,  5(2):100-141, 1986.