Skip to content

add links to 'Why SveltePlot' page #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 22, 2025
Merged

add links to 'Why SveltePlot' page #57

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions src/routes/why-svelteplot/+page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Why SveltePlot?
description: Why do we need yet another Svelte visualization framework?
---

SveltePlot combines the concise API and concepts of Observable Plot with Svelte reactivity. It is not just a Svelte-wrapper, but re-implemented from scratch on top of D3. But what makes SveltePlot better than the existing visualization frameworks in Svelte?
SveltePlot combines the concise API and concepts of [Observable Plot](https://observablehq.com/plot/) with [Svelte](https://svelte.dev/) reactivity. It is not just a Svelte-wrapper, but re-implemented from scratch on top of [D3](https://d3js.org/). But what makes SveltePlot better than the existing visualization frameworks in Svelte?
Copy link
Contributor

Choose a reason for hiding this comment

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

Should be “Svelte wrapper” without the - I think.


## Layered grammar of graphics

Expand Down Expand Up @@ -93,7 +93,7 @@ You can think of marks as the building blocks for your visualizations -- or the

[fork](https://svelte.dev/playground/b329bb028a5445ba8f884291f0475be6?version=5)

This makes it a lot easier to iterate over different ideas for visualizations. For instance, if we want to combine the dot plot above with a line chart, we can just throw in a Line mark as extra layer.
This makes it a lot easier to iterate over different ideas for visualizations. For instance, if we want to combine the dot plot above with a line chart, we can just throw in a [Line mark](/marks/line) as extra layer.

```svelte live
<script>
Expand Down Expand Up @@ -149,7 +149,7 @@ This makes it a lot easier to iterate over different ideas for visualizations. F
</Plot>
```

And if we wanted to add uncertainty ranges, we can add a rule mark as well.
And if we wanted to add uncertainty ranges, we can add a [Rule mark](/marks/rule) as well.

```svelte live
<script>
Expand Down Expand Up @@ -244,7 +244,7 @@ Take the following example, where you can filter the data using the [filter](/tr
</Plot>
```

Here's an example where we're binding a live-updated dataset to a line mark. Note how the `<path>` elements rendering the line and area get re-used, and ticks and grid lines get moved around instead of being re-created on every frame:
Here's an example where we're binding a live-updated dataset to a [Line mark](/marks/line). Note how the `<path>` elements rendering the line and area get re-used, and ticks and grid lines get moved around instead of being re-created on every frame:

```svelte live
<script lang="ts">
Expand Down Expand Up @@ -336,6 +336,7 @@ Here's an example where we're binding a live-updated dataset to a line mark. Not
[fork](https://svelte.dev/playground/e136cdefec7943cba5e6d7b604a2e50c?version=5)

Also, simply by being a Svelte framework, SveltePlot can support tweens and transitions! In the following plot, we're using the [Tween state](https://svelte.dev/docs/svelte-motion#Tween) from `svelte/motion` to smoothly update the vertical domain whenever the data changes.
Try clicking on the bars to change their values.

```svelte live
<script>
Expand Down Expand Up @@ -400,7 +401,7 @@ Also, simply by being a Svelte framework, SveltePlot can support tweens and tran

## Easy to extend

You can extend SveltePlot by injecting regular Svelte snippets. For instance, the Line mark allows you to provide custom markers by passing a `marker` snippet. So why no use animated line markers, just because we can?
You can extend SveltePlot by injecting regular Svelte snippets. For instance, the [Line mark](/marks/line) allows you to provide custom markers by passing a `marker` snippet. So why no use animated line markers, just because we can?

```svelte live
<script lang="ts">
Expand Down Expand Up @@ -493,4 +494,4 @@ You can extend SveltePlot by injecting regular Svelte snippets. For instance, th

## Built on top of D3

Like its inspiration Observable Plot, SveltePlot is built on top of D3.
Like its inspiration Observable Plot, SveltePlot is built on top of [D3](https://d3js.org/).
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy