It started with UN data

I was always fascinated by all kinds of population and society data recorded by the United Nations. Then on a cold day in January I realised that I wanted to dig into their child mortality data. Being a dad myself, it’s quite depressing to read the bare numbers. There are so many children on our planet dying so early in their life.

But I had some hope that the data is not uniquely bad. A hope that there is something positive in it.

Bringing data to screen

I downloaded the child mortality rates for the past 60+ years for almost all countries on earth. Then I performed some data tidying in R and quickly moved on to the browser.

Just a few months earlier I heard about Svelte for the first time. It’s a “no-framework”, a bit similar to React or Vue, but it compiles the code to a plug-and-play runtime. There’s no library which I would need to ship. Well, I also have to admit that it makes a lot of fun coding in Svelte.

How to turn such depressive data into a design?

I had a circular piece in mind. I thought there’s so much imperfection in the data, so I need to go for something perfect: a circle. While digging through the data in R, I saw that child mortality rates have been going down for almost all countries over recent years. That was the positive angle. In order to highlight this trend, I set a focus on the last 20 years by drawing the mortality rates as decreasing red circles in another full circle of countries.

However, I also wanted to make it clear which countries are the outliers. Those countries with rising child mortalities. So I designed an outer circle border which turns red, when the respective country registered rising mortality rates.

Finally, Svelte makes it quite easy to handle global state. So I added a search bar for convenience, where you can directly look for your country of interest.