Is it possible embed chart into Note app ?

Community Help
1

such as ,embed chart into Google doc, dropbox paper alike notebook app .

That real JS script code can’t embed notebook app.

Thanks.

2

My favorite note app lately is Observable, which handles embedding arbitrary web content, including Observable notebooks, pretty well. :wink:

I haven’t seen any embeds of Observable into things like Google Docs or Dropbox Paper though. Any platform that allows arbitrary HTML+JavaScript to be embedded should work well with Observable, so I bet there are some options. I’d love to see TiddlyWiki embeds for example.

Any platform which allows plugins that allow arbitrary HTML+JavaScript would work too: I’ve tried Airtable custom blocks, there was a post about Bubble.io on the forum a while ago, but I don’t know if that worked out. Observable strives to be a reliable, convenient place for your content, which includes being able to flexibly embed it. It would be great to collect examples, are there any other interesting places folks have embedded Observable cells or notebooks?

1 Like
3

Maybe there’s 2 solutions to embed Observable HTML+ JS code. into Notebook doc app.

  1. Observable support it with embed link ,like https://observablehq.com/embed/xxxxxx
  2. Build a website on Github with Zeit or other place, embed html file with Observable HTML+ JS code.

I guess 2nd choice is possible.

4

I found Roam support hiccup code .

image
image863×643 27.3 KB

image
image911×346 20.8 KB

@thomasballinger

1 Like
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?

2 Likes
6

@thomasballinger

WOW !!!

I have to say YOU 're really bright !!!

As my code level, it will take a lot of years to write right code .

But you , wow ! really really awesome !

Probably No! or Roam ppl

Maybe someone don’t know Observable, Someone don’t know Roam can run hiccup code.

Only me think it, and you’ve done yet.

Not sure what excatly requirement, but it’s an ability to run code, embed code on Note app .

What else note app can run code ? Only Roam what I’ve found.

What else ppl think it about ? Only me think it.

Only you’ve done already.

I can’t wait tweet for your wisedom.

https://twitter.com/Steve_Yang331/status/1256780592735293446?s=20

2 Likes
7

Roam support export json file.
Observable support build chart and others (mind map, etc) by json file.

So. What we’ve done Roam and Observable ?

At first, we have to know what Roam can do , and then expand Roam statistical chart on Observable.

Simple and small imagination :

1 . Build a table in Roam

image
image558×844 15.2 KB

  1. Export to json file or share that page or convert csv file.

  2. Base on Bar Chart / Chris Rice | Observable

  3. Build chart

  4. Roam roam-research-embed-code-generator

  5. Embed into Roam

  6. Share it .

But I don’t know write code to handle Roam Json file .
and don’t know get data by Roam share page url or API .

I use upload csv file

image
image802×906 24.7 KB

8

Hey there, this looks very cool! However, when I pasted your code into Roam, I got an error saying “:iframe dom tag is not supported in :hiccup”

Does it still work for you? Do I need to do something special for it to work?

9

It’s not just you, this isn’t working for me anymore either. I don’t regularly use Roam so I don’t know when this changed, but it seems to have been recent. Other folks seem to have noticed this recently too and there’s hearsay there that it was to address security issues with hiccup. I hope iframe support comes back once they’ve had a chance to iron things out!

10

Thanks. I can’t say I’m surprised - Roam has some wonderful ideas, but it hasn’t been implemented well at all. I moved past it in the same day that I messaged you - using Obsidian now and waiting eagerly to see what Athens Research comes out with.

11

@thomasballinger @nixsee

Obsidian v0.8.1 allow embed , , so you know try embed observable code.

But I don’t know how .

12

Embedding in Roam and other sites (Notion, Medium, etc.) is now much easier and more reliable, since the release last month of our new embedding options: Intro, Troubleshooting.

In any link-shared or published notebook, click “Embed cells” in the notebook menu or “Embed” in the cell menu. Under “Iframe”, click “Copy URL only” and paste it into Roam’s Iframe block:

{{iframe: https://observablehq.com/embed/@d3/bar-chart-race?cell=chart}}

Hit “Enter” and it will expand to a live resizable embed.

2 Likes