Import code from ObservableHQ project to a Framework project

New To Observable
1

Hi! I’m exploring Observable Framework and it’s really interesting!

There is one thing however that i don’t understand, and probably I’m missing something.

How can I export/import a project from the observablehq platform into a Framework project?

I tried by using “export/download code” but it seems to create a package useful to be self-hosted but not relaly compatible with Framework.

So, which is the best way for doing that? In my practice would be very useful since you can draft and collaborate on a project using observableHq and then refine it using Framework.

furthermore, is there a way to import cells from Other observable projects? (e.g. swatches from Color legend / D3 | Observable)?

2 Likes
2

Ho @mamauri

Good question! There are 2 ways to support that workflow.

  1. There is a Framework convert command (not documented yet) that converts a public notebook to a .md file that you can use in Framework.
    yarn observable convert <url>

  2. You can also copy and paste the cells into a .md file (you can copy and paste multiple cells…) and do some minor editing.

In both cases, if you are using notebooks contributed by others, please ensure that it has an open-source license and include proper attribution.

For the d3 color legend question, it may just be easier to use Observable Plot :slight_smile:

2 Likes
3

Thanks @Cobus!

Love this hidden command :slight_smile: thank you for the heads up, I will pay attention to licenses when reusing code.

I’ll also look better int plot, since usually i write my own charts i got used to import legends in that way.

1 Like
4

One of the challenge, I noticed is the “import of cells from other notebook”. It does not work !!.

5

I appreciate the response and the hidden command; I have been wondering about maintaining workflow continuity between ObservableHQ and Framework.

furthermore, is there a way to import cells from Other observable projects? (e.g. swatches from Color legend?

@Cobus: I would also appreciate it if you could consider this a general inquiry about the import cell functionality rather than focusing on the color legend example. Ideally, I would (fetch,) pre-process, and pre-visualize my datasets on ObservableHQ, then import the processed datasets into Framework using data loaders. Is there any way to utilize the existing import cell functionality from ObservableHQ within the Framework?

Update: I have read that importing entire notebooks into Framework isn’t supported in other posts here and on GitHub, but I’m curious about importing specific cells. If there were a way to fetch preprocessed (live*) data from Observable, it would significantly enhance the feasibility of a Framework-based main workflow for me.

* E.g., Yahoo Finance → ObservableHQ Preprocessing → Framework Visualization

6

As best I can tell you can import entire notebooks into framework using the code described at Advanced embeds | Observable documentation, and these will update automatically in framework as the notebook is updated. The only problem I see with this is that the code for things like functions are not displayed by default (see Importing notebook into framework with visible code - #6 by dhowe)

1 Like
7

You can import and display the output of a cell from a notebook through the normal embed functionality in notebooks. You can simply grab the JavaScript embed code and paste it into your Framework markdown file. See the documentation.

In terms of your workflow… I am not sure what advantage you get by inserting the notebook (‘ObservableHQ Preprocessing’) into this flow, vs. writing the same code as you would have in the notebook in your markdown file. Could you expand on that a bit? You can write the same code in Framework as in notebooks, so I would think you can prototype in the notebook, and then just copy the code into JavaScript blocks (cell-by-cell) in your markdown file.