How to use Svelte

You can create amazing projects using just HTML, CSS, and JavaScript. But the more complex the webpages, styles, and user interactions become, the harder it gets to manage everything with just those.

This is why web frameworks exist. They are toolsets that make it easier to build complex web projects. You still use HTML, CSS, and JS with them, but they often include custom syntax to help streamline development.

There are many open-source frameworks, but one that I find particularly efficient and fairly straightforward to learn is Svelte. It’s used by many newsrooms to build interactive data visualizations. This is what we will use to create an interactive map of wildfires in Canada.

Before starting, make sure you’ve completed the previous sections, especially 1. First steps 🧑‍🎓, 2. Pushing further 🚀, 3. The SDA library 🤓, and the lessons on HTML, CSS, and JS.

Setup

To install Svelte, you can use the sv package, but instead, we’re going to use setup-sda once more with the --svelte option. It will install SDA (as we saw in 3. The SDA library) and Svelte together, so we can benefit from the best of both!

Create a new folder, open it in VS Code, and run deno -A jsr:@nshiab/setup-sda --svelte. It will set up everything for you.

There’s a lot in there! Let me explain:

• .svelte-kit is a folder Svelte uses. You don’t need to worry about it.
• node_modules contains libraries and packages. Deno takes care of it.
• sda is where we’ll work with SDA. It’s the same folder we saw in 3. The SDA library.
• src is the folder for our web development. It will contain our HTML, CSS, JS, and Svelte code.
• static is a folder to put assets, like images and data files. Anything in this folder will be brought with your webpage, and you’ll be able to fetch it.
• The other files are configuration files that you don’t need to worry about unless you get quite advanced in web and Svelte development. The only exception is deno.json, which contains new tasks compared to previous lessons, like dev and build, that we’ll use during our web development.

To make all of this work properly, we are also going to install the Svelte extension. Like the Deno extension, it will help us code faster by providing auto-complete, warnings, and errors as we work on our projects.

Data and prototype

Let’s start by crunching our data and prototyping a visualization. This is often the first step in my projects: using SDA to crunch/analyze the data and explore dataviz options.

Since this is a Svelte lesson and I assume that you’ve completed the previous lessons, we’ll just reuse the code from the Visualizing data lesson.

In sda/helpers, create a new crunchData.ts file and copy and paste the code below.

It fetches the 2023 wildfires data and the provinces’ boundaries in Canada from GitHub and preps them to be visualized.

import { SimpleTable } from "@nshiab/simple-data-analysis";
 
export default async function crunchData(
  fires: SimpleTable,
  provinces: SimpleTable,
) {
  await fires.cache(async () => {
    await fires.loadData(
      "https://raw.githubusercontent.com/nshiab/data-fetch-lesson/refs/heads/main/reported_fires_2023.csv",
    );
    await fires.points("lat", "lon", "geom");
    await fires.addColumn("isFire", "boolean", `TRUE`);
    await fires.sort({ lat: "desc" });
  });
 
  await provinces.cache(async () => {
    await provinces.loadGeoData(
      "https://raw.githubusercontent.com/nshiab/simple-data-analysis/main/test/geodata/files/CanadianProvincesAndTerritories.json",
    );
  });
 
  await fires.insertTables(provinces, { unifyColumns: true });
}

Now let’s create sda/helpers/visualizeData.ts with the code below.

This script uses Plot to create a map from the fires SDA table and writes it to sda/output/map.png. If you want to know more about this code, make sure to check the Visualizing data lesson.

import { SimpleTable } from "@nshiab/simple-data-analysis";
import { geo, plot, spike } from "@observablehq/plot";
 
