Why Use Svelte for Data Visualization Versus D3

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

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

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 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Better Data Visualizations with Svelte
  • [00:00 - 03:22] So let's talk a little bit about who this course is tailored for. Note that you're welcome here no matter what and I'm sure you'll find a way to learn from this course but there are certain practitioners who are going to benefit more from the course than others. In particular I've identified two camps of people that I think would really appreciate and benefit from this course. First, you know the basics of data visualization but you're not yet well first and interactive data is on the web. So maybe you come from an existing platform like R or Gee Plut and you know how to make static graphics but not interactive graphics. This course is going to be great for you. Second, the camp that knows how to make interactive data visualizations on the web but they're looking for a relief from existing tools like D3 or React. So for me I came from a context where I knew a lot of D3, vanilla D3 and I was trying to kind of make it easier on myself which is how I found Sveld and why I learned it. And if you are in this camp I think you're going to find Sveld is a great relief from existing tools like D3 and Sveld as a framework is a lot easier to understand than React. So as I said in the last lesson we don't require a lot of coding experience to get started but the more JavaScript proficiency you have the better. So those are the primary audiences. We are still going to benefit from this course even if you're an expert in D3. So we're going to explain how visualizations felt require different mental model than those built in D3 and so adjusting to this new paradigm might take some time but I believe and you'll hopefully find throughout this course that visualizations made with Sveld are more intuitive, easier to debug and more readable than those made with D3. Second you'll also benefit if you know Sveld but not for data Vids. This course is going to leverage the parts of Sveld that you already love so if you know S veld you know reactivity, data bindings and state management and introduce them in a visualization context and then also show you new parts of Sveld that work great visualization like tween values and things related to motion, animation and transitions. Finally knowledge dependencies. So we talked a little about this last lesson but a little bit more in the weeds of what you can expect or what you should know. Basic familiarity with JavaScript is going to help you and for context JavaScript is almost universal on the websites you visit every day so it's probably good to know it anyway and in particular we're going to rely on a few concepts which I would definitely recommend researching like data types, array methods, if else statements and the turnary operator and functions. So go ahead and give these phrases at Google if you don't recognize them and just do some peripheral reading. But as we progress and as we introduce new terms we're going to link to documentation and provide a call out box like this. So this is just an example you don't need to read this too closely but this is an example of whenever we introduce a new method like the map method we'll document what it is so you have a better understanding and you'll know that's what you need to research more if you're confused. And so as I said the call out boxes will provide information but they're not going to document the most basic concepts. So this example kind of illustrates the baseline level of JavaScript knowledge which I would recommend before beginning .

    [03:23 - 03:58] Again I've added other resources that you can learn in the course materials themselves. So finally you don't need to know spelt or any other framework and you don't need to know anything about D3. We'll cover the important parts of D3 in the course and leave out the unimportant parts but more on that later. So hopefully now you know if this course is for you. If not I would recommend reading a little bit about some of these basics and some of these fundamentals and the knowledge dependencies but assuming this is right for you I'm excited to see you in the first module where we'll get started.