International migrant stock map
Since late 2015 i’ve been working with non-profit organizations to provide relevant data on the international migration topic. Since then projects like encyklopedie.org were created.
We’ve tried approaching data visualization on map through multiple services/libraries and in the end we’ve ended up loving Mapbox. So here started the journey for #mapmadness18 submission.
Live demo of the map is found on Codepen.
Goal
- Provide unbiased, objective and comprehensive information about global migration of people.
- Allow comparison of data in available time periods and eras
- Show data in simple and interactive way
Data
To start with the obvious choice of source was UN and it’s International migrant stock estimates by destination and origin. Then, the project needed reliable geographical data about countries and their capitals (if available), that’s what can be found on Natural Earth.
UN dataset contains estimates of the international migrant stock by age, sex and origin for mid-point (1 July) of each year: 1990, 1995, 2000, 2005, 2010, 2015 and 2017. Detailed information about the dataset is found in it’s documentation.
For the purpose of this project, the dataset was enhanced with geographical information by pairing names of the countries with their geographical counterparts. That, amongst other things, involves transforming official names of countries to their simple names (e.g. Venezuela (Bolivarian Republic of) to Venezuela or Holy See to Vatican). The full result is geojson found on gist.github.com.
Technologies
- Javascript (ECMA6)
- Mapbox (using Mapbox GL JS)
- Turf.js (for scaling and manipulating geographical data)
- Axios (HTTP client)
- Chroma.js (color manipulations)
Map
As a platform for visualization, there is a blank instance of Mapbox map.
After map is loaded, project asks for data from gist through GET request using Axios library and creates two separate layers — one with countries themselves and another one (filtered) for hovering over countries.
Interactivity
When user clicks, map should show origins of migration to selected country. It listens for click event and uses queryRenderedFeatures to find out which features was selected.
Separate functions loadCountry() and unloadCountry() handle logic behind showing the data. Basically they sort all origins of migration to selected country, limit that to Top 10, show list of them and draw lines between destination country and the origin.
Since UN provides historical data, it was natural to allow user to pick time period. For that purpose, there is a simple list of available periods at the very top of the map which uses selectYear() function to change displayed data.
Colorization
To give the map some colors and visually distinguish popularity of migration destination project uses setPaintProperty set to categorical type of stops.
Color stops are defined by getColorStops() function which takes all migration data to individual countries and using Chroma.js applies quantile logic to create color scale.
Conclusion
For additional flavour, the map uses monospace font family and basic CSS animations. The whole project and it’s source code can be found on Codepen.
