https://github.com/svelteplot/svelteplot

Svelte-native plotting framework based on the grammar of graphics
https://github.com/svelteplot/svelteplot

data-analysis data-visualization grammar graphics interactive-visualization svelte

Last synced: 3 days ago
JSON representation

Svelte-native plotting framework based on the grammar of graphics

• Host: GitHub
• URL: https://github.com/svelteplot/svelteplot
• Owner: svelteplot
• License: other
• Created: 2023-11-21T10:49:03.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2026-01-10T02:58:41.000Z (12 days ago)
• Last Synced: 2026-01-11T00:44:45.439Z (11 days ago)
• Topics: data-analysis, data-visualization, grammar, graphics, interactive-visualization, svelte
• Language: TypeScript
• Homepage: https://svelteplot.dev
• Size: 104 MB
• Stars: 334
• Watchers: 9
• Forks: 25
• Open Issues: 67
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md
  • Agents: AGENTS.md

Awesome Lists containing this project

README

          
# SveltePlot

![License](https://img.shields.io/npm/l/svelteplot.svg) ![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg) [![Netlify Status](https://api.netlify.com/api/v1/badges/81163b24-76c1-4256-833c-919284f211ed/deploy-status)](https://app.netlify.com/projects/svelteplot/deploys)



SveltePlot is a [Svelte](https://svelte.dev/)-native visualization framework based on the [layered grammar of graphics](https://vita.had.co.nz/papers/layered-grammar.html) principle. It's API is heavily inspired by [Observable Plot](https://github.com/observablehq/plot). Created by Gregor Aisch.

## Development

Clone the repo and install dependencies:

```bash

git clone git@github.com:svelteplot/svelteplot.git

cd svelteplot

pnpm install

```

Run the development server:

```bash

pnpm dev

```

Open http://localhost:5173 in your browser.

## Testing

Run unit tests:

```bash

pnpm lint

pnpm test

```

You should also run the visual regression tests:

```bash

pnpm test:visual

```

This will generate screenshots and compare them with the expected results.

```bash

pnpm vi:report

```

To see the differences side by side you can open http://localhost:5173/\_\_vr/report.html