export default async function visualizeData(fires: SimpleTable) {
  await fires.logTable();
  const drawMap = (
    data: { features: { properties: { [key: string]: unknown } }[] },
  ) => {
    const firesPoints = data.features.filter(
      (feature) => feature.properties.isFire,
    );
    const provincesPolygons = data.features.filter(
      (feature) => !feature.properties.isFire,
    );
 
    return plot({
      projection: {
        type: "conic-conformal",
        rotate: [100, -60],
        domain: data,
      },
      length: {
        range: [1, 200],
      },
      color: {
        legend: true,
      },
      marks: [
        geo(provincesPolygons, {
          stroke: "lightgray",
          fill: "whitesmoke",
        }),
        spike(firesPoints, {
          x: (d) => d.properties.lon,
          y: (d) => d.properties.lat,
          length: (d) => d.properties.hectares,
          stroke: (d) => d.properties.cause,
          fillOpacity: 1,
          fill: (d) => {
            if (d.properties.cause === "Human") {
              return "#b5caff";
            } else if (d.properties.cause === "Natural") {
              return "#ffe6a8";
            } else {
              return "#ffb9ad";
            }
          },
        }),
      ],
    });
  };
  await fires.writeMap(drawMap, "./sda/output/map.png");
}

And we can now call these functions in sda/main.ts.

import { SimpleDB } from "@nshiab/simple-data-analysis";
import crunchData from "./helpers/crunchData.ts";
import visualizeData from "./helpers/visualizeData.ts";
 
const sdb = new SimpleDB();
const fires = sdb.newTable("fires");
const provinces = sdb.newTable("provinces");
 
await crunchData(fires, provinces);
await visualizeData(fires);
 
await sdb.done();

As we did before, we can now run main.ts with deno task sda in the terminal. Once the first run is done, you’ll see the data table logged and the map in the sda/output folder.

Our goal will be to create the same kind of map on a webpage, but with an option to filter the provinces.

Writing data for the web

For now, we are just creating a map as an image with SDA. But we want to create this map on a webpage with Svelte.

The first step is to write the data to a file that Svelte will be able to use. We can do that in crunchData.ts. To make sure that the page loads as fast as possible, we are going to select just the columns and rows we need for the visualization.

We can remove fires with no province, and we don’t need their geometries since the visualization code just uses the lat and lon coordinates. However, we need the geom column for the provincial boundaries. Also, we rename the provinces’ nameEnglish column to province to keep their names.

Since we will be working on the web, we can write a JSON file that Svelte and any web browser will be able to handle. We write this file to src/data/fires.json. Anything you want to be used by Svelte needs to be in the src folder, which is convenient to remember what is for the web and what is not.

We can also pass the option { rewind: true } when writing the file, just to ensure the coordinates are in the right order for Plot to draw the map. The fires.json file should weigh around 828 KB, and map.png should still be rendered without issues.

import { SimpleTable } from "@nshiab/simple-data-analysis";
 
export default async function crunchData(
  fires: SimpleTable,
  provinces: SimpleTable,
) {
  await fires.cache(async () => {
    await fires.loadData(
      "https://raw.githubusercontent.com/nshiab/data-fetch-lesson/refs/heads/main/reported_fires_2023.csv",
    );
    await fires.addColumn("isFire", "boolean", `TRUE`);
    await fires.filter(`province !== null`);
    await fires.sort({ lat: "desc" });
  });
 
  await provinces.cache(async () => {
    await provinces.loadGeoData(
      "https://raw.githubusercontent.com/nshiab/simple-data-analysis/main/test/geodata/files/CanadianProvincesAndTerritories.json",
    );
    await provinces.renameColumns({ nameEnglish: "province" });
  });
 
  await fires.insertTables(provinces, { unifyColumns: true });
  await fires.selectColumns([
    "lat",
    "lon",
    "hectares",
    "cause",
    "province",
    "geom",
    "isFire",
  ]);
  await fires.writeGeoData("src/data/fires.json", { rewind: true });
}

Local server

Now that we have our data, let’s stop watching and running sda/main.ts in the terminal (CTRL + C) and let’s start our Svelte project!

Run deno task dev in your terminal. Svelte will start a local server and your web project will be available at a local address like http://localhost:5173/. Open it with your favorite web browser and you’ll see your web project!

Exploring src

Before diving further, let me explain what’s in the src folder:

• components is where you can store your Svelte components, the building blocks of your webpages.
• data contains the data we’ll use in our project.
• helpers will store some helper functions.
• lib is another place where you can store types, variables, and more, and easily import them in your Svelte components.
• routes is where you create your pages. More about it below.
• app.d.ts and app.html set up your pages.

