Tweak Circles example

Author: James Goldie

Circles.svelte

@@ -16,15 +16,15 @@
 
 </script>
 
-<!-- we use svelte's in/out transitions for entering and leaving dom elements,
+<!-- we use svelte's in/out transitions for entering and exiting dom elements,
      and vanilla css transitions for retained elements that change. the
      #each block means we create an svg <circle> for each element of data -->
 <svg>
   {#each data as d, i (i)}
     <circle
       in:fly="{{y: 100}}" out:fly="{{y: 100}}"
       style={"transition: all 1s ease-out"}
-      cx={15 * i + "%"} cy="50%" r={d}
+      cx={(15 * i + 10) + "%"} cy="50%" r={d}
       fill="black"
        />
   {/each}

example.qmd

@@ -8,7 +8,7 @@ sverto:
     - Circles.svelte
 ---
 
-Here's an example of how to use the included example Svelte component, `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`:
 
@@ -44,9 +44,11 @@ viewof selectedDataset =
 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).
+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).
+