Sverto example

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:

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

It will appear in a div called #mycircles, which I’ve added directly below:

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 dropdown menu that lets you select one of three datasets:

// 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]]
  ]);

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

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

myCircles.data = selectedDataset

And there you go! 🚀

For more help writing Svelte components, check out the Svelte tutorial or take look at some of the examples in the Sverto documentation.