$\newline Logo$

Go to Preview Lesson

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

MODULE 1
Introduction to the Course
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.
MODULE 2
Svelte and D3 fundamentals
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.
MODULE 3
Building a Scatterplot with Svelte and D3
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.
MODULE 4
Building a Beeswarm Chart with Svelte and D3
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.
MODULE 5
Building a Rotating Globe with Svelte and D3
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.
MODULE 6
Implementing Scrollytelling with Svelte and D3
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.

Go to Next Lesson

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

Using Svelte's Dimension Bindings for Responsive Scatterplots

Using Svelte's dimension bindings to make our chart visible on all screen sizes

This lesson preview is part of the Better Data Visualizations with Svelte course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only

Unlock This Course

Get unlimited access to Better Data Visualizations with Svelte, plus 90+ \newline books, guides and courses with the \newline Pro subscription.

$Thumbnail for the \newline course Better Data Visualizations with Svelte$