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 want 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 have heard of Svelte for the first time. It’s a “no-framework”, a bit similar to React or Vue, but it’s compiling 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 are 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, it should also be clear what the outlier countries are. 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 diectly look for your country of interest.Explore the project