All of this might seem like a lot and very complicated, but as we go forward, you’ll see it’s actually a very nice way to structure web development code.

And you might be wondering: but where is my HTML? If you peek into routes, you’ll see three files:

• +layout.svelte wraps each page with what you want, like a header or footer. Here, we use it to add some default CSS (from Simple CSS, as we saw in the CSS lesson).
• +layout.ts is a configuration file. No need to worry about it.
• +page.svelte is your main page! This is where you can see the HTML code being rendered in Chrome. In this project, we have just one page, but Svelte can create multi-page projects without a sweat. 🏋️

Writing HTML

We want to create a map of wildfires that can be filtered by province. Let’s update our page title and paragraph to start with.

We can update the page directly with HTML.

<h1>Wildfires in Canada</h1>
<p>
    The map below shows the wildfires reported in 2023. The taller the spikes,
    the larger the fires.
</p>

If you save this file, you’ll see that Svelte automatically refreshes the page in your browser. This is called hot reloading and is very convenient. Svelte watches all the files in your project and you can see the changes you are making live! 🔥

Writing CSS

By default, projects started with the setup-sda library are using the Simple CSS template. But if you want to add some CSS, you can use the <style></style> tags. By convention, styles are placed at the bottom of Svelte files.

For example, we could underline our h1. 💅

<h1>Wildfires in Canada</h1>
<p>
    The map below shows the wildfires reported in 2023. The taller the spikes,
    the larger the fires.
</p>
 
<style>
    h1 {
        text-decoration: underline;
    }
</style>

Writing TS

In the previous lesson, we learned that web browsers don’t understand TypeScript. They can only run JavaScript. But Svelte fixes that problem for us. If we give it TS, it will transpile it to JS, which is wonderful!

To write TypeScript code on our page, we just need to wrap it between <script lang="ts"></script> tags. By convention, scripts are at the top of Svelte files.

For example, in the code below, we import our fires data, log it, and count the number of fires. We then insert the number of fires in our paragraph.

<script lang="ts">
    import fires from "../data/fires.json";
 
    console.log(fires);
 
    const nbFires = fires.features.filter((d) => d.properties.isFire).length;
</script>
 
<h1>Wildfires in Canada</h1>
<p>
    The map below shows the {nbFires} wildfires reported in 2023. The taller the
    spikes, the larger the fires.
</p>
 
<style>
    h1 {
        text-decoration: underline;
    }
</style>

Creating components

In previous lessons, we kept our HTML, CSS, and JS in .html, .css, and .js files. The idea behind it was to keep our code organized by language or syntax. But Svelte allows us to do something more interesting: components.

Components can group related HTML, CSS, and JS/TS together and can be called anywhere, as many times as you want. 😎

For example, we could decide that the code we wrote so far should be part of one component: <Intro />. Create a new file Intro.svelte in src/components and put all of the code in it. By convention, component names are capitalized.

PS: I removed the console.log(fires). We don’t need it anymore.

<script lang="ts">
    import fires from "../data/fires.json";
 
    const nbFires = fires.features.filter((d) => d.properties.isFire).length;
</script>
 
<h1>Wildfires in Canada</h1>
<p>
    The map below shows the {nbFires} wildfires reported in 2023. The taller the
    spikes, the larger the fires.
</p>
 
<style>
    h1 {
        text-decoration: underline;
    }
</style>
 

Then import this new component in src/routes/+page.svelte. To call a component, call its name like you would call an HTML element, with < and />.

If you want to test it out, add multiple <Intro /> one after the other. You’ll see that the code is automatically reused, and if you update the component (by changing the title, for example), the changes are applied everywhere. Very convenient!

<script lang="ts">
    import Intro from "../components/Intro.svelte";
</script>
 
<Intro />

Components with props

Right now, our <Intro /> component is self-sufficient. But what if we wanted to pass it arguments, like we would do with a function? To do that, we must use props, which is short for properties.

