Web Form submitted

Attend a weekly, 2-3 hour live session and receive first-hand instruction from Connor

Over the course of 6 weeks, you will learn to build data visualizations with Svelte and D3 alongside other cohort students.
Each week's 2-3 hour session will be taught in a virtual livestream by Connor. 
During each live session, you will collaborate with fellow cohort students in group activities and exercises. 
Upon completion, you will receive a certificate from newline!

Receive First-Hand Instruction From Connor Rothschild

Join an Upcoming Cohort

Better Data Visualizations with Svelte - Video Course Introduction

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

Data visualization practitioners looking to enter the interactive space, or those looking for a relief from D3, are perfect students for this course.

Why Use Svelte for Data Visualization Versus D3

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.

Introduction to the Course

What is Svelte? A JavaScript Framework that Simplifies UI Creation

JavaScript and Scalable Vector Graphics in Svelte

A bit about Data-Driven Documents: The good, the bad, and why Svelte is better

How D3.js and Svelte Complement Each Other

Setting up your development environment for Svelte

A Guide to Setting Up Your Svelte Development Environment

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.

Svelte and D3 fundamentals

An introduction to your first Svelte scatterplot

How to Create Your First Svelte Scatterplot

Drawing your first SVG elements in Svelte

Getting Started With Svelte - Draw Your First SVG Element

Using Svelte and D3 to draw axes, gridlines, and labels

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

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

Using Svelte's Dimension Bindings for Responsive Scatterplots

Adding hover events, dynamic styling, and tooltips to bring our chart to life

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

Finishing up our first Svelte scatterplot

Adding Finishing Touches to a Svelte Scatterplot

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.

Building a Scatterplot with Svelte and D3

A dynamic, physics-based beeswarm visualizing happiness by country

How to Build a Dynamic, Physics-Based Beeswarm Plot

An introduction to d3-force for Svelte Visualizations

Using reactive blocks to fix our force diagram

Making Our Circles Reactive and Responsive

Adding dynamic, data-based styling to our beeswarm chart

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

Adding axes, titles, and a legend to our beeswarm chart

Add Axes, Titles, and Legends to Svelte Beeswarm Visualization

Revealing more information to the user via a tooltip

Using the on:mouseover Event to Create Tooltips With Svelte

Adding new hover and click events to filter and style our visualization

How to Add Filters and Hover Effects to Style Svelte Visualizations

Svelte Beeswarm Walkthrough - Wrapping Up

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.

Building a Beeswarm Chart with Svelte and D3

An interactive, rotating globe visualizing the world's population

Create an Interactive Globe Visualization With Svelte + D3.js

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

Build a Responsive Globe Visualization With Svelte Dimension Bindings

Styling our Globe

Making our countries' fill represent population

How to Add Data to a Svelte Globe Visualization

Creating a Rotating Globe Visualization in Svelte

Providing additional context to the user on click

How to Add Interactive Tooltips to a Svelte Globe Visualization

Add a Legend and Reference Line to a Svelte Globe Visualization

Adding a Title to a Svelte Rotating Globe Visualization

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.

Building a Rotating Globe with Svelte and D3

An interactive, scrollytelling version of our initial scatterplot

How to Build an Interactive Scrollytelling Scatterplot

Adding a component that updates based on scroll position

Create a Scrollytelling Component With Svelte

Using scroll position to trigger new behavior

How to Trigger New Behavior on Scroll With Scrollytelling

How to Update Axes Based On Scroll Position With Scrollytelling

Adjusting our chart style so it fits nicely in an article

Adjusting Svelte Chart to Fit Within Articles

Componentizing our code for a more readable project

How to Clean Up and Componentize Svelte Code

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.

Implementing Scrollytelling with Svelte and D3

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:

After completing Better Data Visualization with Svelte, students now possess the skills to build amazing data visualizations with Svelte and D3.

What the Students are Saying

svelte

How to add interactive tooltips to a Svelte globe configuration

How to add filters and hover effects to style svelte visualizations

