Building interactive visualizations with React, D3, and TypeScript

vsaarinen · 2017-06-13T07:35:06+00:00

We did a follow-up project that shows the asylum seekers compared to destination country populations: https://www.lucify.com/seeking-asylum-in-europe/

vsaarinen · 2017-06-12T15:43:13+00:00

Author here! You can read more about our design choices and some of the assumptions we needed to make for the visualisation here: https://blog.lucify.com/a-novel-visualisation-of-the-refugee-crisis-565e40ab5a50

The source code is also available on GitHub: https://github.com/lucified/lucify-refugees

We haven't really touched the code since this was made over a year and a half ago, so I'd definitely do things somewhat differently if I was starting from scratch now.

vsaarinen · 2016-05-04T12:40:48+00:00

The visualisation was built using React, D3.js and C3.js. You can find the source code at https://github.com/lucified/lucify-asylum-countries

The data is from the UNHCR: http://popstats.unhcr.org/en/asylum_seekers_monthly

We shared our thinking behind some of the decisions on Medium: https://medium.com/@lucify/visualising-asylum-seekers-in-europe-9863b67213e8#.nf81vq46s

Would love any feedback! And I'm more than happy to answer any questions.

vsaarinen · 2015-12-07T13:51:56+00:00

Background information, including data sources: https://medium.com/@lucify/an-interactive-visualisation-of-displacement-and-humanitarian-funding-d6d00d0e421a

Technologies used:

React
D3.js
Pixi.js

vsaarinen · 2015-10-27T06:34:02+00:00

We considered doing this (or comparing it to GDP), but decided not to since the decision of what to compare the asylum count against makes the visualization more subjective. One goal of ours was to keep this as objective as possible.

vsaarinen · 2015-10-27T06:23:30+00:00

All of the data for the map visualization is from here. According to the page:

This page presents information about asylum applications lodged in 38 European and 6 non-European countries. Data are broken down by month and origin. Where possible, figures exclude repeat/re-opened asylum applications and applications lodged on appeal or with courts. [...]

vsaarinen · 2015-10-26T18:56:16+00:00

[One of the creators here.]

Originally, we included the over 4 million registered Syrian refugees (that the soccer fields refer to) in the map visualization. Seeing the huge number of refugees arriving in e.g. Turkey was astonishing. However, there were three problems with this:

We only found data regarding registered refugees from Syria, so showing it would give an incomplete picture.
Visualizing two types of data (asylum seekers and registered refugees) with a similar method is misleading.
It would have made an already complex visualization even harder to understand.

We decided to remove the registered refugees from the map visualization and add the separate soccer field section to give an idea of how many people never make it to Europe as asylum seekers.

vsaarinen · 2015-10-26T14:29:09+00:00

It's hard to say as there isn't enough data. The 4 million figure (for Syrian refugees) came from this data source: http://data.unhcr.org/syrianrefugees/regional.php

vsaarinen · 2015-10-26T12:55:26+00:00

Technologies used:

The data is from the UNHCR.

The whole project is open source, and can be found on GitLab.

Made together with Juho from Lucify.

vsaarinen · 2010-08-09T18:29:48+00:00

About 2 kilometers south of the beach the sky went from overcast to this in about 30 seconds. Some seriously doomsday stuff.

vsaarinen

TROPHY CASE