Yet another attempt to go from Observable to VanillaJS

I’m a huge fan of D3 and learned from the many examples in the blocks. I’m trying to get an Observable into a Block format so I can extract just the pieces I need, I don’t want the Observable libraries in my modules, I don’t want to embed the notebook, I just want the plain old Vanilla JS so I can put it in my module. I’ve seen a few articles that do this for some blocks, but I can’t get it working for this one:

Could someone help explain how to achieve this or just create a block? I love the concept of Observable but always find myself really frustrated when trying extract plain old Vanilla Javascript, I wish there was a button I could press to automatically generate a Block. Thanks so much for any help!

Best,
Shawn

Hi Shawn,

I don’t think there is an official way to do that. Have you read other posts here on the topic?

Here is another great resource if you’re looking into convert a notebook to pure javascript GitHub - severo/observable-to-standalone: Importing an Observable notebook into a standalone application

I know this doesn’t respond to your main question. However when you use observable to write code, interactive charts, dynamic data, etc you’re probably using all the cool reactivity feature its runtime provide. In that case, converting to vanilla js can get complicated. Cells that depend on values from other cells are automatic updated How Observable Runs / Observable | Observable, and all that logic might be hard to implement from scratch.

Edit: For reference here is the BubbleMap converted to vanilla. Now, the order of cells are very important, the code has to run async await, so resources are ready in order to run next steps. All the reactivity is lost. This notebook was relatively simple to convert, it doesn’t have much interactivity. I wouldn’t do the same some for a complex notebook.

4 Likes

Radames,

Yes, I did view those posts but got caught up on the asynchronous load of files. It looks like you’ve addressed that nicely in your pen, thanks so much for your help. I realize the reactivity is removed, I typically create realtime visualizations where the data is streaming in a JSON feed and simply need a D3 component to update the visualization with the new data. Thanks so much for your help this is exactly what I was looking for!

Best regards,
Shawn

2 Likes