1. Environment setup
In this part of the course, we will focus on the programming aspect. We will use standard web technologies for this: HTML, CSS and javascript.
We will use stackblitz, an "instant fullstack web IDE for the javascript ecosystem" (source: Stackblitz developer site). Nevertheless, we also mention below how to set up the necessary stack on your own computer.
1.1. Stackblitz
There are many different types of projects that stackblitz has templates for. For data visualisation, you might use a vanilla HTML/CSS/javascript setup, or (as in this course) Sveltekit.
1.2. Local installation
If you want to set up a development environment on your own machine, you will need node and Visual Studio Code.
1.2.2. Visual Studio Code
We’ll use Visual Studio Code ("vscode" for short) as a code editor. You can get it here.
You will also want to add some extensions to make programming for visualisation a bit easier. You can do this by clicking on the "Extensions" icon in the left bar:
The extensions that we recommend, are:
-
Svelte for VS Code (by Svelte)
-
Svelte Intellisense (by ardenivanov)
1.3. Exercises
We have set up a group of exercises that will guide you through the different facets of creating visualisations using web technologies and sveltekit. You will find these at the bottom of each page.
Svelte is a language and compiler for building web applications. It allows you to create reusable components. SvelteKit is a full-stack web application framework built on top of Svelte.
1.3.1. Github
To be able to log into stackblitz, you’ll have to create an account on github first. This will make it easier to get everything organised.