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: