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