Skip to content

Commit

Permalink
Replace Svelte example with runes (v5.0.0+) and rm deprecated onmouse…
Browse files Browse the repository at this point in the history
…move (#2242)

* replace with runes and rm depr onmousemove

* rm whitespace

* readd whitespace in script tag

* updated sandbox

---------

Co-authored-by: Vincent van der Wal <[email protected]>
Co-authored-by: Philippe Rivière <[email protected]>
  • Loading branch information
3 people authored Nov 24, 2024
1 parent b2b587a commit 283d8e1
Showing 1 changed file with 9 additions and 9 deletions.
18 changes: 9 additions & 9 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -302,29 +302,29 @@ Here’s an example of client-side rendering in Svelte. For server-side renderin

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

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

## Plot in Node.js

Expand Down

0 comments on commit 283d8e1

Please sign in to comment.