Is it possible embed chart into Note app ?

Community Help
5

Nice find @steveyang331! I whipped up an embed code generator based on Jeremy’s that generates Hiccup code: https://observablehq.com/@ballingt/handy-roam-research-embed-code-generator

The gist is that pasting code like this into Roam Research…

:hiccup [:iframe {
    :height 500
    :width 600
    :srcdoc "<div id=\"observablehq-b9a930e6\"></div>
<script type=\"module\">
import {Runtime, Inspector} from \"https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js\";
import define from \"https://api.observablehq.com/d/eceaa744227c4fea.js?v=3\";
const inspect = Inspector.into(\"#observablehq-b9a930e6\");
(new Runtime).module(define, name => (
  name === \"vegaPetalsWidget\"
  || name === 'viewof sepalLengthLimits'
  || name === 'viewof sepalWidthLimits') && inspect());
</script>
"}]

…results in something like this:

image
image1268×1220 72.7 KB

This could be cleaned up a bit: I didn’t style the iframe beyond setting its dimensions, and I don’t think an iframe is actually necessary at all! It was just the simplest way to make this embed code generator. Suggestion are welcome on that notebook!

Any other interesting places people have found to embed Observable cells?

3 Likes