Embedding a bl.ock in observable

Community Help
1

I am struggling with the following: is there a straight forward way to embed a bl.ock in an observable? I would like to describe my learnings when I built this https://bl.ocks.org/ee2dev/66c18f6626e186db0c252a57fceb5327 in an observable and would like to start off with showing that animation.
Is there a general guideline how to best

  • include all scripts
  • include styles
  • how to map the DOM element (div.chart) to a cell.

I struggled with my tries despite the few lines of code.
I would just like to know, if there is an easy to do this or is it a bad fit to do this ?

2

Hi there,

Are you trying to embed the block in an Observable notebook, or port it to Observable - do you want the code to be in Observable, or to just show the bl.ocks.org there?

For the former, the best bet is to use an iframe that points to rawgit for the Gist:

For porting code to Observable, check out the introduction notebooks: for this example, you’ll want to:

  • include the scripts with require instead of script tags
  • reference elements by variables, rather than selectors (see the code smells notebook).

Here’s an example of that: https://beta.observablehq.com/d/c43f8a695d68f629

The styles defined by startext.css are a bit overbroad - they override the existing text styles for the notebook. Ideally you’d modify that so that they’re scoped to the display only.

1 Like
3

Thanks, Tom - that reply came in lightening speed and was super helpful to me!
Keep up that great work!
Mihael.