Awesome Svelte & D3

A curated list of awesome Svelte & D3 resources

This list is focused on the combination of Svelte & D3.

Basics

If you're new to Svelte or D3 and want to learn the very basics you might want to check out some more focused tutorials on each to get an overview. To get started with Svelte, check out The official Svelte Tutorial. For an overview of D3, visit How to learn D3.js by Amelia Wattenberger. For more on each of the two visit Awesome Svelte or Awesome D3.

Tutorials

Here are awesome tutorials that combine Svelte & D3:

Text

Making visualizations literally with Svelte and D3 by Connor Rothschild

• beginner friendly tutorial to get started with Svelte and D3
• contrasts D3's method chaining with Svelte's "literal" programming style

Data visualization with Svelte and D3 by Rob O'Leary

• a gentle introduction with lots of examples and links to further resources

Data Visualization With Svelte and D3 by Anup Joseph

• a multi-part blog post that shows simple examples of bar, scatter, line and map charts
• based on this D3 + React Course by Curran Kelleher

Build your first scrollytelling visualization by Connor Rothschild

• beginner friendly tutorial to get started with scrollytelling
• introduces tweened values to manipulate points of a scatterplot on scroll

How to Use Svelte and D3 to Create an Interactive Data Visualisation by Russel Lim

• shows how to make a wordcloud-bar-chart with baby names

Mapping with Svelte and D3js by Roger Veciana

• some awesome examples of maps made with Svelte & D3, including ones with multiple geometries and color scales

Video

Effective data visualization with sveltejs and D3 by Matthias Stahl

• how to combine Svelte and D3
• strengths of Svelte and D3 respectively

In the wild

Here are some awesome examples of visualizations created with Svelte & D3:

The circle of hope by Matthias Stahl

• Code is here

Fly high – pay low by Matthias Stahl

• Code is here

Visualizing Censorship in Iran by Matthias Stahl

• Code is here