Skip to content

Commit

Permalink
add svelte example
Browse files Browse the repository at this point in the history
  • Loading branch information
mbostock authored and Fil committed Aug 21, 2023
1 parent d8c2d4c commit 8d10146
Showing 1 changed file with 30 additions and 0 deletions.
30 changes: 30 additions & 0 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -289,3 +289,33 @@ export default {
```

As with React, to update your plot for whatever reason, simply render a new one and replace the old one. You can find more examples on [our GitHub](https://github.com/observablehq/plot/tree/main/docs) as this documentation site is built with VitePress and uses both client- and server-side rendering for plots!

## Plot in Svelte

Here’s an example of client-side rendering in Svelte. For server-side rendering, see [#1759](https://github.com/observablehq/plot/discussions/1759).

:::code-group
```svelte [App.svelte]
<script>
import * as Plot from '@observablehq/plot';
import * as d3 from 'd3';
let div;
let data = d3.ticks(-2, 2, 200).map(Math.sin);
function onMousemove(event) {
const [x, y] = d3.pointer(event);
data = data.slice(-200).concat(Math.atan2(x, y));
}
$: {
div?.firstChild?.remove(); // remove old chart, if any
div?.append(Plot.lineY(data).plot({grid: true})); // add the new chart
}
</script>
<div on:mousemove={onMousemove} bind:this={div} role="img"></div>
```
:::

See our [Plot + Svelte REPL](https://svelte.dev/repl/ebf78a6a6c1145ecb84cf9345a7f82ae?version=4.2.0) for details.

0 comments on commit 8d10146

Please sign in to comment.