Better Data Visualizations with Svelte
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.
- 4.9 / 5 (61 ratings)
- Published
- Updated
9 hrs 43 mins
36 Videos
20 Exercises
Connor Rothschild
Partner & Visualization Engineer at Moksha Data Studio. Previously at Axios, Coding it Forward, USSOCOM, and Texas Policy Lab.
The course is divided into 6 modules, where you will learn how to declaratively build data visualizations with Svelte and D3, and learn the fundamentals of responsiveness and interactivity. We hope you find this course's structure and flexibility helpful in learning how to build declarative data visualizations with Svelte and D3. Here's how it works:
Summary:
This course will teach you how to declaratively build data visualizations with Svelte and D3, and learn the fundamentals of responsiveness and interactivity. You will start with the basics of Svelte and D3 and then move on to creating a simple scatterplot, a beeswarm chart, a rotating globe, and a scrollytelling story. Each module builds on the previous one and provides a cohesive learning experience.
01Remote
You can take the course from anywhere in the world, as long as you have a computer and an internet connection.
02Self-Paced
Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.
03Community
Join a vibrant community of other students who are also learning with Better Data Visualizations with Svelte. Ask questions, get feedback and collaborate with others to take your skills to the next level.
04Structured
Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.
What You Will Build In This Course
Build Powerful, Performant and Interactive Data Visualizations
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
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:
- 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.
- 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.
- 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.
- 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.
- 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.
Our students work at
Sample Course Lessons
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.
- Free00:01:38
- Free00:02:02
- Free00:03:57
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.
- Free00:04:41
- Free00:05:40
- Sneak Peek00:07:28
- Sneak Peek00:14:45
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.
- Sneak Peek00:03:07
- Sneak Peek00:15:08
- Sneak Peek00:48:36
- Sneak Peek00:07:52
- Sneak Peek00:41:23
- Sneak Peek00:08:19
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.
- Sneak Peek00:04:27
- Sneak Peek00:38:11
- Sneak Peek00:19:00
- Sneak Peek00:14:37
- Sneak Peek00:40:30
- Sneak Peek00:41:25
- Sneak Peek00:22:59
- Sneak Peek00:03:47
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.
- Sneak Peek00:01:56
- Sneak Peek00:22:33
- Sneak Peek00:02:59
- Sneak Peek00:09:06
- Sneak Peek00:12:26
- Sneak Peek00:37:06
- Sneak Peek00:30:31
- Sneak Peek00:16:05
- Sneak Peek00:06:30
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.
- Sneak Peek00:04:56
- Sneak Peek00:20:45
- Sneak Peek00:18:18
- Sneak Peek00:08:23
- Sneak Peek00:22:41
- Sneak Peek00:19:46
Subscribe for a Free Lesson
By subscribing to the newline newsletter, you will also receive weekly, hands-on tutorials and updates on upcoming courses in your inbox.
What the Students are Saying
After completing Better Data Visualization with Svelte, students now possess the skills to build amazing data visualizations with Svelte and D3.
Meet the Course Instructor
Start Building Beautiful, Engaging Data Visualizations Like a NYT Graphics Editor
Tell the stories hidden within your data with Svelte and D3.
One-Time Purchase
Better Data Visualizations with Svelte
- 36 Video Lessons on Svelte and D3
- Interactive, Live Project Demos
- Complete Project Source Code
- Discord Community Access
- Full Transcripts
- Money Back Guarantee
- Lifetime Access
newline Pro Subscription
$18/MO
Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More
Billed annually or $30/mo billed monthly. Free to cancel anytime.
- 36 Video Lessons on Svelte and D3
- Interactive, Live Project Demos
- Complete Project Source Code
- Discord Community Access
- Full Transcripts
- Money Back Guarantee
- Lifetime Access
Plus:
- Unlimited access to 60+ newline Books, Guides and Courses
- Interactive, Live Project Demos for Every newline Book, Guide and Course
- Complete Project Source Code for Every newline Book, Guide and Course
- Best Value 🏆
Join an Upcoming Cohort
Receive First-Hand Instruction From Connor Rothschild
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!
Frequently Asked Questions
What is Better Data Visualizations with Svelte?
Better Data Visualizations with Svelte is an online course that teaches you how to create interactive and responsive data visualizations using Svelte and D3. The course consists of 6 modules, 36 lessons, and 9 hours and 43 minutes of video lessons.
Who is this course for?
This course is for anyone who wants to learn how to create effective data visualizations using Svelte and D3, regardless of their experience level. Whether you're a beginner or an experienced developer, this course will provide you with the knowledge and skills you need to create compelling data visualizations.
What if I don't like the course?
We offer a 30-day money-back guarantee, so if you're not satisfied with the course, you can request a refund within 30 days of purchase.
What's included in the course?
The course includes 6 modules, 36 lessons, and 9 hours and 43 minutes of video lessons, as well as downloadable code files and resources to help you practice and reinforce what you've learned in the course.
What are the prerequisites for the course?
You should have a basic understanding of HTML, CSS, and JavaScript before taking this course. Familiarity with Svelte and D3 is helpful but not required.
How long will it take to complete the course?
The course is self-paced, so you can complete it at your own pace. We estimate that it will take approximately 15-20 hours to complete the entire course.
Can I access the course on my mobile device?
Yes, the course is fully responsive and can be accessed on your mobile device.
Is there a certificate upon completion of the course?
Yes, you will receive a certificate of completion when you finish the course.
Can I ask questions during the course?
Yes, you can ask questions in the comments section of each lesson, and our team will respond as quickly as possible.
Can I download the course videos?
No, the course videos cannot be downloaded, but they can be accessed online at any time.
What is the price of the course?
The course is currently priced at $69. Alternatively, you can purchase it as part of the "newline Pro Subscription," which costs $20/month.
How is this course different from other data visualization courses?
This course is unique in that it focuses specifically on using Svelte and D3 to create interactive and responsive data visualizations. Additionally, the course is taught by Connor Rothschild, a data visualization developer with extensive experience in the field, which provides a unique perspective and insight into creating effective data visualizations.
