Post

Gregor Aisch
@driven-by-data.net

Last week I had the pleasure of finally releasing the #SveltePlot alpha version during my talk at the #SvelteSummit in Barcelona. It's a new visualization framework for @svelte.dev that I've been working on for the past 18 months, so it's about time for a 🧵

Gregor Aisch
@driven-by-data.net

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.

0 reposts13 likes

Gregor Aisch
@driven-by-data.net

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!

Gregor Aisch
@driven-by-data.net

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.

Gregor Aisch
@driven-by-data.net

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.

Gregor Aisch
@driven-by-data.net

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.