Skip to content

docs: upgrade svelte example to use runes#4050

Open
shivan-eyespace wants to merge 1 commit into
d3:mainfrom
shivan-eyespace:patch-1
Open

docs: upgrade svelte example to use runes#4050
shivan-eyespace wants to merge 1 commit into
d3:mainfrom
shivan-eyespace:patch-1

Conversation

@shivan-eyespace
Copy link
Copy Markdown

Since the svelte 5 upgrade. I have decided to contribute and update the svelte example in the "Getting Started" documentation to include the rune syntax.

I also updated the playground examples. As well as removed an extraneous example and the incorrect playground.

CleanShot.2025-09-20.at.22.29.46.mp4

Keen for any feedback and hope this helps.

@shivan-eyespace shivan-eyespace marked this pull request as ready for review September 20, 2025 10:34
Copy link
Copy Markdown

@mchoo7 mchoo7 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also applies to repl

Comment thread docs/getting-started.md
let x = $derived(d3.scaleLinear([0, data.length - 1], [marginLeft, width - marginRight]));
let y = $derived(d3.scaleLinear(d3.extent(data), [height - marginBottom, marginTop]));
let line = $derived(d3.line((d, i) => x(i), y))
</script>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Blank line between script and svg?

Comment thread docs/getting-started.md
let line = d3.line((d, i) => x(i), y);
$effect(()=> d3.select(gy).call(d3.axisLeft(y)))
$effect(()=> d3.select(gx).call(d3.axisBottom(x)))
</script>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants