With kind/scittle, one may specify Clojurescript code to run through Scittle.
(kind/scittle '(.log js/console "hello"))
(kind/scittle '(defn f [x] (+ x 9)))
(kind/reagent ['(fn [] [:p (f 11)])])
Code defined with kind/scittle is by default evaluated asynchronously, which fits very well with Reagent. However, the Scittle API allows to turn off this default and force synchronous evaluation with the following JavaScript commands:
Also the Small Clojure Interpreter wich powers Scittle is exposed to JavaScript. Because within this notebook the default evaluation is still active, you can check in the browser console that the following string 123 appears before the above hello.
Other image representations are currently not supported.
(kind/image"AN IMAGE")
unsupported image format
2.11 Plain data structures
Plain data structures (lists and sequnces, vectors, sets, maps) are pretty printed if there isn’t any value inside which needs to be displayed in special kind of way.
Observable visualizations are supported when rendering through Quarto.
The following is adapted from the Penguins example in Quarto’s documentation.
Note that you can save your Clojure data as a csv file and refer to it from within your Observable code. See Referring to files for more information. In this case, we are using the local file, "notebooks/datasets/palmer-penguins.csv", which is transparently copied by Clay alongside the target HTML.
(kind/reagent ['(fn [] [:div {:style {:height"200px"}:ref (fn [el] (let [m (-> js/L (.map el) (.setView (clj->js [51.505 -0.09])13))] (-> js/L .-tileLayer (.provider "OpenStreetMap.Mapnik") (.addTo m)) (-> js/L (.marker (clj->js [51.5 -0.09])) (.addTo m) (.bindPopup "A pretty CSS popup.<br> Easily customizable.") (.openPopup))))}])];; Note we need to mention the dependency: {:html/deps [:leaflet]})
2.22 D3
The following example is adapted from hiccup-d3. The code is a bit different, e.g. (.scaleOrdinal js/d3 (.-schemeCategory10 js/d3)) instead of (d3/scaleOrdinal d3/schemeCategory10). We still need to figure out how to make hiccup-d3’s examples work as they are.
Clay supports rendering plots through the JS client side of ggplotly - an R package offering a Plotly fronted for ggplot2’s grammar of graphics implementation. This package is part of the htmlwidgets ecosystem, and we represent that in the kind’s name.
The following is a work-in-progress attempt to generate JSON specs of the kind consumed by ggplotly’s client side.
The following spec function was generaged by mimicking R’s ggplotly(ggplot(mtcars, aes(wt, mpg)) + geom_point()). Therefore, some parts are hard-coded and require generalization. Other parts are missing (e.g., specifying colours).
(kind/reagent ['(fn [{:keys [data-pdb]}] [:div {:style {:height"400px":width"400px":position:relative}:class"viewer_3Dmoljs":data-pdb data-pdb:data-backgroundcolor"0xffffff":data-style"stick":data-uitrue}]) {:data-pdb"2POR"}];; Note we need to mention the dependency: {:html/deps [:three-d-mol]})
Using 3Dmol within your code (inspired by these examples):
