Welcome to
Better Data Visualizations with Svelte
Build Powerful, Performant and Interactive Data Visualizations
Course Syllabus and Content
The Better Data Visualizations with Svelte course is a comprehensive online program designed to help senior software engineers master the art of building stunning visualizations that make complex information easy to understand. With 6 modules, 36 lessons an nearly 10 hours of video content, this course provides a deep dive into the world of Svelte and D3 data visualizations. Here's what you can expect to learn with Better Data Visualizations with Svelte:
Introduction to the Course
3 Lessons 7 Minutes
This module provides an introduction to the course, covering topics such as what you'll learn in the course, the advantages of using Svelte for data visualization versus D3, and what makes Svelte a unique framework.
An introduction to the course.
Let's define what this course is about
Data visualization practitioners looking to enter the interactive space, or those looking for a relief from D3, are perfect students for this course.
Svelte and D3 fundamentals
4 Lessons 32 Minutes
In this module, you'll learn about the basics of Svelte and D3, including how to use JavaScript and Scalable Vector Graphics in Svelte, and how D3.js and Svelte complement each other.
An introduction to Svelte
An introduction to SVG and JavaScript
A bit about Data-Driven Documents: The good, the bad, and why Svelte is better
Setting up your development environment for Svelte
Building a Scatterplot with Svelte and D3
6 Lessons2 Hours 4 Minutes
This module focuses on creating a simple scatterplot using Svelte and D3. You'll learn how to draw your first SVG element, create axes, gridlines, and labels, and add dynamic styling and tooltips to your chart.
An introduction to your first Svelte scatterplot
Drawing your first SVG elements in Svelte
Using Svelte and D3 to draw axes, gridlines, and labels
Using Svelte's dimension bindings to make our chart visible on all screen sizes
Adding hover events, dynamic styling, and tooltips to bring our chart to life
Finishing up our first Svelte scatterplot
Building a Beeswarm Chart with Svelte and D3
8 Lessons3 Hours 4 Minutes
In this module, you'll learn how to create a dynamic, physics-based beeswarm plot using Svelte and D3, and add filters and hover effects to style your visualization.
A dynamic, physics-based beeswarm visualizing happiness by country
An introduction to
d3-forceUsing reactive blocks to fix our force diagram
Adding dynamic, data-based styling to our beeswarm chart
Adding axes, titles, and a legend to our beeswarm chart
Revealing more information to the user via a tooltip
Adding new hover and click events to filter and style our visualization
Finishing up our beeswarm chart
Building a Rotating Globe with Svelte and D3
9 Lessons2 Hours 19 Minutes
This module covers how to create an interactive globe visualization with Svelte and D3, including how to use the D3 module d3-geo for Svelte charts, build a responsive globe visualization with Svelte dimension bindings, and add a legend and reference line to your globe visualization.
An interactive, rotating globe visualizing the world's population
An introduction to d3-geo
Making our globe responsive
Make the scene a bit prettier
Making our countries' fill represent population
Making it spin!
Providing additional context to the user on click
Rounding out our globe with a legend
Finishing off with a title!
Implementing Scrollytelling with Svelte and D3
6 Lessons1 Hours 34 Minutes
In the final module of the course, you'll learn how to build an interactive scrollytelling scatterplot and create a scrollytelling component with Svelte.
We hope you find this course's content comprehensive and useful in learning how to build declarative data visualizations with Svelte and D3.
An interactive, scrollytelling version of our initial scatterplot
Adding a component that updates based on scroll position
Using scroll position to trigger new behavior
Using scroll position to update axes
Adjusting our chart style so it fits nicely in an article
Componentizing our code for a more readable project