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 🧵 - ThreadSky

driven-by-data.net • 24 days ago

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 🧵

Comments

jesirgb.com•24 days ago

it's interesting we are arriving to similar conclusions for svelte charts

i've been building a prototype kind of thing here, but would be much more opinionated and less based on plot and just relying on d3 itself

hope your project really takes off! excited to try it!!

https://bsky.app/profile/jesirgb.com/post/3ljvpgpknec25

mikebrondbjerg.bsky.social•14 days ago

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?

driven-by-data.net•14 days ago

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

mikebrondbjerg.bsky.social•14 days ago

Brilliant! an (almost) interchangeable grammar would be ideal!! Thanks Gregor!

miskaknapek.bsky.social•23 days ago

great work making #datavis more accessible, and moving the field on :)

thanks for it!

driven-by-data.net•24 days ago

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.

driven-by-data.net•24 days ago

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!

driven-by-data.net•24 days ago

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.

driven-by-data.net•24 days ago

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.

driven-by-data.net•24 days ago

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.

driven-by-data.net•24 days ago

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.

davidjablonski.bsky.social•24 days ago

exciting!! taking a good look at this for our work @klimadashboard.bsky.social, where we’ve been looking for something like this for a long while 👀 will the talk be available online at some point?

bothness.bsky.social•15 days ago

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? https://svelte.dev/playground/c86cfac0d4b145b39d4da7d0bc2e79bd?version=5.33.0

driven-by-data.net•14 days ago

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.

bothness.bsky.social•14 days ago

Thanks Gregor. I'll experiment with a few approaches. For background, we used svelte/animate in our existing (very limited) #LayerCake driven charts library, but have been keen to explore the concept of leveraging CSS transitions for enhanced performance. https://onsvisual.github.io/svelte-charts/

creatuluw.bsky.social•21 days ago

Great piece of work.

Comments

Posting Rules

Reply