Data Visualization with Svelte
Creating a data visualization involves knowing two things:
- Knowing how to draw shapes in a loop (the technique).
- Knowing which shapes to draw (the art).
This is a course about the first.
Specifically, it's a self-guided course about techniques for developing data visualizations that target modern web browsers, using a particular set of tools:
- SVG, for rendering crisp vector graphics in the browser.
- Svelte, for declaratively generating SVG.
- D3, as a general-purpose data visualization library.
- TypeScript (optional), for telling our development environment about the schema of external data.
I don't assume any prior knowledge about these, but I also don't cover any of them comprehensively – just enough to make some pretty pictures with data.
Setup:
Clone this repository:
git clone https://github.com/paulgb/svelte-vis.git
Install requirements:
cd svelte-vis
yarn install
Run dev server:
yarn dev
When the server is running, open your browser to http://localhost:5000.
How to use this course
Each lesson is centered around a video in which I write code, giving context as I go. I intend for you to start each lesson by watching the video. Each group of lessons also has written notes, for your reference after watching the video.
Two of the early lessons, Bar Plot and Scatter Plot, include exercises for you to test your understanding. My hope is that once you get through a few structured exercises, you will be in a good place to do self-guided exploration in the later exercises. I encourage this! Don't just read the code, poke at it in different directions and see what happens.
Lessons:
