Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

This video is available to students only

Create a Scrollytelling Component With Svelte

Adding a component that updates based on scroll position

This page is a preview of Better Data Visualizations with Svelte

Previous Introduction:

How to Build an Interactive Scrollytelling Scatterplot

Next Lesson:

How to Trigger New Behavior on Scroll With Scrollytelling

Start a new discussion. All notification go to the author.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Better Data Visualizations with Svelte

Module 1: Introduction to the Course

Introduction:

Start Here

Introduction: (1:38)

Better Data Visualizations with Svelte - Video Course Introduction

Lesson 1: (2:02)

Svelte Tutorial - What You'll Learn in This Video Course

Lesson 2: (3:57)

Why Use Svelte for Data Visualization Versus D3

Module 2: Svelte and D3 fundamentals

Lesson 1: (4:41)

What is Svelte? A JavaScript Framework that Simplifies UI Creation

Lesson 2: (5:40)

JavaScript and Scalable Vector Graphics in Svelte

Lesson 3: (7:28)

How D3.js and Svelte Complement Each Other

Lesson 4: (14:45)

A Guide to Setting Up Your Svelte Development Environment

Module 3: Building a Scatterplot with Svelte and D3

Introduction: (3:07)

How to Create Your First Svelte Scatterplot

Lesson 1: (15:08)

Getting Started With Svelte - Draw Your First SVG Element

Lesson 2: (48:36)

Draw Axes, Gridlines, and Labels With Svelte + D3.js

Lesson 3: (7:52)

Using Svelte's Dimension Bindings for Responsive Scatterplots

Lesson 4: (41:23)

A Guide to Svelte Hover Events, Dynamic Styling, and Tooltips

Lesson 5: (8:19)

Adding Finishing Touches to a Svelte Scatterplot

Module 4: Building a Beeswarm Chart with Svelte and D3

Introduction: (4:27)

How to Build a Dynamic, Physics-Based Beeswarm Plot

Lesson 1: (38:11)

An introduction to d3-force for Svelte Visualizations

Lesson 2: (19:00)

Making Our Circles Reactive and Responsive

Lesson 3: (14:37)

Adding Dynamic, Data-Based Styling to a Svelte Beeswarm Plot

Lesson 4: (40:30)

Add Axes, Titles, and Legends to Svelte Beeswarm Visualization

Lesson 5: (41:25)

Using the on:mouseover Event to Create Tooltips With Svelte

Lesson 6: (22:59)

How to Add Filters and Hover Effects to Style Svelte Visualizations

Lesson 7: (3:47)

Svelte Beeswarm Walkthrough - Wrapping Up

Module 5: Building a Rotating Globe with Svelte and D3

Introduction: (1:56)

Create an Interactive Globe Visualization With Svelte + D3.js

Lesson 1: (22:33)

An Introduction to the D3 Module d3-geo for Svelte Charts

Lesson 2: (2:59)

Build a Responsive Globe Visualization With Svelte Dimension Bindings

Lesson 3: (9:06)

Styling our Globe

Lesson 4: (12:26)

How to Add Data to a Svelte Globe Visualization

Lesson 5: (37:06)

Creating a Rotating Globe Visualization in Svelte

Lesson 6: (30:31)

How to Add Interactive Tooltips to a Svelte Globe Visualization

Lesson 7: (16:05)

Add a Legend and Reference Line to a Svelte Globe Visualization

Lesson 8: (6:30)

Adding a Title to a Svelte Rotating Globe Visualization

Module 6: Implementing Scrollytelling with Svelte and D3

Introduction: (4:56)

How to Build an Interactive Scrollytelling Scatterplot

Lesson 1: (20:45)

Create a Scrollytelling Component With Svelte

Lesson 2: (18:18)