Svelte Challenge: Part I

Back in January I launched this blog as an accountability tool to motivate me to improve my data visualization skills. In the first three months of the year, I’ve focused on static visualizations.

For me, this meant improving my existing R and Ggplot2 skills ( mostly by attempting to recreate charts I see online), learning Figma, and taking Will Chase’s course on design for data visualization.

For my next project I’ve decided to jump into learning interactive data visualization with Svelte. I’ve always been amazed by the interactive web projects produced by places like The Pudding, but I always felt like building something like this was way outside my ability. But recently I’ve seen more and more people online talking about how Svelte–a front-end Javascript framework that was specifically built for creating interactive data viz–is making this process easier.

This challenge is also an experiment to see how far a data analyst with programming experience but no front-end background can get with interactive data viz in a month. Since I’m learning this from scratch I thought it would be useful to document my experience for others who might be thinking of learning Svelte.

Here’s what I’m going to do:

• Spend 5 hours per week learning Svelte (split between structured a Svelte Course and personal projects)
• Record how much time I spend learning
• Document what I learn and any takeaways on learning Svelte in this blog

In this post I’ll provide a little more information about my background, the goal I’m setting for this challenge, and my learning process.

Who is this guy?

I’m a data analyst with four years of experience coding in R and Python. I work for a company that does spatial analytics so I’m particularly well-versed in spatial packages and GIS-based workflows. I took an HTML/CSS course on codeacademy a few years back and then never touched it again. I use the command line and Git at work so I’m comfortable troubleshooting an error message. I had never written any Javascript before starting this project.

I also have a full-time job and a kid at home, so I’m only able to dedicate around 4-6 hours per week to this project.

If the above sounds like you then you might benefit from following along with my experience (also you sound like a very cool person).

The Goal

I’ve learned through past experiences that learning a technical skill can feel a little like opening one of those Russian Matryoshka dolls. Once you look into learning one tool, you realize you need to learn three others, each of which come with their own pre-requesites. In order to prevent myself from going down a rabbit hole that leads to me enrolling in an online CS degree, I want to be very explicit about my goal in this challenge.

I want learn to make relatively simple interactive data visualizations for the web.

In other words, I’m not learning to become a front-end web developer or to become an expert in Svelte or D3. By “relatively simple” I mean building a chart you could embed in an existing article but not necessarily creating an IIB-award winning scrolly-telling story. In general, my approach to learning technical subjects is to learn just enough about the tools themselves in order to accomplish my goals.

That said, Svelte is, at the end of day, a front-end web development framework. You cannot write Svelte without knowing HTML, CSS, and Javascript. So, as you’ll see below I’m going to spend a bit of time reviewing these first. But I opted against doing a dedicated course for any of them because I didn’t want to get bogged down. I also find that I learn best through projects so I wanted to dive into building data viz as soon as possible.

The Process

There are tons of free resources available for learning Svelte and interactive data visualization. Here are just a few:

• Videos from Matthias Stahl of Deir Spiegel
• Awesome set of tutorials and example projects (with code) curated by Sebastian Lammers

After exploring a few of these options, I decided to look into a paid course. Its worth it for me to shell out some cash to save time pulling together resources from disparate places.

With the above in mind, I decided to spend the $60 for the Better data visualizations with Svelte course by Connor Rothschild. I chose the course because it looks comprehensive, beginner friendly, and is project-based.

My plan for learning is pretty straightforward:

1. Review pre-requisites, including HTML, CSS, and Javascript
2. Complete one project in the course
3. Apply what I learned in the course project to build something similar on my own.
4. Rinse and repeat steps 2-3 for each project in the course

In my experience, step 3 is the most time-consuming but crucial part of this process. Anyone can follow along with a tutorial and recreate what they see on the screen. The learning (for me at least) doesn’t happen though until you have to apply what you’ve learned with a different dataset and a different goal.

How long will this take?

I’m giving myself two months for this challenge. The course FAQ’s estimate that the course itself takes about 20 hours to complete. Since I’m spending about an hour a day during working days on the course, it should take me a month. I’m then adding in another month learn some front-end basics (HTML, CSS, Javascript) and do my own personal projects.

Check in next week for a post on what I did in my first two weeks (spoiler: it involves a very ugly scatter plot).