Implementing data visualisations using Svelte

Svelte helps us to loop over lists in a declarative way. The following code in html gives a bulleted list:

In svelte, we can create an array in the script section, and use the #each pragma to loop over all items. First, we’ll create an array called names (denoted with the square brackets []) in the script section. In the HTML itself, we can loop over them, using the {#each} directive (which is closed using {/each}). In that loop, each value is put in the temporary variable name:

Similarly, instead of hard-coding the datapoints in the SVG, or using the getElementById, appendChild etc as in the previous section, we have an easier way of looping over datapoints in svelte. First, we’ll create an array called datapoints, each containing an x and y value in the script section. In the HTML itself, we can loop over them, using the {#each} directive (which is closed using {/each}).

In line 21-23, we loop over the datapoints array, each time putting a single element in a local dp variable. We can refer to the x and y properties like we do on line 22.

The result:

Similarly, the {#if} directive (in full: {#if} …​ {:else} …​ {/if}) allows you to put conditions in your html. For example, let’s create an array of individuals as objects, that contain both a name and a gender.

This will return:

For our scatterplot, let’s add a value to all these datapoints, and draw either a blue circle or a red rectangle based on that value.

The result:

This is one of the major features of svelte which has an immense effect on programming experience, its reactivity. Reactivity means that when some variable a depends on a variable b, and b is changed, that the value of a is automatically updated as well. This is what makes a tool like Excel so strong: if you have a cell in a spreadsheet with a formula =A1*2, it will have the value of cell A1 multiplied by 2. If you change the value of A1, the value in the derived cell is automatically updated as well. Most programming languages do not have this baked in, but with svelte you do have that functionality.

We do this using the $: pragma. For example:

We’ve seen before that we can use curly brackets {} to pass in a value. Here we also need to work in the other direction: when the value of the slider changes, it should be passed through to the script above. We do that using bind:value. Sliding left and right will now update the multiplied value as well. You can try it below.

INTERACTIVE

Although it is extremely useful for quickly checking things, we can’t use the REPL for real work. Still, you might go back to it regularly to test something out.

Instead, we can develop sveltekit applications (i.c. visualisations) locally, on our own machine. See the sveltekit website on how to get set up. These are the commands you need:

The first step will create a new directory (called my-app) with your application. It will ask you for some information like if you’d want to have an empty (skeleton) setup, or already have demo code included. The npm run install installs all dependencies (which are listed in the package.json file). Finally, npm run dev will start a local webserver so that you can access your application. The output will list which port the application is running on. This will most probably be port 5173, so you should open the website http://localhost:5173. If you use npm run dev — --open it will automatically open that website for you.

To understand how data can be loaded in sveltekit, we need to understand how routing works. Routing maps a file to a URL and vice versa. The directory structure in sveltekit is important: each URL points to a subdirectory of src/routes. For example:

Each of these directories should have a page.svelte` (Notice the `-sign!) file, which contains the actual content of that page.

See https://kit.svelte.dev/docs/routing for more information.

Let’s start with the proof-of-principle setup: we hard-code the data to be loaded.

Make the src/routes/+page.js look like this:

And the src/routes/+page.svelte look like this:

You should see values: [1,2,3,"a string"] in your web browser at http://localhost:5173.

Imagine we need to load the iris dataset, available from a public url (https://raw.githubusercontent.com/domoritz/maps/master/data/iris.json). The data file looks like this:

To load that data, we’d write the following +page.js:

What happens here?

It’s interesting to add a console.log(res) after line 3 to see what that res looks like.

In (4) we create the actual return value of the +page.js file: it is a map with a single key flowers and its value coming from dataFlowers.

To use that data in the +page.svelte file, we need to define a data variable and get the flowers from it. A simple page showing the sepal length of al flowers would therefore look like this:

The +page.js example above is a minimal one: you can add additional data transformations. For example, the iris dataset has the following form:

but we would like to add a unique ID to each of these records. Also, we’d like to have the full species name, e.g. "Iris setosa" instead of just "setosa". We can adapt the script above like this:

The data that is now passed to +page.svelte looks like this:

In contrast to JSON, fetch is not able to automatically parse a CSV file. We’ll have to do that ourselves. We have to install the PapaParse npm package. To do so:

Here’s a working example using data about flights. The file looks like this:

If you get an error in the console that mentions the CORS policy (No 'Access-Control-Allow-Origin' header is present), try using https instead of http in the URL for the dataset.

Let’s walk over this code:

You can always add a console.log() for csvFlights or parsedCsvFlights to see what those variables look like.

We get the following output:

The above CSV and JSON files are on a remote server. But what if we have the data on our own machine? Actually, this is very simple as we are running our own server. If you put the data file in the static directory of your svelte project, you can access it directly, e.g. with

Above we only loaded a single dataset, but obviously we will sometimes need multiple datasets in our application. To do this we just add an additional variable to the load function in our +page.js. For example:

As before, the data variable in +page.svelte is the object that is returned by +page.js (i.c. {genes: […​,…​,…​], proteins: […​,…​,…​]})