This is a (belated) write-up of my Bluesky thread from last week.

---

Last week I had the pleasure of finally releasing the SveltePlot alpha version during my talk at the SvelteSummit conference in Barcelona (I’ll link the talk as soon as it is available). It’s a new visualization framework for Svelte that I’ve been working on for the past 18 months, so it’s about time for a thread blog post.

Like the fantastic Observable Plot — which served as huge inspiration! — SveltePlot was born out of the need for a plotting framework that is both flexible and concise. It comes with smart, data-driven defaults that make it easy to start coding graphics from scratch, without chart templates.

But unlike Observable Plot, SveltePlot is written as pure Svelte components and is fully reactive. When your data or plot state changes, the DOM gets updated instead of replaced, allowing for tweens and transitions in between states. Needless to say that it’s powered under the hood by D3.js!

There are other great Svelte-based visualization frameworks around, each comes with its own advantages and use cases, such as LayerCake or LayerChart. SveltePlot doesn’t want to be “better” but I think it’s different in some regards.

Unlike LayerCake, SveltePlot comes with “all batteries included”, featuring a rich set of data transforms and marks to shape and display your data. Helper components make it easier to add interactivity to your plot, such as tooltips or brushing.

Unlike LayerChart, SveltePlot is not built on top of a CSS framework like TailwindCSS. All styles are applied inline or (optionally) via emotion/css managed css classes. SveltePlot also follows the grammar of graphics principles more strictly, offering no “scatterplot” or “histogram” components.

SveltePlots emphasize on developer experience makes it a great pick in scenarios where you need to rapidly iterate over visualization ideas in code and then want to turn your prototypes into publishable graphics without switching languages or re-implementing them in a different framework.

It’s not the best pick if you’re looking for high performant data-dense displays. It also adds a lot more kB to your bundle size than if you’d just write clean Svelte + D3.js code. Perhaps that’s something we can improve in the future with the coming async Svelte features!

SveltePlot is not a component library but a grammar of graphics. Think of it as a language for describing a huge range of different graphics.

SveltePlot is not backed by any company, so if we want to make it work, we need to work together! It’s not officially production ready, yet. There are bugs you can help to find, document and fix, and a lot of tests need to be added. Join our Discord chat if you would like to help!

I made a documentation for SveltePlot that lists all the features and shows a lot of examples that you can fork and edit on the Svelte playground. You can help improving this website, too!

Finally, SveltePlot is just an idea. Maybe it’s not the best one, we’ll see! Big thanks to everyone on whose shoulders I am standing, including Mike Bostock, Jeff Heer, Philippe Riviere, Rich Harris, Hadley Wickham, Sean Lynch, Michael Keller, and — of course — the late Leland Wilkinson.

You’re all my heroes!! ♥️