plots in Svelte

Community Help
1

Hi,

I have a basic implementation of using plot in svelte, but I am not understanding how to translate the examples/tutorials into this syntax as the options is a json object that seems to include Plot.dot for example. Would anyone be able to show how it’s done in a most simplistic way, e.g. making a scatter plot using the data variable? There’s a REPL for the svelte implementation here:

(log in with GitHub, save/fork, edit save and repost link)

Many thanks!

2

Let’s use a more recent version of Plot in the component:

Plot.svelte:

<script>
  import * as Plot from "@observablehq/plot@0.6";
  export let options;
  function addChart(node) { node.appendChild(Plot.plot(options)); }
</script>

{#key options}
  <div use:addChart {...$$restProps} />
{/key}

In the App, we’ll want to distinguish PlotRender (the Svelte component) and Plot, by importing them separately. We’ll also make the charts transparent instead of the default white background.

App.svelte:

<script>
  import * as Plot from "@observablehq/plot@0.6";
  import PlotRender from './Plot.svelte';
  let a = 100;
  let b = 0;
  const data=[{x:0,y:1},{x:1,y:4},{x:2,y:2},{x:3,y:5},{x:4,y:6},{x:5,y:45}]
</script>

<PlotRender options={{
  x: { domain: [a, b] },
  grid: true,
  marks:[
    Plot.tickX(data, {x:"x"})
  ],
  style: "background: transparent;"
}} />
<label>From <input type=number bind:value={a}></label>
<label>To <input type=number bind:value={b}></label>
3 Likes
3

many thanks, I understand now how to use it! cheers