How to go from ObservableHQ prototypes to full blown (Svelte) projects?

Community Help
1

Hi all,

so far I have a bit hesitant to use Observable in my current professional workflow. I absolutely see the power of Observable, but I am not sure how you would reuse the things you do in an Observable notebook in a more full blown project (without having to rebuild a big chunk of it perhaps??)

For most of my full blown projects I use Svelte as an application framework, and of course D3 as a kind of utility library for my visualizations. Would it be possible to do some prototyping first in Observable, and then continue that work to convert that to a full blown Svelte page/visualiziation? And I would not mean embedding cells using an iframe, rather doing preliminary work, like data preparation, data exploration, etc. in Observable, and then continue turning that in a full blown Svelte project?

Or is Observable maybe not really suited for that, but rather doing some initial work here, then “leave it there” and start using what you learned when you start building your full blown project? So, observable is more for standalone explorations/prototypes/interactive documents, but not the start of a full blown project???

Or, for instance, say I have a utility function developed in Observable, could I for instance import that into my project as some kind of npm package?

I would really be interested in examples or suggestions from people where they have incorporated Observable in a way that it becomes an integrated part of a full blown project or of their workflow.

Thank you in advance!!
Jan Willem Tulp

1 Like
2

Hi Jan,

Svelte and Observable are my two primary tools for data visualization, but I only use them in tandem occasionally, say, to manipulate data or test out functions for some piece of code with which I’m having trouble. A recent example is that I needed to take some lat,long data and jitter it, so I made an Observable notebook to look at different ways to generate jittered points and visualize them, then I exported that data for a Svelte/Mapbox app.

Less often do I prototype visualizations that I’ll later port to Svelte. Your instinct seems right to me that the code doesn’t swap easily, e.g, to create a bunch of elements, I’d use htl and map (or D3 join) in Observable and {#each} in Svelte.

Svelte and Observable overlap in both being reactive, which makes development and experimentation much easier in either environment, but also means that I’m less likely to switch back and forth compared to, say, if I were still developing in D3 + vanilla JS.

By the way, I enjoyed your bird banding visualization.

Best,
Evan

1 Like