Reusable interactive Data Visualizations

In my search for a better solution to bringing interactive data visualizations to the web, and reusing the same charts in various ways, I created this project to develop scalable patterns and evaluate the benefits of pairing SvelteKit with D3.

The site features several interactive visualizations, that are reused in different forms:

• Full Page Visualisation
• Dashboard
• Visual Essay (Scrollytelling)

For comparison I implement the same Scatterplot in multiple ways:

• Using D3 to build both the chart and the axes
• Using Svelte to build both chart and the axes
• Using Svelte to build the chart and D3 to build the axes

Since Svelte does not rely on a Virtual DOM (as compared to React), integrating another library that also mutates the DOM (D3) worked very well. Both D3's and Svelte's origins lead back to the New York Times Graphic department, which has since been pioneering in the field of data storytelling. It shouldn't come as a surprise that these two technologies work so well together.