example.qmd

---
title: Sverto example
date: last-modified
filters:
  - sverto
sverto:
  use:
    - Circles.svelte
---

This document shows you how to use a basic example Svelte component called `Circles.svelte`.

Create one using `fileName.default()`, where `fileName` is the file name without `.svelte`:

```{ojs}
myCircles = new Circles.default({
  target: document.querySelector("#mycircles")
});
```

It will appear in a [div](https://quarto.org/docs/authoring/markdown-basics.html#divs-and-spans) called `#mycircles`, which I've added directly below:

:::{#mycircles}
:::

Now the fun part - updating our visual when our document changes. It's as simple as changing the prop using `componentName.propName =`.

For example, here are three datasets and an [Observable Inputs](https://observablehq.com/documentation/inputs/overview) dropdown menu that lets you select one of three datasets:

```{ojs}
// here are some datasets...
allDatasets = new Map([
    ["Dataset A", [5, 15, 25, 17, 8]],
    ["Dataset B", [25, 5, 5]],
    ["Dataset C", [12, 5, 8, 21, 5]]
  ]);
```

```{ojs}
viewof selectedDataset =
  Inputs.select(allDatasets, { label: "Selected dataset" });
```

Now we can update the prop `data` of the visual `myCircles` using:

```{ojs}
//| output: false
myCircles.data = selectedDataset
```

And there you go! 🚀

For more help writing Svelte components, check out the [Svelte tutorial](https://svelte.dev/tutorial/basics) or take look at some of the examples in the [Sverto documentation](https://sverto.jamesgoldie.dev).