The circle of hope


January & February 2020


  • R
  • JavaScript
  • Svelte
  • D3.js

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.

Child mortality detail

A highlighted country with the headlights effect.

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.

Child mortality detail
Explore the project

The website wants to use cookies.

Privacy policy