A novel visualisation of the refugee crisis
You can view the result here. The project is available as open source on GitHub.
In this blog post we explain our choices regarding the visualisation.
The UN refugee agency (UNHCR) publishes monthly counts of new asylum seekers for each origin-destination country pair based on information collected by the relevant agencies in the destination countries. We know, for example, how many Syrian refugees arrived in Germany in August 2015.
This dataset only contains a part of the story. For example, the two million Syrian refugees in Turkey are not counted as asylum seekers, but registered refugees. While the UNHCR publishes some data about registered refugees, it is not as comprehensive as with asylum seekers.
Limited by the available (reliable) data, we chose to focus on the European perspective of the crisis, and show only asylum seekers arriving in Europe. Thus we can work exclusively with the UNHCR’s asylum seekers dataset.
Individuals as moving dots
This project started with the hunch that showing each refugee as one moving dot on a map could be a powerful way to convey the magnitude of the crisis. After building a proof-of-concept, we recognized that such a visualization does not only show the scale of the numbers, but also beautifully tells the story of what those numbers mean.
However, the true scale of the crisis was made very clear to us: if each asylum seeker was represented by a dot, there would be too many dots to display. The map would become too crowded — not to mention performance issues. We could ignore performance by rendering a video, but that would not allow for any interaction. And interactions are important.
We decided to have each pixel represent 25–50 refugees, depending on device characteristics.
Migration routes, starting points and endpoints
The UNHCR dataset does not contain any information about migration routes. Some fairly anecdotal information on migration routes is available, but there is no obvious way to combine it with the asylum seeker data in a meaningful way.
We had similar challenges with choosing starting points and endpoints within each country. In principle, we know that, for example, most Iraqi refugees come from specific regions, or that Germany has large reception centres in certain cities.
Showing exact routes, starting points or endpoints is not important when merely aiming to illustrate the scale of the crisis. On the other hand, by showing direct migration routes, we can make the flows between specific countries clearly visible.
We did some experimentation on using random starting points and endpoints within each country. In the end, we decided to use a single origin and destination point located at each country’s centroid — map-speak for the center of mass of the country. This makes it easier to see where refugees are coming from and going to.
Arrival and start days
The dataset contains information about how many asylum seekers have arrived in a given month. To choose arrival dates for refugees, we spread that amount randomly throughout the month. Additionally, we assigned each refugee a random speed between 4 and 6 km/h. We then calculated the start date based on the journey length, speed and arrival date.
The speed range that we chose corresponds to an average human’s walking speed. Of course, refugees move by different means, including walking, flying, or riding a boat, train or car. They also sleep. An average speed of 5 km/h is consistent with the claims in this Finnish article that an asylum seeker’s journey from Syria to Finland typically takes weeks or months.
Again, representing travel times correctly is not important for the purpose of demonstrating the scale of the crisis. Therefore we consider using such a rough figure acceptable.
The used dataset contains a lot of data that cannot be shown all at once. Hovering over a country makes data associated with that country visible. Destination and origin countries are coloured with an opacity relative to each country’s relative weight. Interpolated refugee counts are also shown. They are counts of actual refugees, not moving dots.
Hovering over the timeline graph lets users quickly move in time to points of interest. This interaction ended up being one we like quite a bit. First of all, the graph makes it easy to spot and jump to points where changes happen. Second, moving back and forth in time quickly while looking at the map provides an intuitive grasp of how massive the refugee situation becomes.
The Sankey diagram
Since we had to do some unorthodox tricks to make the moving pixels possible, it is necessary to also show the original data without any approximations or interpolations.
We chose a Sankey diagram with appropriate interactions for focusing on individual countries. It is based on Mike Bostock’s Sankey example.
The map visualisation incorporates some novel ideas while using some unorthodox tricks. We believe that the compromises are worth it, and that the end result is not only informative, but intuitive, memorable and engaging.
The visualisation is available as open source. The implementation involves some interesting ways to use React, D3.js and PIXI.js together. We might write another blog post about the technical details in the future.
We would be thrilled to see others use our work to create meaningful visualisations. Please let us know if you need help with it.
Finally, we are happy to receive any feedback.
Juho Ojala and Ville Saarinen