About this site

Interactive data visualization for the web is fascinating. But let's be honest, it's a challenging thing to learn, too.

D3 has been the gold standard library to create bespoke data visualizations for over 10 years. But it can be overwhelming. Svelte has changed the game with its beginner-friendly syntax and built-in convenience functions for e.g. visual transitions. Since a few years now, more and more dataviz-professionals pivot to a combination of Svelte & D3.

This site aims to collect stunning examples of data-driven visuals that were created with this tool combination. The focus lies on the learning experience that comes from looking at other people's code. That's why only projects are showcased that also share their code publicly.

In addition, some great tutorials, both in written form and in video format, are collected on this site to help you start your Svelte & D3 learning journey or up your data visualization game.

Enjoy!

How this site is built

This site is developed with SvelteKit.

The content is pulled in from a Hygraph CMS project.

Responsive fluid type, space, and grid implemented with Utopia.

The font used throughout is Clear Sans.

The source code for this site is public here.

Last but not least, a big thank you to Leandro Collares for giving detail-oriented feedback on design and reviewing code!