For example, we could decide that fires should be imported in +page.svelte and passed to components like <Intro />.

Let’s update +page.svelte first.

<script lang="ts">
    import fires from "../data/fires.json";
    import Intro from "../components/Intro.svelte";
</script>
 
<Intro {fires} />

And now let’s update Intro.svelte. To retrieve the fires, we must use the $props() rune. Anything starting with $ in Svelte is called a rune. They are special Svelte functions that are globally available.

Here, the rune will retrieve the fires prop passed to the component, so we can use it inside the component.

<script lang="ts">
    const { fires } = $props();
 
    const nbFires = fires.features.filter((d) => d.properties.isFire).length;
</script>
 
<h1>Wildfires in Canada</h1>
<p>
    The map below shows the {nbFires} wildfires reported in 2023. The taller the
    spikes, the larger the fires.
</p>
 
<style>
    h1 {
        text-decoration: underline;
    }
</style>

Currently, our types for fires in Intro.svelte are quite loose. We can add an explicit type, like we would in regular functions, to make sure the right thing is being passed on. Here, the type is a bit convoluted because we are working with a GeoJSON, but don’t worry about it. We’ll practice more.

<script lang="ts">
    const { fires }: { 
      fires: { features: { properties: { isFire: boolean | null } }[] } 
    } = $props();
 
    const nbFires = fires.features.filter((d) => d.properties.isFire).length;
</script>
 
<h1>Wildfires in Canada</h1>
<p>
    The map below shows the {nbFires} wildfires reported in 2023. The taller the
    spikes, the larger the fires.
</p>
 
<style>
    h1 {
        text-decoration: underline;
    }
</style>

Here, using a prop might not seem very interesting because we are using fires with only one component.

But when you start having multiple components using the same data, they are very useful. They avoid reimporting the same data or recomputing the same calculation multiple times, keeping your web application fast and all of your components in sync. 🚀

Using states

$state rune

It’s now time to make our project reactive. Let’s say that we want the user to pick a province and we want the fires to be filtered based on their choice.

To do that, we need a reactive state that can be created with the $state rune. Svelte will automatically look at our code and update anything related to this state when it changes. It’s a little bit like the event listeners we saw in the previous lessons, but on steroids! 💥

In +page.svelte, let’s create a province state. At first, the province is Quebec.

Then let’s bind it to the Select.svelte component that was created when setting up with setup-sda. The Select is a drop-down menu that expects three props:

• The value, which is our province state. By using :bind, we tell Svelte we want this state to change with the value selected by the user.
• The options in the menu, which are the Canadian provinces.
• A label, which is important for accessibility.

For now, let’s pass province to <Intro /> to update the headline.

<script lang="ts">
    import fires from "../data/fires.json";
    import Intro from "../components/Intro.svelte";
    import Select from "../components/Select.svelte";
 
    let province = $state("Quebec");
</script>
 
<Select
    bind:value={province}
    options={[
        "Northwest Territories",
        "Yukon",
        "Nunavut",
        "Alberta",
        "Saskatchewan",
        "British Columbia",
        "Manitoba",
        "Quebec",
        "Newfoundland and Labrador",
        "Ontario",
        "New Brunswick",
        "Nova Scotia",
    ]}
    label="Pick a province:"
/>
<Intro {fires} {province} />

And then we update Intro.svelte to retrieve the province and update the headline with it.

<script lang="ts">
    const {
        fires,
        province,
    }: {
        fires: { features: { properties: { isFire: boolean | null } }[] };
        province: string;
    } = $props();
 
    const nbFires = fires.features.filter((d) => d.properties.isFire).length;
</script>
 
<h1>Wildfires in {province}</h1>
<p>
    The map below shows the {nbFires} wildfires reported in 2023. The taller the
    spikes, the larger the fires.
</p>
 
<style>
    h1 {
        text-decoration: underline;
    }
</style>

Now, when you pick a new province, Svelte knows that the province state has to be updated. And since the province state is passed to the <Intro /> component, Svelte also knows that this component needs to be updated too. Magic! 🪄

$derived rune