Connor explains how setting the CSS property `pointer-events` to `none` allows users to hover over elements behind a tooltip in SVG data visualizations.

Hovering over elements behind a tooltip

Connor explains how to use Svelte's dimension bindings , `clientWith` and `clientHeight`, to handle responsiveness.

Making Svelte data visualizations responsive

Connor explains how to map data dimensions to values that can be visually represented with D3's linear scale

D3 linear scales in under a minute

Tell the stories hidden within your data with Svelte and D3.

36 Video Lessons on Svelte and D3

Interactive, Live Project Demos

Complete Project Source Code

### Overcoming Common Challenges When Learning to Build Data Visualizations with Svelte and D3

If you're new to building data visualizations with Svelte and D3, you may have encountered some common challenges that can make it difficult to get started or progress in your learning. Here are some of the problems and frustrations that you may have experienced:

- Lack of clarity on how to select, modify, and join data to create visualizations.
- Difficulty in understanding how to work with Svelte and D3 to create responsive and interactive charts.
- Limited access to code examples and real-world projects to learn from.
- A need for a structured learning experience that builds on the fundamentals of data visualization.
- No community to connect with and learn from other students and experts.

Learning how to build data visualizations with Svelte and D3 can be overwhelming, especially without a clear path or guidance.
This course aims to solve these common problems and challenges by providing a structured learning experience with code examples and real-world projects, access to a community of fellow students and experts, and a clear path to mastering the fundamentals of data visualization.

We hope that this course will help you overcome these challenges and provide you with the skills and confidence to build stunning data visualizations with Svelte and D3.

### 5 Advantages of Learning Data Visualizations with Svelte and D3 in Today's Environment

If you're considering learning data visualizations with Svelte and D3, there are many advantages to doing so in 2023. Here are five reasons why you should consider learning these skills today:

1. **Data is more important than ever**: With the growing importance of data in today's world, there is a greater need for professionals who can effectively communicate insights through visualizations. Learning how to build data visualizations with Svelte and D3 can help you stand out in a crowded job market and make you a valuable asset to any team.
2. **Svelte and D3 are popular and in-demand**: Svelte and D3 are widely used in industry and have become increasingly popular in recent years. By learning these technologies, you'll be gaining skills that are relevant, in-demand, and can help you advance in your career.
3. **The power of declarative programming**: Svelte and D3 are declarative frameworks, meaning that you can focus on what you want to achieve rather than how to achieve it. This makes it easier to create complex visualizations with less code, which can save you time and reduce the likelihood of errors.
4. **Responsive and interactive visualizations**: With Svelte and D3, you can create visualizations that are both responsive and interactive, meaning that they can adapt to different screen sizes and allow users to interact with the data. This can make your visualizations more engaging and effective at communicating insights.
5. **Community and resources**: The Svelte and D3 communities are active and supportive, providing a wealth of resources and opportunities to learn from others. By learning these technologies, you'll be joining a community of like-minded professionals who can help you grow and develop your skills.

By learning how to build data visualizations with Svelte and D3 in 2023, you'll be gaining skills that are relevant, in-demand, and can help you advance in your career. With the power of declarative programming, responsive and interactive visualizations, and a supportive community, you'll be well-equipped to create stunning data visualizations that communicate insights effectively.

Build Powerful, Performant and Interactive Data Visualizations

Learn how to declaratively build responsive, interactive data visualizations with Svelte and D3.
This course contains dozens of lessons, each complete with live coding examples for students to study and build upon. 
By the end of the course, you'll have finished four production-ready, professional data visualizations, and you'll have learned many industry best practices.

Better Data Visualizations with Svelte

Build a rotating globe visualization with Svelte and D3.

Build a dynamic, physics-based beeswarm plot with Svelte and D3.

Build a responsive, interactive scatterplot with Svelte and D3.

How to create the best data visualizations on the web

The importance of declarative chart construction

How to integrate Svelte and D3 to make more intuitive data visualizations

Differences between 'old-school' and modern approaches to data visualization

What problems a framework-driven approach to visualization can solve

How to create charts that wow your audience

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript