Post

Hi @driven-by-data.net !! 👋 This is a really exciting and welcome. Reactive marks with transitions FTW!! For us, we'd probably use BOTH Obs Plot and SveltePlot. My question.. is there an intention to keep SveltePlot closely aligned with Obs Plot or do you see them diverging?

I think I'd like to have all features from Obs Plot in SveltePlot and keep their APIs closely aligned. There are already some minor differences and SveltePlot introduced some features not yet available in Obs Plot (e.g. brushing). But I would like the grammar to be almost interchangeable, ideally

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.

Really exciting stuff... We were looking to overhaul our #Svelte charts library at #ONS but this might meet our needs and more! Is there a mechanism you'd recommend for transitions? I tried this quick hack using CSS, but wondering if you had another approach in mind? svelte.dev/playground/c...

You can also use Tween from svelte/animate to transition the data and domain. But I’m still waiting for a replacement for the in: out: syntax using @attach to support passing svelte transitions through the mark components.