seblammers / awesome-svelte-and-d3

A curated list of awesome Svelte & D3 resources

Awesome Svelte & D3

This project lives on in a new way over here: https://github.com/seblammers/awesome-svelte-and-d3-website

It now has a frontend that you can see live here: https://awesome-svelte-and-d3.netlify.app/

I will not update this list in the future. If you want to contribute, please hop over into the other repo.

⚡ A curated list of awesome Svelte & D3 resources

Note

All contributions welcome!

• Start a pull request to directly add content
• Create an issue to start a public discussion
• Reach out via mail

Basics

This list is focused on the combination of Svelte & D3. 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.

In the wild

Here are some awesome examples of visualizations created with Svelte & D3 (sorted by recency):

K-Means Clustering An Explorable Explainer by Yi Zhe Ang

• Look at the live site
• Browse the Code

Linear Regression by Jared Wilber

• Look at the live site
• Browse the Code

Taiwan’s 10 most popular street foods over the last decade by Daisy Chung, Ivy Chen, Eva Huang, Julia Janicki & Leandro Collares

• Look at the live site
• Browse the Code

Logistic Regression by Erin Bugbee & Jared Wilber

• Look at the live site
• Browse the Code

Kanji with radicals by Dea Bankova

• Look at the live site
• Browse the Code

ROC & AUC by Jared Wilber

• Look at the live site
• Browse the Code

Precision & Recall by Jared Wilber

• Look at the live site
• Browse the Code

Visualizing Censorship in Iran by Matthias Stahl

• Look at the live site
• Browse the Code

The circle of hope by Matthias Stahl

• Look at the live site
• Browse the Code

Fly high – pay low by Matthias Stahl

• Look at the live site
• Browse the Code

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

Code snippets by Amelia Wattenberger

• recipes for creating data visualization components based on Svelte and D3

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

Data Visualization with Svelte and D3 by Matthias Stahl

• behind the scenes: Der Spiegel's graphics desk
• advantages of combining Svelte and D3 to create interactive visualizations
• live coding an interactive chart with Svelte and D3

Effective data visualization with sveltejs and D3 by Matthias Stahl

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