Updating the headline is a step in the right direction, but we need to filter the fires as well.

For that, we could create a derived state with the $derived rune. In the code below, anytime province updates, provinceFires will be updated too, and we can pass this derived state to <Intro />.

<script lang="ts">
    import fires from "../data/fires.json";
    import Intro from "../components/Intro.svelte";
    import Select from "../components/Select.svelte";
 
    let province = $state("Quebec");
    let provinceFires = $derived(
        fires.features.filter((d) => d.properties.province === province),
    );
</script>
 
<Select
    bind:value={province}
    options={[
        "Northwest Territories",
        "Yukon",
        "Nunavut",
        "Alberta",
        "Saskatchewan",
        "British Columbia",
        "Manitoba",
        "Quebec",
        "Newfoundland and Labrador",
        "Ontario",
        "New Brunswick",
        "Nova Scotia",
    ]}
    label="Pick a province:"
/>
<Intro {provinceFires} {province} />

Because we replaced fires with provinceFires, we need to update <Intro />. Also, we now need to derive nbFires since provinceFires is a state.

<script lang="ts">
    const {
        provinceFires,
        province,
    }: {
        provinceFires: { properties: { isFire: boolean | null } }[];
        province: string;
    } = $props();
 
    const nbFires = $derived(
        provinceFires.filter((d) => d.properties.isFire).length,
    );
</script>
 
<h1>Wildfires in {province}</h1>
<p>
    The map below shows the {nbFires} wildfires reported in 2023. The taller the
    spikes, the larger the fires.
</p>
 
<style>
    h1 {
        text-decoration: underline;
    }
</style>

Isn’t this awesome? Now, each time a user selects a Canadian province in the drop-down menu, the headline and the number of fires are updating instantly! 🥳

Other runes

There are other useful runes:

• $inspect is like a console.log but for states. It will log states only when they are initialized or updated. And it logs things only while you’re developing your website. Once your site is live in production, it won’t log anything.
• $effect is a little bit like $derived, but for more complicated operations or to make specific libraries work. One key thing: it triggers only in the browser. Svelte tries to pre-render your page as much as possible when building your website. But what you put in an $effect won’t be pre-rendered.

We’ll practice these in the next projects.

Adding the dataviz

So far, we created a map with SDA and Plot. The drawMap function is in the sda/helpers/visualizeData.ts file. Let’s refactor our code a little bit to be able to use it with both SDA and Svelte.

Create a new file drawMap.ts in src/helpers/. We put it in the src/ folder (and not sda/) so Svelte will be able to use it. And let’s put the function in it and export it. We bring the Plot imports and we transform the arrow function into a named function.

import { geo, plot, spike } from "@observablehq/plot";
 
export default function drawMap(
  data: { features: { properties: { [key: string]: unknown } }[] },
) {
  const firesPoints = data.features.filter(
    (feature) => feature.properties.isFire,
  );
  const provincesPolygons = data.features.filter(
    (feature) => !feature.properties.isFire,
  );
 
  return plot({
    projection: {
      type: "conic-conformal",
      rotate: [100, -60],
      domain: data,
    },
    length: {
      range: [1, 200],
    },
    color: {
      legend: true,
    },
    marks: [
      geo(provincesPolygons, {
        stroke: "lightgray",
        fill: "whitesmoke",
      }),
      spike(firesPoints, {
        x: (d) => d.properties.lon,
        y: (d) => d.properties.lat,
        length: (d) => d.properties.hectares,
        stroke: (d) => d.properties.cause,
        fillOpacity: 1,
        fill: (d) => {
          if (d.properties.cause === "Human") {
            return "#b5caff";
          } else if (d.properties.cause === "Natural") {
            return "#ffe6a8";
          } else {
            return "#ffb9ad";
          }
        },
      }),
    ],
  });
}

Now sda/helpers/visualizeData.ts can use that function.

import { SimpleTable } from "@nshiab/simple-data-analysis";
import drawMap from "../../src/helpers/drawMap.ts";
 
export default async function visualizeData(fires: SimpleTable) {
  await fires.logTable();
 
  await fires.writeMap(drawMap, "./sda/output/map.png");
}

