Skip to content

add pages of examples translated from ObservablePlot docs #72

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.

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

Draft
wants to merge 20 commits into
base: main
Choose a base branch
from

Conversation

jamesscottbrown
Copy link
Contributor

I added some pages of examples auto-translated from the Observable Plot Plot gallery using my https://github.com/jamesscottbrown/Sveltify-plot tool (which is still a WIP, but good enough for these examples).

Lots of thing sworked, but this also surfaced some issues.

Copy link

netlify bot commented May 28, 2025

Deploy Preview for svelteplot ready!

Name Link
🔨 Latest commit 17c888c
🔍 Latest deploy log https://app.netlify.com/projects/svelteplot/deploys/683d4cf05332c900087aeca8
😎 Deploy Preview https://deploy-preview-72--svelteplot.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Contributor

@gka gka left a comment

Choose a reason for hiding this comment

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

Hey, I really like this idea, thanks for working on it.

Actually, a proper "examples" section was on my todo list for a while now, too.

So I took your initiative as inspiration to get it working. The setup I came up with is a bit simpler, you can find it in the repo now under /src/routes/examples.

A couple of differences in my approach:

  • each example plot must be in its own Svelte file, like this one
  • the title is exported via <script module>
  • the category pages automatically generate an index of all example plots, see https://svelteplot.dev/examples/line, for instance
  • the example code is automatically added below the plot, like here https://svelteplot.dev/examples/axis/datawrapper-ticks
  • I added a script pnpm run screenshots that generates screenshots of all example plots so the index pages can show them as little thumbnails

Given this new setup, I'd suggest the following procedure for adding more examples, including from the Observable Plot gallery:

  • For examples that are already supported in SveltePlot we can open PRs that include multiple examples at once. It would be nice if you could run the screenshot script before opening the PR.
  • For examples that are not yet supported in SveltePlot I would prefer having separate PRs for each example, so we can hold off on merging until the features are implemented in SveltePlot (or we properly document API differences)

What do you think?

@jamesscottbrown
Copy link
Contributor Author

That seems a good approach: my intention was mostly to quickly translate a lot of examples to get a good sense of how much was working. I'll open Issues for the broken examples.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants
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