Hi How to write hiccup code for observable embed code in Roam ?

[ghost]

1. visit this link https://observablehq.com/@d3/sketchy-earth
2. get embed code :

<div id="observablehq-476e08a1"></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/@d3/sketchy-earth.js?v=3"; const inspect = Inspector.into("#observablehq-476e08a1"); (new Runtime).module(define, name => (name === "chart") && inspect()); </script>

3. transfer hiccup code

:hiccup [:div {:id "observablehq-3a3c7c79"} {: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/@d3/sketchy-earth.js?v=3"; const inspect = Inspector.into("#observablehq-3a3c7c79"); (new Runtime).module(define, name => (name === "chart") && inspect());"}} ]

Result failed.

Please help convert right hiccup code.

I can't figure it out where is it wrong .

Thanks.

[weavejester]

The Hiccup code you've posted doesn't match up to the HTML you've posted, and the syntax has several problems. Quotes in strings should be escaped, the :script element should come after the :div, and the :script element should be a vector, not a map. It should be:

(list
 [:div {:id "observablehq-476e08a1"}]
 [: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/@d3/sketchy-earth.js?v=3\"; const inspect = Inspector.into(\"#observablehq-476e08a1\"); (new Runtime).module(define, name => (name === \"chart\") && inspect());"])

[ghost]

(list

Thank you so much for help !

That code is run on Roam.
But

[ghost]

I found solution

: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> "}]