Programming Project - Immigration in Europe

Course: Programmeerproject
Name: Jasper Naberman
Student number: 10787224

GitHub Pages

Product Demonstration Video

Product Goal

In the current social media environment, a lot of arguing about immigration takes place. Both left- and right-wing opinions are spat out using assumptions, sophistry and false information. Seldom is looked at the relevance of data and, perhaps even more important, the relations within it. This leads to a widespread discussion based on foul sources in both modern society and politics.
The idea for this product is to provide a solid and neutral basis for further debate using data from all around Europe to visualize the actual amount of immigration facing the continent. The ratio of the amount of immigrants per 1000 capita is shown, the absolute amount of immigrants per country, and the distribution of the nature of an immigration stream per country.

Website Walkthrough

Homepage

The website consists of a main homepage that shows the title and subtitle of the product, projected on an image. At the top of the page is a navigation bar, which contains links with symbols to the other webpages of the site.

At the bottom of the page (when scrolled down) some general information is displayed. Some of the text is hyperlinked.

Visualization Page

This page is the most interesting page of the website. It contains all the data visualizations that have been made. At the left is a map of Europe. The countries are color coded to the amount of immigrants per 1000 capita of that country. A darker shade means a higher amount of immigrants per 1000 capita. The map holds a tooltip, which will show the exact amount of immigrants per 1000 capita of the country which is hovered over with the mouse.
At the right is a sunburst which in the middle shows the whole of Europe. The first layer (all the children of Europe) contains all the countries that are colored on the map. These are color coded to the percentage of immigrants that they took up in comparison to the rest of Europe. The second layer tells the user about the nature of the immigrants per country. These cells are color coded to the percentage of that country. This information, together which the absolute amount of immigrants is displayed per country with a tooltip, while hovering over it with the mouse.
At the top left is a dropdown menu, which will let the user select a country, on which is than zoomed in at the sunburst. At the top of the page is a navigation bar, which contains links with symbols to the other webpages of the site.

When scrolling down at this page the user will see a bar chart. This chart displays the absolute amount of immigrants per country. The chart is sortable in different ways. The requested way can be selected using the radio buttons above the chart. The barchart also contains a tooltip which tells the user the exact amount of immigrants.
While hovering over the bars in the bar chart or the cells in the sunburst, the border of the relevant country in the map will become wider, therefore indicating where that country is on the map.

Story Page

On this page a summary of the goal of the website is given. This is done with a problem statement and a response to that statement. Both text areas are joined by an image on the right. At the top of the page is a navigation bar, which contains links with symbols to the other webpages of the site.

Additional Information Page

On this page some additional information about the website is displayed. On the left the sources for coding and data are displayed. On the right some contact information about me, the creator, is displayed. At the top of the page is a navigation bar, which contains links with symbols to the other webpages of the site.

Sources

Data Sources

All used data originated from Eurostat, the statistical office of the European Union. The exact datasets used are:

• Immigration by age group, sex and citizenship
• Population on 1 January by age group, sex and citizenship

Code Sources

Note: a lot of these materials have their own respective licenses.

• Bootstrap related elements:
  • Navigation bar: click here
  • Jumbotron: click here
  • Wells: click here
  • Rows and columns: click here
• Map of Europe:
  • TopoJSON map (paths and coördinates): click here
  • The idea for a color coded map: click here
  • Legend gradient: click here
• Sunburst chart:
  • The idea for a zoomable sunburst: click here
  • The idea for rounded corners in the sunburst: click here
• Bar chart:
  • The idea for a highlight-able bar chart in D3: click here
  • The idea for the sort function for the bar chart: click here
  • The idea of a tooltip for the bar chart: click here

API's and D3 Plugins

• D3
• D3 tip library
• jQuery
• Bootstrap
• TopoJSON
• DataMaps

Images

• Homepage image: click here
• Story page image 'Problem': click here
• Story page image 'Response': click here

This project is licensed under the terms of the MIT license.
Jasper Naberman, 2018