A work by Yan Holtz for the React Graph Gallery

Watch the world...

Getting older

Some countries are experiencing an aging population, while others are in the midst of a baby boom. Some face unusual demographic shifts when some others are surprisingly stable. Dive into the intriguing patterns of global population dynamics with this captivating set of lines.


1950
1965
1980
1995
2010
2025
2040
2055
2070
2085
2100

Looks good but

What's this?

These organic shapes look quite appealing. But do they actually mean anything? 🤔

They do!

They're a creative way to represent the evolution of the population pyramid of a country over time.


Let me walk you through it step by step:



How I made this

Material & Method

This project is inspired by the work of Jorge Camoes. His approach resonated with me, especially since I'm not fond of getting older. So I decided it was a great time to dive into some D3.jswork.

If you're curious about how this is made, most of the concepts are explained in my React Graph Gallery, and the code is available on GitHub.

Essentially, it's a substantial amount of React code for rendering, with a bit of D3.js to calculate the shape positions. React Spring is used for all the animations. That's it!

Oh, and the data comes from the United Nations. Thanks to them for providing it!