Charts with Svelte and D3

Charts with Svelte and D3

Building interactive charts on a browser has always been a challenge. There are some libraries out there to facilitate the task, but they all impose some kind of compromise.

Among them, D3 has long been my go to option for this kind of problem. It is just so capable. It feels like instead of compromises it empowers you even more.

But yes, it can be a pain to implement. There are some cool solutions to use it with React. But I was surprised to see that Svelte, which has been growing in popularity lately, offers a refreshing take.

As it does not use a virtual DOM, it makes it easier to share the load with D3. It also can do a lot of the work by itself, creating opportunities for code optimization.

On this exercise, I used data from the great World Bank API to make a comparison of economic indicators of a handful of countries. The result is a compelling promise of what can be achieved with this combo.

You should follow me on Twitter.

I'm Rodrigo Pinto. I create content with the purpose of providing value to you. You won't find ads or sponsored products here. If you enjoy my content, please consider supporting what I do.

© 2021, Rodrigo P. L. Pinto