And… we can reuse this function for our webpage!

Let’s create a new component in src/components/Map.svelte with the code below.

<script lang="ts">
    import drawMap from "../helpers/drawMap";
 
    const {
        provinceFires,
    }: {
        provinceFires: { properties: { [key: string]: unknown } }[]
    } =
        $props();
 
    function appendMap(div: Element) {
        const map = drawMap({
            features: provinceFires,
        });
 
        div.append(map);
    }
</script>
 
{#key provinceFires}
    <div use:appendMap></div>
{/key}

There is a lot going on here! Let me explain:

• First, we import our new drawMap function.
• We also retrieve our provinceFires and its type. Note that I am using unknown for the properties type to match the drawMap types. It’s a bit loose, but okay.
• Between the script tags, we create a function appendMap. It expects a div HTML element, which is just an empty basic HTML element. This function calls drawMap and then appends the newly created map to the div. Note that we put the provinceFires in a new object to match the data shape expected by drawMap.
• For the HTML, we use the #key syntax with provinceFires to tell Svelte to rerender anything in between {#key provinceFires} and {/key} when provinceFires changes. The idea behind this is that if provinceFires changes, it means we need to draw a new map.
• We add our div and we tell Svelte to use our appendMap function on it when it renders. So our map will be added to it!

It’s a lot to take in! But just in a few lines, this small component does so much! And don’t worry, we’ll practice these techniques. To be honest, I often just copy and paste this part from my previous projects. 😅

Let’s add this new component to our page.

<script lang="ts">
    import fires from "../data/fires.json";
    import Intro from "../components/Intro.svelte";
    import Select from "../components/Select.svelte";
    import Map from "../components/Map.svelte";
 
    let province = $state("Quebec");
    let provinceFires = $derived(
        fires.features.filter((d) => d.properties.province === province),
    );
</script>
 
<Select
    bind:value={province}
    options={[
        "Northwest Territories",
        "Yukon",
        "Nunavut",
        "Alberta",
        "Saskatchewan",
        "British Columbia",
        "Manitoba",
        "Quebec",
        "Newfoundland and Labrador",
        "Ontario",
        "New Brunswick",
        "Nova Scotia",
    ]}
    label="Pick a province:"
/>
<Intro {provinceFires} {province} />
<Map {provinceFires} />

Hmmm… There is a problem with our map. The little ⚠️ added by Plot means there is a warning in the console. We need to adjust a few things in drawMap to make the projection work.

The problem is that when there is just one province, Plot is not sure what to do with it. We can help it out by specifying that it can be handled as a collection of features—in other words, a GeoJSON.

import { geo, plot, spike } from "@observablehq/plot";
 
export default function drawMap(
  data: { features: { properties: { [key: string]: unknown } }[] },
) {
  const firesPoints = data.features.filter(
    (feature) => feature.properties.isFire,
  );
  const provincesPolygons = data.features.filter(
    (feature) => !feature.properties.isFire,
  );
 
  return plot({
    projection: {
      type: "conic-conformal",
      rotate: [100, -60],
      domain: {
        type: "FeatureCollection",
        features: provincesPolygons,
      },
    },
    length: {
      range: [1, 200],
    },
    color: {
      legend: true,
    },
    marks: [
      geo(provincesPolygons, {
        stroke: "lightgray",
        fill: "whitesmoke",
      }),
      spike(firesPoints, {
        x: (d) => d.properties.lon,
        y: (d) => d.properties.lat,
        length: (d) => d.properties.hectares,
        stroke: (d) => d.properties.cause,
        fillOpacity: 1,
        fill: (d) => {
          if (d.properties.cause === "Human") {
            return "#b5caff";
          } else if (d.properties.cause === "Natural") {
            return "#ffe6a8";
          } else {
            return "#ffb9ad";
          }
        },
      }),
    ],
  });
}

And look at that! Now it works! If you select a different province in the drop-down menu, the map is redrawn with the relevant data! Isn’t this amazing? 🤠

There are still a few issues that we can fix to improve the chart:

• We can create a boolean variable oneProvince to detect when we draw just one province. And when there is just one province:
  • We limit the height to 500 pixels; otherwise, we let Plot decide.
  • We add an insetTop of 50 pixels for Alberta and British Columbia to avoid cut-off spikes.
  • We use the mercator projection without rotation.
• To ensure the scale is the same for the spikes’ height across all provinces, we add a domain to length. This scale is tied to the fires’ hectares values, which range from almost 0 to 1,000,000.
• Some provinces include all causes, but others don’t. So we specify all categories in the color scale.
• Finally, we can add a tip mark with a pointer transform to add a tooltip showing the cause and the hectares burned when the user hovers over the map.

import { geo, plot, pointer, spike, tip } from "@observablehq/plot";
import { formatNumber } from "@nshiab/journalism/web";
 
export default function drawMap(
  data: { features: { properties: { [key: string]: unknown } }[] },
) {
  const firesPoints = data.features.filter(
    (feature) => feature.properties.isFire,
  );
  const provincesPolygons = data.features.filter(
    (feature) => !feature.properties.isFire,
  );
 
  const oneProvince = provincesPolygons.length === 1;
 
  return plot({
    height: oneProvince ? 500 : undefined,
    insetTop: oneProvince &&
        ["Alberta", "British Columbia"].includes(
          provincesPolygons[0].properties.province as string,
        )
      ? 50
      : 0,
    projection: {
      type: oneProvince ? "mercator" : "conic-conformal",
      rotate: oneProvince ? undefined : [100, -60],
      domain: {
        type: "FeatureCollection",
        features: provincesPolygons,
      },
    },
    length: {
      domain: [0, 1_000_000],
      range: [1, 200],
    },
    color: {
      legend: true,
      domain: ["Human", "Natural", "Unknown"],
      range: ["#4269D0", "#EFB118", "#FF725C"],
    },
    marks: [
      geo(provincesPolygons, {
        stroke: "lightgray",
        fill: "whitesmoke",
      }),
      spike(firesPoints, {
        x: (d) => d.properties.lon,
        y: (d) => d.properties.lat,
        length: (d) => d.properties.hectares,
        stroke: (d) => d.properties.cause,
        fillOpacity: 1,
        fill: (d) => {
          if (d.properties.cause === "Human") {
            return "#b5caff";
          } else if (d.properties.cause === "Natural") {
            return "#ffe6a8";
          } else {
            return "#ffb9ad";
          }
        },
      }),
      tip(
        firesPoints,
        pointer({
          x: "lon",
          y: "lat",
          title: (d) =>
            `Cause: ${d.properties.cause}\nHectares: ${
              formatNumber(d.properties.hectares, {
                suffix: " ha",
              })
            }`,
          fontSize: 12,
        }),
      ),
    ],
  });
}

Just to make sure that our changes don’t break our code with SDA, you can stop your terminal (CTRL + C) and run deno task sda. You should see your table in your terminal and the map of the whole country saved as a PNG.

This is wonderful! We are using the same function to draw our map with SDA and with Svelte! It’s the best of both worlds. It’s beautiful. 🥲

Building your website

So far, we have developed our website. Now, it’s time to build it.

In your terminal, stop what’s running and run deno task build. This will tell Svelte to build an optimized and minified version of your code.

After a few seconds, you should see files in the build folder. This is your website! You can now host these files on a server to show your work to the world! 👏

Conclusion

Congratulations! This was your first Svelte project! You created an interactive data visualization for the Web! 🎉

There was a lot in this lesson. Coding for the Web is not an easy task! But with the next projects, you will have enough practice to code your own projects very soon.

If you want to dig more into Svelte, I recommend you follow their excellent tutorial. It’s a bit technical and you might not get everything on the first pass, but it’s an excellent resource.

You can also check the setup-sda example. In a new folder, run deno -A jsr:@nshiab/setup-sda --svelte --example and then run deno task dev. You’ll see a full example in your browser that uses all of the precoded components you saw in src/components, and you can explore the code to learn more.

See you for the next lesson! 😊