From 5f83cef697e9f6df5645b9b618c0ef2dade5e8ac Mon Sep 17 00:00:00 2001 From: daslu Date: Mon, 30 Sep 2024 01:36:38 +0300 Subject: [PATCH] rerendered docs --- docs/clay_book.examples.html | 2003 +++++++++++++++++---------------- docs/index.html | 229 ++-- docs/search.json | 20 +- test/index_generated_test.clj | 247 ++-- 4 files changed, 1304 insertions(+), 1195 deletions(-) diff --git a/docs/clay_book.examples.html b/docs/clay_book.examples.html index 81fd08a..04a1562 100644 --- a/docs/clay_book.examples.html +++ b/docs/clay_book.examples.html @@ -339,7 +339,7 @@

(pr-str (map inc numbers))]) (vec (range 40))]) -
+

From the reagent tutorial:

(kind/reagent
@@ -352,7 +352,7 @@ 
          [:input {:type "button" :value "Click me!"
                    :on-click #(swap! *click-count inc)}]])))])
-
+

2.5 HTML

@@ -500,71 +500,87 @@

+

Urls to images can be annotated as images as well.

+
+
(kind/image
+ {:src "https://upload.wikimedia.org/wikipedia/commons/2/2c/Clay-ss-2005.jpg"})
+
+
+ +
+

Other image representations are currently not supported.

+
+
(kind/image
+ "AN IMAGE")
+
+
+

unsupported image format

+

2.10 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.

-
(def people-as-maps
-  (->> (range 29)
-       (mapv (fn [i]
-               {:preferred-language (["clojure" "clojurescript" "babashka"]
-                                     (rand-int 3))
-                :age (rand-int 100)}))))
+
(def people-as-maps
+  (->> (range 29)
+       (mapv (fn [i]
+               {:preferred-language (["clojure" "clojurescript" "babashka"]
+                                     (rand-int 3))
+                :age (rand-int 100)}))))
-
(def people-as-vectors
-  (->> people-as-maps
-       (mapv (juxt :preferred-language :age))))
+
(def people-as-vectors
+  (->> people-as-maps
+       (mapv (juxt :preferred-language :age))))
-
(take 5 people-as-maps)
+
(take 5 people-as-maps)
-
({:preferred-language "babashka", :age 88}
- {:preferred-language "clojurescript", :age 75}
- {:preferred-language "clojure", :age 83}
- {:preferred-language "clojure", :age 66}
- {:preferred-language "clojure", :age 64})
+
({:preferred-language "clojure", :age 61}
+ {:preferred-language "clojure", :age 91}
+ {:preferred-language "clojure", :age 84}
+ {:preferred-language "babashka", :age 74}
+ {:preferred-language "clojurescript", :age 60})
-
(take 5 people-as-vectors)
+
(take 5 people-as-vectors)
-
(["babashka" 88]
- ["clojurescript" 75]
- ["clojure" 83]
- ["clojure" 66]
- ["clojure" 64])
+
(["clojure" 61]
+ ["clojure" 91]
+ ["clojure" 84]
+ ["babashka" 74]
+ ["clojurescript" 60])
-
(->> people-as-vectors
-     (take 5)
-     set)
+
(->> people-as-vectors
+     (take 5)
+     set)
-
#{["clojure" 66]
-  ["clojure" 64]
-  ["babashka" 88]
-  ["clojure" 83]
-  ["clojurescript" 75]}
+
#{["babashka" 74]
+  ["clojure" 61]
+  ["clojurescript" 60]
+  ["clojure" 84]
+  ["clojure" 91]}

When something inside needs to be displayed in a special kind of way, the data structures are printed in a way that makes that clear.

-
(def nested-structure-1
-  {:vector-of-numbers [2 9 -1]
-   :vector-of-different-things ["hi"
-                                (kind/hiccup
-                                 [:big [:big "hello"]])]
-   :map-of-different-things {:markdown (kind/md ["*hi*, **hi**"])
-                             :number 9999}
-   :hiccup (kind/hiccup
-            [:big [:big "bye"]])
-   :dataset (tc/dataset {:x (range 3)
-                         :y [:A :B :C]})})
+
(def nested-structure-1
+  {:vector-of-numbers [2 9 -1]
+   :vector-of-different-things ["hi"
+                                (kind/hiccup
+                                 [:big [:big "hello"]])]
+   :map-of-different-things {:markdown (kind/md ["*hi*, **hi**"])
+                             :number 9999}
+   :hiccup (kind/hiccup
+            [:big [:big "bye"]])
+   :dataset (tc/dataset {:x (range 3)
+                         :y [:A :B :C]})})
-
nested-structure-1
+
nested-structure-1

{

:vector-of-numbers [2 9 -1]
@@ -696,21 +712,21 @@

<

2.11 Pretty printing

The :kind/pprint kind makes sure to simply pretty-print values:

-
(kind/pprint nested-structure-1)
+
(kind/pprint nested-structure-1)
-
{:vector-of-numbers [2 9 -1],
- :vector-of-different-things ["hi" [:big [:big "hello"]]],
- :map-of-different-things {:markdown ["*hi*, **hi**"], :number 9999},
- :hiccup [:big [:big "bye"]],
- :dataset _unnamed [3 2]:
-
-| :x | :y |
-|---:|----|
-|  0 | :A |
-|  1 | :B |
-|  2 | :C |
-}
+
{:vector-of-numbers [2 9 -1],
+ :vector-of-different-things ["hi" [:big [:big "hello"]]],
+ :map-of-different-things {:markdown ["*hi*, **hi**"], :number 9999},
+ :hiccup [:big [:big "bye"]],
+ :dataset _unnamed [3 2]:
+
+| :x | :y |
+|---:|----|
+|  0 | :A |
+|  1 | :B |
+|  2 | :C |
+}
@@ -718,12 +734,12 @@

tech.ml.dataset datasets currently use the default printing of the library,

Let us create such a dataset using Tablecloth.

-
(require '[tablecloth.api :as tc])
+
(require '[tablecloth.api :as tc])
-
(-> {:x (range 6)
-     :y [:A :B :C :A :B :C]}
-    tc/dataset)
+
(-> {:x (range 6)
+     :y [:A :B :C :A :B :C]}
+    tc/dataset)

_unnamed [6 2]:

@@ -763,9 +779,9 @@

-
(-> {:x [1 [2 3] 4]
-     :y [:A :B :C]}
-    tc/dataset)
+
(-> {:x [1 [2 3] 4]
+     :y [:A :B :C]}
+    tc/dataset)

_unnamed [3 2]:

@@ -793,9 +809,9 @@

-
(-> [{:x 1 :y 2 :z 3}
-     {:y 4 :z 5}]
-    tc/dataset)
+
(-> [{:x 1 :y 2 :z 3}
+     {:y 4 :z 5}]
+    tc/dataset)

_unnamed [2 3]:

@@ -822,8 +838,8 @@

-
(-> people-as-maps
-    tc/dataset)
+
(-> people-as-maps
+    tc/dataset)

_unnamed [29 2]:

@@ -836,101 +852,101 @@

-

- + + - - + + - + - - + + - - + + - - + + - - + + - - + + - + - + - - + + - - + + - - + + - + - - + + - + - + - - + + - + - + - +
babashka88clojure61
clojurescript75clojure91
clojure8384
clojure66babashka74
clojure64clojurescript60
clojure5clojurescript11
clojurescript15clojure53
babashka94clojurescript44
clojure640
clojurescript6240
… …
babashka32clojure92
clojure42babashka24
clojure70babashka27
clojurescript1084
clojurescript43babashka22
clojure2364
babashka6051
babashka22clojurescript26
clojure8667
clojure4042
babashka8951

Some kind options of kind/dataset control the way a dataset is printed.

-
(-> {:x (range 30)}
-    tc/dataset
-    (kind/dataset {:dataset/print-range 6}))
+
(-> {:x (range 30)}
+    tc/dataset
+    (kind/dataset {:dataset/print-range 6}))

_unnamed [30 1]:

@@ -974,9 +990,9 @@

-
(kind/table
- {:column-names [:preferred-language :age]
-  :row-vectors people-as-vectors})
+
(kind/table
+ {:column-names [:preferred-language :age]
+  :row-vectors people-as-vectors})

@@ -989,120 +1005,120 @@

-babashka -88 - - -clojurescript -75 - - clojure -83 +61 clojure -66 +91 clojure -64 +84 -clojure -5 +babashka +74 clojurescript -15 +60 -babashka -94 +clojurescript +11 clojure -6 +53 clojurescript -62 +44 -clojurescript -29 +clojure +40 clojurescript -16 +40 -clojurescript -0 +babashka +52 babashka -48 +56 -babashka -57 +clojurescript +23 -clojure -55 +clojurescript +18 -babashka -41 +clojure +60 -clojurescript -53 +clojure +84 -babashka -32 +clojurescript +87 -clojure -42 +babashka +59 clojure -70 +92 -clojurescript -10 +babashka +24 +babashka +27 + + clojurescript -43 +84 + + +babashka +22 clojure -23 +64 babashka -60 +51 -babashka -22 +clojurescript +26 clojure -86 +67 clojure -40 +42 babashka -89 +51 @@ -1110,32 +1126,32 @@

-
(kind/table
- {:row-vectors (take 5 people-as-vectors)})
+
(kind/table
+ {:row-vectors (take 5 people-as-vectors)})

- - + + - - + + - + - - + + - - + +
babashka88clojure61
clojurescript75clojure91
clojure8384
clojure66babashka74
clojure64clojurescript60
@@ -1143,8 +1159,8 @@

-
(kind/table
- {:row-maps (take 5 people-as-maps)})
+
(kind/table
+ {:row-maps (take 5 people-as-maps)})

@@ -1157,24 +1173,24 @@

-babashka -88 +clojure +61 -clojurescript -75 +clojure +91 clojure -83 +84 -clojure -66 +babashka +74 -clojure -64 +clojurescript +60 @@ -1182,9 +1198,9 @@

-
(kind/table
- {:column-names [:preferred-language]
-  :row-maps (take 5 people-as-maps)})
+
(kind/table
+ {:column-names [:preferred-language]
+  :row-maps (take 5 people-as-maps)})

@@ -1196,19 +1212,19 @@

-babashka +clojure -clojurescript +clojure clojure -clojure +babashka -clojure +clojurescript @@ -1216,38 +1232,38 @@

-
(kind/table (take 5 people-as-vectors))
+
(kind/table (take 5 people-as-vectors))

- - + + - - + + - + - - + + - - + +
babashka88clojure61
clojurescript75clojure91
clojure8384
clojure66babashka74
clojure64clojurescript60
-
(kind/table (take 5 people-as-maps))
+
(kind/table (take 5 people-as-maps))
@@ -1260,24 +1276,24 @@

-babashka -88 +clojure +61 -clojurescript -75 +clojure +91 clojure -83 +84 -clojure -66 +babashka +74 -clojure -64 +clojurescript +60 @@ -1285,8 +1301,8 @@

-
(kind/table {:x (range 6)
-             :y [:A :B :C :A :B :C]})
+
(kind/table {:x (range 6)
+             :y [:A :B :C :A :B :C]})

@@ -1328,12 +1344,12 @@

-
(def people-as-dataset
-  (tc/dataset people-as-maps))
+
(def people-as-dataset
+  (tc/dataset people-as-maps))

-
(-> people-as-dataset
-    kind/table)
+
(-> people-as-dataset
+    kind/table)
@@ -1346,120 +1362,120 @@

-babashka -88 - - -clojurescript -75 - - clojure -83 +61 clojure -66 +91 clojure -64 +84 -clojure -5 +babashka +74 clojurescript -15 +60 -babashka -94 +clojurescript +11 clojure -6 +53 clojurescript -62 +44 -clojurescript -29 +clojure +40 clojurescript -16 +40 -clojurescript -0 +babashka +52 babashka -48 +56 -babashka -57 +clojurescript +23 -clojure -55 +clojurescript +18 -babashka -41 +clojure +60 -clojurescript -53 +clojure +84 -babashka -32 +clojurescript +87 -clojure -42 +babashka +59 clojure -70 +92 -clojurescript -10 +babashka +24 +babashka +27 + + clojurescript -43 +84 + + +babashka +22 clojure -23 +64 babashka -60 +51 -babashka -22 +clojurescript +26 clojure -86 +67 clojure -40 +42 babashka -89 +51 @@ -1467,8 +1483,8 @@

-
(-> people-as-dataset
-    (kind/table {:element/max-height "300px"}))
+
(-> people-as-dataset
+    (kind/table {:element/max-height "300px"}))

@@ -1482,120 +1498,120 @@

-babashka -88 - - -clojurescript -75 - - clojure -83 +61 clojure -66 +91 clojure -64 +84 -clojure -5 +babashka +74 clojurescript -15 +60 -babashka -94 +clojurescript +11 clojure -6 +53 clojurescript -62 +44 -clojurescript -29 +clojure +40 clojurescript -16 +40 -clojurescript -0 +babashka +52 babashka -48 +56 -babashka -57 +clojurescript +23 -clojure -55 +clojurescript +18 -babashka -41 +clojure +60 -clojurescript -53 +clojure +84 -babashka -32 +clojurescript +87 -clojure -42 +babashka +59 clojure -70 +92 -clojurescript -10 +babashka +24 +babashka +27 + + clojurescript -43 +84 + + +babashka +22 clojure -23 +64 babashka -60 +51 -babashka -22 +clojurescript +26 clojure -86 +67 clojure -40 +42 babashka -89 +51 @@ -1604,74 +1620,74 @@

datatables to reneder kind/table, and in this case the user may specify datatables options (see the full list).

-
(-> people-as-maps
-    tc/dataset
-    (kind/table {:use-datatables true}))
+
(-> people-as-maps
+    tc/dataset
+    (kind/table {:use-datatables true}))
-
preferred-languageage
babashka88
clojurescript75
clojure83
clojure66
clojure64
clojure5
clojurescript15
babashka94
clojure6
clojurescript62
clojurescript29
clojurescript16
clojurescript0
babashka48
babashka57
clojure55
babashka41
clojurescript53
babashka32
clojure42
clojure70
clojurescript10
clojurescript43
clojure23
babashka60
babashka22
clojure86
clojure40
babashka89
+
preferred-languageage
clojure61
clojure91
clojure84
babashka74
clojurescript60
clojurescript11
clojure53
clojurescript44
clojure40
clojurescript40
babashka52
babashka56
clojurescript23
clojurescript18
clojure60
clojure84
clojurescript87
babashka59
clojure92
babashka24
babashka27
clojurescript84
babashka22
clojure64
babashka51
clojurescript26
clojure67
clojure42
babashka51
-
(-> people-as-dataset
-    (kind/table {:use-datatables true
-                 :datatables {:scrollY 300}}))
+
(-> people-as-dataset
+    (kind/table {:use-datatables true
+                 :datatables {:scrollY 300}}))
-
preferred-languageage
babashka88
clojurescript75
clojure83
clojure66
clojure64
clojure5
clojurescript15
babashka94
clojure6
clojurescript62
clojurescript29
clojurescript16
clojurescript0
babashka48
babashka57
clojure55
babashka41
clojurescript53
babashka32
clojure42
clojure70
clojurescript10
clojurescript43
clojure23
babashka60
babashka22
clojure86
clojure40
babashka89
+
preferred-languageage
clojure61
clojure91
clojure84
babashka74
clojurescript60
clojurescript11
clojure53
clojurescript44
clojure40
clojurescript40
babashka52
babashka56
clojurescript23
clojurescript18
clojure60
clojure84
clojurescript87
babashka59
clojure92
babashka24
babashka27
clojurescript84
babashka22
clojure64
babashka51
clojurescript26
clojure67
clojure42
babashka51

2.14 Vega and Vega-Lite

-
(defn vega-lite-point-plot [data]
-  (-> {:data {:values data},
-       :mark "point"
-       :encoding
-       {:size {:field "w" :type "quantitative"}
-        :x {:field "x", :type "quantitative"},
-        :y {:field "y", :type "quantitative"},
-        :fill {:field "z", :type "nominal"}}}
-      kind/vega-lite))
+
(defn vega-lite-point-plot [data]
+  (-> {:data {:values data},
+       :mark "point"
+       :encoding
+       {:size {:field "w" :type "quantitative"}
+        :x {:field "x", :type "quantitative"},
+        :y {:field "y", :type "quantitative"},
+        :fill {:field "z", :type "nominal"}}}
+      kind/vega-lite))
-
(defn random-data [n]
-  (->> (repeatedly n #(- (rand) 0.5))
-       (reductions +)
-       (map-indexed (fn [x y]
-                      {:w (rand-int 9)
-                       :z (rand-int 9)
-                       :x x
-                       :y y}))))
+
(defn random-data [n]
+  (->> (repeatedly n #(- (rand) 0.5))
+       (reductions +)
+       (map-indexed (fn [x y]
+                      {:w (rand-int 9)
+                       :z (rand-int 9)
+                       :x x
+                       :y y}))))
-
(defn random-vega-lite-plot [n]
-  (-> n
-      random-data
-      vega-lite-point-plot))
+
(defn random-vega-lite-plot [n]
+  (-> n
+      random-data
+      vega-lite-point-plot))
-
(random-vega-lite-plot 9)
+
(random-vega-lite-plot 9)
-
+

When the vega/vega-lite data is given in CSV format, Clay will serve it in a separate CSV file alongside the generated HTML.

-
(-> {:data {:values "x,y
-1,1
-2,4
-3,9
--1,1
--2,4
--3,9"
-            :format {:type :csv}},
-     :mark "point"
-     :encoding
-     {:x {:field "x", :type "quantitative"}
-      :y {:field "y", :type "quantitative"}}}
-    kind/vega-lite)
+
(-> {:data {:values "x,y
+1,1
+2,4
+3,9
+-1,1
+-2,4
+-3,9"
+            :format {:type :csv}},
+     :mark "point"
+     :encoding
+     {:x {:field "x", :type "quantitative"}
+      :y {:field "y", :type "quantitative"}}}
+    kind/vega-lite)
@@ -1679,31 +1695,31 @@

2.15 Cytoscape

See the Cytoscape docs.

-
(def cytoscape-example
-  {:elements {:nodes [{:data {:id "a" :parent "b"} :position {:x 215 :y 85}}
-                      {:data {:id "b"}}
-                      {:data {:id "c" :parent "b"} :position {:x 300 :y 85}}
-                      {:data {:id "d"} :position {:x 215 :y 175}}
-                      {:data {:id "e"}}
-                      {:data {:id "f" :parent "e"} :position {:x 300 :y 175}}]
-              :edges [{:data {:id "ad" :source "a" :target "d"}}
-                      {:data {:id "eb" :source "e" :target "b"}}]}
-   :style [{:selector "node"
-            :css {:content "data(id)"
-                  :text-valign "center"
-                  :text-halign "center"}}
-           {:selector "parent"
-            :css {:text-valign "top"
-                  :text-halign "center"}}
-           {:selector "edge"
-            :css {:curve-style "bezier"
-                  :target-arrow-shape "triangle"}}]
-   :layout {:name "preset"
-            :padding 5}})
-
-
-
(kind/cytoscape
- cytoscape-example)
+
(def cytoscape-example
+  {:elements {:nodes [{:data {:id "a" :parent "b"} :position {:x 215 :y 85}}
+                      {:data {:id "b"}}
+                      {:data {:id "c" :parent "b"} :position {:x 300 :y 85}}
+                      {:data {:id "d"} :position {:x 215 :y 175}}
+                      {:data {:id "e"}}
+                      {:data {:id "f" :parent "e"} :position {:x 300 :y 175}}]
+              :edges [{:data {:id "ad" :source "a" :target "d"}}
+                      {:data {:id "eb" :source "e" :target "b"}}]}
+   :style [{:selector "node"
+            :css {:content "data(id)"
+                  :text-valign "center"
+                  :text-halign "center"}}
+           {:selector "parent"
+            :css {:text-valign "top"
+                  :text-halign "center"}}
+           {:selector "edge"
+            :css {:curve-style "bezier"
+                  :target-arrow-shape "triangle"}}]
+   :layout {:name "preset"
+            :padding 5}})
+
+
+
(kind/cytoscape
+ cytoscape-example)
-
(-> cytoscape-example
-    (kind/cytoscape {:element/style
-                     {:width "100px"
-                      :height "100px"}}))
+
(-> cytoscape-example
+    (kind/cytoscape {:element/style
+                     {:width "100px"
+                      :height "100px"}}))
-
(-> echarts-example
-    (kind/echarts {:element/style
-                   {:width "500px"
-                    :height "200px"}}))
+
(-> echarts-example
+    (kind/echarts {:element/style
+                   {:width "500px"
+                    :height "200px"}}))
-
(-> plotly-example
-    (kind/plotly {:element/style
-                  {:width "300px"
-                   :height "300px"}}))
+
(-> plotly-example
+    (kind/plotly {:element/style
+                  {:width "300px"
+                   :height "300px"}}))
@@ -1795,43 +1811,43 @@

2.18 Highcharts

-
(kind/highcharts
- {:title {:text "Line chart"}
-  :subtitle {:text "By Job Category"}
-  :yAxis {:title {:text "Number of Employees"}}
-  :series [{:name "Installation & Developers"
-            :data [43934, 48656, 65165, 81827, 112143, 142383,
-                   171533, 165174, 155157, 161454, 154610]}
-
-           {:name "Manufacturing",
-            :data [24916, 37941, 29742, 29851, 32490, 30282,
-                   38121, 36885, 33726, 34243, 31050]}
-
-           {:name "Sales & Distribution",
-            :data [11744, 30000, 16005, 19771, 20185, 24377,
-                   32147, 30912, 29243, 29213, 25663]}
-
-           {:name "Operations & Maintenance",
-            :data [nil, nil, nil, nil, nil, nil, nil,
-                   nil, 11164, 11218, 10077]}
-
-           {:name "Other",
-            :data [21908, 5548, 8105, 11248, 8989, 11816, 18274,
-                   17300, 13053, 11906, 10073]}]
-
-  :xAxis {:accessibility {:rangeDescription "Range: 2010 to 2020"}}
-
-  :legend {:layout "vertical",
-           :align "right",
-           :verticalAlign "middle"}
-
-  :plotOptions {:series {:label {:connectorAllowed false},
-                         :pointStart 2010}}
-
-  :responsive {:rules [{:condition {:maxWidth 500},
-                        :chartOptions {:legend {:layout "horizontal",
-                                                :align "center",
-                                                :verticalAlign "bottom"}}}]}})
+
(kind/highcharts
+ {:title {:text "Line chart"}
+  :subtitle {:text "By Job Category"}
+  :yAxis {:title {:text "Number of Employees"}}
+  :series [{:name "Installation & Developers"
+            :data [43934, 48656, 65165, 81827, 112143, 142383,
+                   171533, 165174, 155157, 161454, 154610]}
+
+           {:name "Manufacturing",
+            :data [24916, 37941, 29742, 29851, 32490, 30282,
+                   38121, 36885, 33726, 34243, 31050]}
+
+           {:name "Sales & Distribution",
+            :data [11744, 30000, 16005, 19771, 20185, 24377,
+                   32147, 30912, 29243, 29213, 25663]}
+
+           {:name "Operations & Maintenance",
+            :data [nil, nil, nil, nil, nil, nil, nil,
+                   nil, 11164, 11218, 10077]}
+
+           {:name "Other",
+            :data [21908, 5548, 8105, 11248, 8989, 11816, 18274,
+                   17300, 13053, 11906, 10073]}]
+
+  :xAxis {:accessibility {:rangeDescription "Range: 2010 to 2020"}}
+
+  :legend {:layout "vertical",
+           :align "right",
+           :verticalAlign "middle"}
+
+  :plotOptions {:series {:label {:connectorAllowed false},
+                         :pointStart 2010}}
+
+  :responsive {:rules [{:condition {:maxWidth 500},
+                        :chartOptions {:legend {:layout "horizontal",
+                                                :align "center",
+                                                :verticalAlign "bottom"}}}]}})
@@ -1841,74 +1857,74 @@

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/observable
- "
-//| panel: input
-viewof bill_length_min = Inputs.range(
-                                      [32, 50],
-                                      {value: 35, step: 1, label: 'Bill length (min):'}
-                                      )
-viewof islands = Inputs.checkbox(
-                                 ['Torgersen', 'Biscoe', 'Dream'],
-                                 { value: ['Torgersen', 'Biscoe'],
-                                  label: 'Islands:'
-                                  }
-                                 )
-
-Plot.rectY(filtered,
-            Plot.binX(
-                      {y: 'count'},
-                      {x: 'body_mass_g', fill: 'species', thresholds: 20}
-                      ))
- .plot({
-        facet: {
-                data: filtered,
-                x: 'sex',
-                y: 'species',
-                marginRight: 80
-                },
-        marks: [
-                Plot.frame(),
-                ]
-        }
-       )
-Inputs.table(filtered)
-penguins = FileAttachment('notebooks/datasets/palmer-penguins.csv').csv({ typed: true })
-filtered = penguins.filter(function(penguin) {
-                                           return bill_length_min < penguin.bill_length_mm &&
-                                           islands.includes(penguin.island);
-                                           })
-")
+
(kind/observable
+ "
+//| panel: input
+viewof bill_length_min = Inputs.range(
+                                      [32, 50],
+                                      {value: 35, step: 1, label: 'Bill length (min):'}
+                                      )
+viewof islands = Inputs.checkbox(
+                                 ['Torgersen', 'Biscoe', 'Dream'],
+                                 { value: ['Torgersen', 'Biscoe'],
+                                  label: 'Islands:'
+                                  }
+                                 )
+
+Plot.rectY(filtered,
+            Plot.binX(
+                      {y: 'count'},
+                      {x: 'body_mass_g', fill: 'species', thresholds: 20}
+                      ))
+ .plot({
+        facet: {
+                data: filtered,
+                x: 'sex',
+                y: 'species',
+                marginRight: 80
+                },
+        marks: [
+                Plot.frame(),
+                ]
+        }
+       )
+Inputs.table(filtered)
+penguins = FileAttachment('notebooks/datasets/palmer-penguins.csv').csv({ typed: true })
+filtered = penguins.filter(function(penguin) {
+                                           return bill_length_min < penguin.bill_length_mm &&
+                                           islands.includes(penguin.island);
+                                           })
+")
- +
@@ -1930,7 +1946,7 @@

- +
@@ -1938,11 +1954,11 @@

- +
@@ -1960,11 +1976,11 @@

More examples from Quarto’s Observable documentation:

-
(kind/observable
- "athletes = FileAttachment('notebooks/datasets/athletes.csv').csv({typed: true})")
+
(kind/observable
+ "athletes = FileAttachment('notebooks/datasets/athletes.csv').csv({typed: true})")
- +
@@ -1972,11 +1988,11 @@

-
(kind/observable
- "athletes")
+
(kind/observable
+ "athletes")
- +
@@ -1984,11 +2000,11 @@

-
(kind/observable
- "Inputs.table(athletes)")
+
(kind/observable
+ "Inputs.table(athletes)")
- +
@@ -1996,39 +2012,39 @@

-
(kind/observable
- "
-Plot.plot({
-  grid: true,
-  facet: {
-    data: athletes,
-    y: 'sex'
-  },
-  marks: [
-    Plot.rectY(
-      athletes,
-      Plot.binX({y: 'count'}, {x: 'weight', fill: 'sex'})
-    ),
-    Plot.ruleY([0])
-  ]
-})
-")
+
(kind/observable
+ "
+Plot.plot({
+  grid: true,
+  facet: {
+    data: athletes,
+    y: 'sex'
+  },
+  marks: [
+    Plot.rectY(
+      athletes,
+      Plot.binX({y: 'count'}, {x: 'weight', fill: 'sex'})
+    ),
+    Plot.ruleY([0])
+  ]
+})
+")
- +
@@ -2036,11 +2052,11 @@

-
(kind/observable
- "population = FileAttachment('notebooks/datasets/population.json').json()")
+
(kind/observable
+ "population = FileAttachment('notebooks/datasets/population.json').json()")
- +
@@ -2048,11 +2064,11 @@

-
(kind/observable
- "population")
+
(kind/observable
+ "population")
- +
@@ -2060,13 +2076,13 @@

-
(kind/observable
- " import { chart } with { population as data } from '@d3/zoomable-sunburst'
- chart")
+
(kind/observable
+ " import { chart } with { population as data } from '@d3/zoomable-sunburst'
+ chart")
- +
@@ -2087,87 +2103,87 @@

2.20 Leaflet

This example was adapted from the Leaflet website. Note we are defining a tile layer using leaflet-providers.

-
(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]})
-
-
+
(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.21 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.

-
(let [letter-frequencies [{:letter "A", :frequency 0.08167}
-                          {:letter "B", :frequency 0.01492}
-                          {:letter "C", :frequency 0.02782}
-                          {:letter "D", :frequency 0.04253}
-                          {:letter "E", :frequency 0.12702}
-                          {:letter "F", :frequency 0.02288}
-                          {:letter "G", :frequency 0.02015}
-                          {:letter "H", :frequency 0.06094}
-                          {:letter "I", :frequency 0.06966}
-                          {:letter "J", :frequency 0.00153}
-                          {:letter "K", :frequency 0.00772}
-                          {:letter "L", :frequency 0.04025}
-                          {:letter "M", :frequency 0.02406}
-                          {:letter "N", :frequency 0.06749}
-                          {:letter "O", :frequency 0.07507}
-                          {:letter "P", :frequency 0.01929}
-                          {:letter "Q", :frequency 0.00095}
-                          {:letter "R", :frequency 0.05987}
-                          {:letter "S", :frequency 0.06327}
-                          {:letter "T", :frequency 0.09056}
-                          {:letter "U", :frequency 0.02758}
-                          {:letter "V", :frequency 0.00978}
-                          {:letter "W", :frequency 0.0236}
-                          {:letter "X", :frequency 0.0015}
-                          {:letter "Y", :frequency 0.01974}
-                          {:letter "Z", :frequency 0.00074}]]
-  (kind/reagent
-   ['(fn [data]
-       (let [size 400
-             x (-> js/d3
-                   .scaleLinear
-                   (.range (into-array [0 size]))
-                   (.domain (into-array [0 (apply max (map :frequency data))])))
-             y (-> js/d3
-                   .scaleBand
-                   (.domain (into-array (map :letter data)))
-                   (.range (into-array [0 size])))
-             color (.scaleOrdinal js/d3 (.-schemeCategory10 js/d3))]
-         [:svg
-          {:viewBox (str "0 0 " size " " size)}
-          (map
-           (fn
-             [{:keys [letter frequency]}]
-             [:g
-              {:key letter, :transform (str "translate(" 0 "," (y letter) ")")}
-              [:rect
-               {:x (x 0),
-                :height (.bandwidth y),
-                :fill (color letter),
-                :width (x frequency)}]])
-           data)]))
-    letter-frequencies]
-   {:html/deps [:d3]}))
-
-
+
(let [letter-frequencies [{:letter "A", :frequency 0.08167}
+                          {:letter "B", :frequency 0.01492}
+                          {:letter "C", :frequency 0.02782}
+                          {:letter "D", :frequency 0.04253}
+                          {:letter "E", :frequency 0.12702}
+                          {:letter "F", :frequency 0.02288}
+                          {:letter "G", :frequency 0.02015}
+                          {:letter "H", :frequency 0.06094}
+                          {:letter "I", :frequency 0.06966}
+                          {:letter "J", :frequency 0.00153}
+                          {:letter "K", :frequency 0.00772}
+                          {:letter "L", :frequency 0.04025}
+                          {:letter "M", :frequency 0.02406}
+                          {:letter "N", :frequency 0.06749}
+                          {:letter "O", :frequency 0.07507}
+                          {:letter "P", :frequency 0.01929}
+                          {:letter "Q", :frequency 0.00095}
+                          {:letter "R", :frequency 0.05987}
+                          {:letter "S", :frequency 0.06327}
+                          {:letter "T", :frequency 0.09056}
+                          {:letter "U", :frequency 0.02758}
+                          {:letter "V", :frequency 0.00978}
+                          {:letter "W", :frequency 0.0236}
+                          {:letter "X", :frequency 0.0015}
+                          {:letter "Y", :frequency 0.01974}
+                          {:letter "Z", :frequency 0.00074}]]
+  (kind/reagent
+   ['(fn [data]
+       (let [size 400
+             x (-> js/d3
+                   .scaleLinear
+                   (.range (into-array [0 size]))
+                   (.domain (into-array [0 (apply max (map :frequency data))])))
+             y (-> js/d3
+                   .scaleBand
+                   (.domain (into-array (map :letter data)))
+                   (.range (into-array [0 size])))
+             color (.scaleOrdinal js/d3 (.-schemeCategory10 js/d3))]
+         [:svg
+          {:viewBox (str "0 0 " size " " size)}
+          (map
+           (fn
+             [{:keys [letter frequency]}]
+             [:g
+              {:key letter, :transform (str "translate(" 0 "," (y letter) ")")}
+              [:rect
+               {:x (x 0),
+                :height (.bandwidth y),
+                :fill (color letter),
+                :width (x frequency)}]])
+           data)]))
+    letter-frequencies]
+   {:html/deps [:d3]}))
+
+

2.22 ggplotly

@@ -2176,280 +2192,285 @@

-
(defn ->ggplotly-spec [{:keys [layers labels]}]
-  (kind/htmlwidgets-ggplotly
-   (let [;; assuming a single layer for now:
-         {:keys [data xmin xmax ymin ymax]} (first layers)
-         ;; an auxiliary function to compute tick values:
-         ->tickvals (fn [l r]
-                      (let [jump (-> (- r l)
-                                     (/ 6)
-                                     math/floor
-                                     int
-                                     (max 1))]
-                        (-> l
-                            math/ceil
-                            (range r jump))))]
-     {:x
-      {:config
-       {:doubleClick "reset",
-        :modeBarButtonsToAdd ["hoverclosest" "hovercompare"],
-        :showSendToCloud false},
-       :layout
-       {:plot_bgcolor "rgba(235,235,235,1)",
-        :paper_bgcolor "rgba(255,255,255,1)",
-        :legend
-        {:bgcolor "rgba(255,255,255,1)",
-         :bordercolor "transparent",
-         :borderwidth 1.88976377952756,
-         :font {:color "rgba(0,0,0,1)", :family "", :size 11.689497716895}},
-        :xaxis (let [tickvals (->tickvals xmin xmax)
-                     ticktext (mapv str tickvals)
-                     range-len (- xmax xmin)
-                     range-expansion (* 0.1 range-len)
-                     expanded-range [(- xmin range-expansion)
-                                     (+ xmax range-expansion)]]
-                 {:linewidth 0,
-                  :nticks nil,
-                  :linecolor nil,
-                  :ticklen 3.65296803652968,
-                  :tickcolor "rgba(51,51,51,1)",
-                  :tickmode "array",
-                  :gridcolor "rgba(255,255,255,1)",
-                  :automargin true,
-                  :type "linear",
-                  :tickvals tickvals
-                  :zeroline false,
-                  :title
-                  {:text (:x labels),
-                   :font {:color "rgba(0,0,0,1)", :family "", :size 14.6118721461187}},
-                  :tickfont {:color "rgba(77,77,77,1)", :family "", :size 11.689497716895},
-                  :autorange false,
-                  :showticklabels true,
-                  :showline false,
-                  :showgrid true,
-                  :ticktext ticktext
-                  :ticks "outside",
-                  :gridwidth 0.66417600664176,
-                  :anchor "y",
-                  :domain [0 1],
-                  :hoverformat ".2f",
-                  :tickangle 0,
-                  :tickwidth 0.66417600664176,
-                  :categoryarray ticktext,
-                  :categoryorder "array",
-                  :range expanded-range},)
-        :font {:color "rgba(0,0,0,1)", :family "", :size 14.6118721461187},
-        :showlegend false,
-        :barmode "relative",
-        :yaxis (let [tickvals (->tickvals ymin ymax)
-                     ticktext (mapv str tickvals)
-                     range-len (- ymax ymin)
-                     range-expansion (* 0.1 range-len)
-                     expanded-range [(- ymin range-expansion)
-                                     (+ ymax range-expansion)]]
-                 {:linewidth 0,
-                  :nticks nil,
-                  :linecolor nil,
-                  :ticklen 3.65296803652968,
-                  :tickcolor "rgba(51,51,51,1)",
-                  :tickmode "array",
-                  :gridcolor "rgba(255,255,255,1)",
-                  :automargin true,
-                  :type "linear",
-                  :tickvals tickvals,
-                  :zeroline false,
-                  :title
-                  {:text (:y labels),
-                   :font {:color "rgba(0,0,0,1)", :family "", :size 14.6118721461187}},
-                  :tickfont {:color "rgba(77,77,77,1)", :family "", :size 11.689497716895},
-                  :autorange false,
-                  :showticklabels true,
-                  :showline false,
-                  :showgrid true,
-                  :ticktext ticktext,
-                  :ticks "outside",
-                  :gridwidth 0.66417600664176,
-                  :anchor "x",
-                  :domain [0 1],
-                  :hoverformat ".2f",
-                  :tickangle 0,
-                  :tickwidth 0.66417600664176,
-                  :categoryarray ticktext,
-                  :categoryorder "array",
-                  :range expanded-range},)
-        :hovermode "closest",
-        :margin
-        {:t 25.7412480974125,
-         :r 7.30593607305936,
-         :b 39.6955859969559,
-         :l 37.2602739726027},
-        :shapes
-        [{:yref "paper",
-          :fillcolor nil,
-          :xref "paper",
-          :y1 1,
-          :type "rect",
-          :line {:color nil, :width 0, :linetype []},
-          :y0 0,
-          :x1 1,
-          :x0 0}]},
-       :highlight
-       {:on "plotly_click",
-        :persistent false,
-        :dynamic false,
-        :selectize false,
-        :opacityDim 0.2,
-        :selected {:opacity 1},
-        :debounce 0},
-       :base_url "https://plot.ly",
-       :cur_data "1f2fea5b54d146",
-       :source "A",
-       :shinyEvents
-       ["plotly_hover"
-        "plotly_click"
-        "plotly_selected"
-        "plotly_relayout"
-        "plotly_brushed"
-        "plotly_brushing"
-        "plotly_clickannotation"
-        "plotly_doubleclick"
-        "plotly_deselect"
-        "plotly_afterplot"
-        "plotly_sunburstclick"],
-       :attrs {:1f2fea5b54d146 {:x {}, :y {}, :type "scatter"}},
-       :data
-       [{:y (:y data)
-         :hoveron "points",
-         :frame nil,
-         :hoverinfo "text",
-         :marker
-         {:autocolorscale false,
-          :color "rgba(0,0,0,1)",
-          :opacity 1,
-          :size 5.66929133858268,
-          :symbol "circle",
-          :line {:width 1.88976377952756, :color "rgba(0,0,0,1)"}},
-         :mode "markers"
-         :type "scatter",
-         :xaxis "x",
-         :showlegend false,
-         :yaxis "y",
-         :x (:x data)
-         :text (-> data
-                   (tc/select-columns [:x :y])
-                   (tc/rows :as-maps)
-                   (->> (mapv pr-str)))}]},
-      :evals [],
-      :jsHooks []})))
-

-
-
(require '[tech.v3.datatype.functional :as fun])
+
(defn ->ggplotly-spec [{:keys [layers labels]}]
+  (kind/htmlwidgets-ggplotly
+   (let [;; assuming a single layer for now:
+         {:keys [data xmin xmax ymin ymax]} (first layers)
+         ;; an auxiliary function to compute tick values:
+         ->tickvals (fn [l r]
+                      (let [jump (-> (- r l)
+                                     (/ 6)
+                                     math/floor
+                                     int
+                                     (max 1))]
+                        (-> l
+                            math/ceil
+                            (range r jump))))]
+     {:x
+      {:config
+       {:doubleClick "reset",
+        :modeBarButtonsToAdd ["hoverclosest" "hovercompare"],
+        :showSendToCloud false},
+       :layout
+       {:plot_bgcolor "rgba(235,235,235,1)",
+        :paper_bgcolor "rgba(255,255,255,1)",
+        :legend
+        {:bgcolor "rgba(255,255,255,1)",
+         :bordercolor "transparent",
+         :borderwidth 1.88976377952756,
+         :font {:color "rgba(0,0,0,1)", :family "", :size 11.689497716895}},
+        :xaxis (let [tickvals (->tickvals xmin xmax)
+                     ticktext (mapv str tickvals)
+                     range-len (- xmax xmin)
+                     range-expansion (* 0.1 range-len)
+                     expanded-range [(- xmin range-expansion)
+                                     (+ xmax range-expansion)]]
+                 {:linewidth 0,
+                  :nticks nil,
+                  :linecolor nil,
+                  :ticklen 3.65296803652968,
+                  :tickcolor "rgba(51,51,51,1)",
+                  :tickmode "array",
+                  :gridcolor "rgba(255,255,255,1)",
+                  :automargin true,
+                  :type "linear",
+                  :tickvals tickvals
+                  :zeroline false,
+                  :title
+                  {:text (:x labels),
+                   :font {:color "rgba(0,0,0,1)", :family "", :size 14.6118721461187}},
+                  :tickfont {:color "rgba(77,77,77,1)", :family "", :size 11.689497716895},
+                  :autorange false,
+                  :showticklabels true,
+                  :showline false,
+                  :showgrid true,
+                  :ticktext ticktext
+                  :ticks "outside",
+                  :gridwidth 0.66417600664176,
+                  :anchor "y",
+                  :domain [0 1],
+                  :hoverformat ".2f",
+                  :tickangle 0,
+                  :tickwidth 0.66417600664176,
+                  :categoryarray ticktext,
+                  :categoryorder "array",
+                  :range expanded-range},)
+        :font {:color "rgba(0,0,0,1)", :family "", :size 14.6118721461187},
+        :showlegend false,
+        :barmode "relative",
+        :yaxis (let [tickvals (->tickvals ymin ymax)
+                     ticktext (mapv str tickvals)
+                     range-len (- ymax ymin)
+                     range-expansion (* 0.1 range-len)
+                     expanded-range [(- ymin range-expansion)
+                                     (+ ymax range-expansion)]]
+                 {:linewidth 0,
+                  :nticks nil,
+                  :linecolor nil,
+                  :ticklen 3.65296803652968,
+                  :tickcolor "rgba(51,51,51,1)",
+                  :tickmode "array",
+                  :gridcolor "rgba(255,255,255,1)",
+                  :automargin true,
+                  :type "linear",
+                  :tickvals tickvals,
+                  :zeroline false,
+                  :title
+                  {:text (:y labels),
+                   :font {:color "rgba(0,0,0,1)", :family "", :size 14.6118721461187}},
+                  :tickfont {:color "rgba(77,77,77,1)", :family "", :size 11.689497716895},
+                  :autorange false,
+                  :showticklabels true,
+                  :showline false,
+                  :showgrid true,
+                  :ticktext ticktext,
+                  :ticks "outside",
+                  :gridwidth 0.66417600664176,
+                  :anchor "x",
+                  :domain [0 1],
+                  :hoverformat ".2f",
+                  :tickangle 0,
+                  :tickwidth 0.66417600664176,
+                  :categoryarray ticktext,
+                  :categoryorder "array",
+                  :range expanded-range},)
+        :hovermode "closest",
+        :margin
+        {:t 25.7412480974125,
+         :r 7.30593607305936,
+         :b 39.6955859969559,
+         :l 37.2602739726027},
+        :shapes
+        [{:yref "paper",
+          :fillcolor nil,
+          :xref "paper",
+          :y1 1,
+          :type "rect",
+          :line {:color nil, :width 0, :linetype []},
+          :y0 0,
+          :x1 1,
+          :x0 0}]},
+       :highlight
+       {:on "plotly_click",
+        :persistent false,
+        :dynamic false,
+        :selectize false,
+        :opacityDim 0.2,
+        :selected {:opacity 1},
+        :debounce 0},
+       :base_url "https://plot.ly",
+       :cur_data "1f2fea5b54d146",
+       :source "A",
+       :shinyEvents
+       ["plotly_hover"
+        "plotly_click"
+        "plotly_selected"
+        "plotly_relayout"
+        "plotly_brushed"
+        "plotly_brushing"
+        "plotly_clickannotation"
+        "plotly_doubleclick"
+        "plotly_deselect"
+        "plotly_afterplot"
+        "plotly_sunburstclick"],
+       :attrs {:1f2fea5b54d146 {:x {}, :y {}, :type "scatter"}},
+       :data
+       [{:y (:y data)
+         :hoveron "points",
+         :frame nil,
+         :hoverinfo "text",
+         :marker
+         {:autocolorscale false,
+          :color "rgba(0,0,0,1)",
+          :opacity 1,
+          :size 5.66929133858268,
+          :symbol "circle",
+          :line {:width 1.88976377952756, :color "rgba(0,0,0,1)"}},
+         :mode "markers"
+         :type "scatter",
+         :xaxis "x",
+         :showlegend false,
+         :yaxis "y",
+         :x (:x data)
+         :text (-> data
+                   (tc/select-columns [:x :y])
+                   (tc/rows :as-maps)
+                   (->> (mapv pr-str)))}]},
+      :evals [],
+      :jsHooks []})))
+
+
+
(require '[tech.v3.datatype.functional :as fun])

A random walk example:

-
(let [n 100
-      xs (range n)
-      ys (reductions + (repeatedly n #(- (rand) 0.5)))
-      xmin (fun/reduce-min xs)
-      xmax (fun/reduce-max xs)
-      ymin (fun/reduce-min ys)
-      ymax (fun/reduce-max ys)
-      data (tc/dataset {:x xs
-                        :y ys})]
-  (->ggplotly-spec
-   {:layers [{:data data
-              :xmin xmin :xmax xmax
-              :ymin ymin :ymax ymax}]
-    :labels {:x "wt"
-             :y "mpg"}}))
-
-
+
(let [n 100
+      xs (range n)
+      ys (reductions + (repeatedly n #(- (rand) 0.5)))
+      xmin (fun/reduce-min xs)
+      xmax (fun/reduce-max xs)
+      ymin (fun/reduce-min ys)
+      ymax (fun/reduce-max ys)
+      data (tc/dataset {:x xs
+                        :y ys})]
+  (->ggplotly-spec
+   {:layers [{:data data
+              :xmin xmin :xmax xmax
+              :ymin ymin :ymax ymax}]
+    :labels {:x "wt"
+             :y "mpg"}}))
+
+

2.23 3DMol.js

Embedding a 3Dmol Viewer (original example):

-
(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-ui true}])
-  {:data-pdb "2POR"}]
- ;; Note we need to mention the dependency:
- {:html/deps [:three-d-mol]})
-
-
+
(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-ui true}])
+  {:data-pdb "2POR"}]
+ ;; Note we need to mention the dependency:
+ {:html/deps [:three-d-mol]})
+
+

Using 3Dmol within your code (inspired by these examples):

-
(defonce pdb-2POR
-(slurp "https://files.rcsb.org/download/2POR.pdb"))
-
-
-
(kind/reagent
-['(fn [{:keys [pdb-data]}]
-    [:div
-     {:style {:width "100%"
-              :height "500px"
-              :position "relative"}
-      :ref (fn [el]
-             (let [config (clj->js
-                           {:backgroundColor "0xffffff"})
-                   viewer (.createViewer js/$3Dmol el)]
-               (.setViewStyle viewer (clj->js
-                                      {:style "outline"}))
-               (.addModelsAsFrames viewer pdb-data "pdb")
-               (.addSphere viewer (clj->js
-                                   {:center {:x 0
-                                             :y 0
-                                             :z 0}
-                                    :radius 5
-                                    :color "green"
-                                    :alpha 0.2}))
-               (.zoomTo viewer)
-               (.render viewer)
-               (.zoom viewer 0.8 2000)))}])
- {:pdb-data pdb-2POR}]
-;; Note we need to mention the dependency:
-{:html/deps [:three-d-mol]})
-
-
+
(defonce pdb-2POR
+(slurp "https://files.rcsb.org/download/2POR.pdb"))
+
+
+
(kind/reagent
+ ['(fn [{:keys [pdb-data]}]
+     [:div
+      {:style {:width "100%"
+               :height "500px"
+               :position "relative"}
+       :ref (fn [el]
+              (let [config (clj->js
+                            {:backgroundColor "0xffffff"})
+                    viewer (.createViewer js/$3Dmol el)]
+                (.setViewStyle viewer (clj->js
+                                       {:style "outline"}))
+                (.addModelsAsFrames viewer pdb-data "pdb")
+                (.addSphere viewer (clj->js
+                                    {:center {:x 0
+                                              :y 0
+                                              :z 0}
+                                     :radius 5
+                                     :color "green"
+                                     :alpha 0.2}))
+                (.zoomTo viewer)
+                (.render viewer)
+                (.zoom viewer 0.8 2000)))}])
+  {:pdb-data pdb-2POR}]
+ ;; Note we need to mention the dependency:
+ {:html/deps [:three-d-mol]})
+
+

2.24 Video

+

Videos can be specified as urls (possibly to local files):

+
+
(kind/video {:src "https://file-examples.com/storage/fe58a1f07d66f447a9512f1/2017/04/file_example_MP4_480_1_5MG.mp4"})
+
+ +

Videos can also be specified as youtube videos: See, e.g., HTML Youtube Videos on w3schools.

-
(kind/video {:youtube-id "DAQnvAgBma8"})
+
(kind/video {:youtube-id "DAQnvAgBma8"})
-
(kind/video {:youtube-id "DAQnvAgBma8"
-             :allowfullscreen false})
+
(kind/video {:youtube-id "DAQnvAgBma8"
+             :allowfullscreen false})
-
(kind/video {:youtube-id "DAQnvAgBma8"
-             :iframe-width 480
-             :iframe-height 270})
+
(kind/video {:youtube-id "DAQnvAgBma8"
+             :iframe-width 480
+             :iframe-height 270})
-
(kind/video {:youtube-id "DAQnvAgBma8"
-             :embed-options {:mute 1
-                             :controls 0}})
+
(kind/video {:youtube-id "DAQnvAgBma8"
+             :embed-options {:mute 1
+                             :controls 0}})
-

See, e.g., HTML Youtube Videos on w3schools.

2.25 Embedded Portal

We may embed Portal’s data-navigating viewers using kind/portal.

-
(kind/portal {:x (range 3)})
+
(kind/portal {:x (range 3)})

Note that kind/portal applies the kind-portal adapter to nested kinds.

-
(kind/portal
-[(kind/hiccup [:img {:height 50 :width 50
-                     :src "https://clojure.org/images/clojure-logo-120b.png"}])
- (kind/hiccup [:img {:height 50 :width 50
-                     :src "https://raw.githubusercontent.com/djblue/portal/fbc54632adc06c6e94a3d059c858419f0063d1cf/resources/splash.svg"}])])
+
(kind/portal
+[(kind/hiccup [:img {:height 50 :width 50
+                     :src "https://clojure.org/images/clojure-logo-120b.png"}])
+ (kind/hiccup [:img {:height 50 :width 50
+                     :src "https://raw.githubusercontent.com/djblue/portal/fbc54632adc06c6e94a3d059c858419f0063d1cf/resources/splash.svg"}])])
-
(kind/portal
-[(kind/hiccup [:big [:big "a plot"]])
- (random-vega-lite-plot 9)])
+
(kind/portal
+[(kind/hiccup [:big [:big "a plot"]])
+ (random-vega-lite-plot 9)])

2.26 Nesting kinds in Hiccup

Kinds are treated recursively inside Hiccup:

-
(kind/hiccup
- [:div {:style {:background "#f5f3ff"
-                :border "solid"}}
-
-  [:hr]
-  [:pre [:code "kind/md"]]
-  (kind/md "*some text* **some more text**")
-
-  [:hr]
-  [:pre [:code "kind/code"]]
-  (kind/code "{:x (1 2 [3 4])}")
-
-  [:hr]
-  [:pre [:code "kind/dataset"]]
-  (tc/dataset {:x (range 33)
-               :y (map inc (range 33))})
-
-  [:hr]
-  [:pre [:code "kind/table"]]
-  (kind/table
-   (tc/dataset {:x (range 33)
-                :y (map inc (range 33))}))
-
-  [:hr]
-  [:pre [:code "kind/vega-lite"]]
-  (random-vega-lite-plot 9)
-
-  [:hr]
-  [:pre [:code "kind/vega-lite"]]
-  (-> {:data {:values "x,y
-1,1
-2,4
-3,9
--1,1
--2,4
--3,9"
-              :format {:type :csv}},
-       :mark "point"
-       :encoding
-       {:x {:field "x", :type "quantitative"}
-        :y {:field "y", :type "quantitative"}}}
-      kind/vega-lite)
-
-  [:hr]
-  [:pre [:code "kind/reagent"]]
-  (kind/reagent
-   ['(fn [numbers]
-       [:p {:style {:background "#d4ebe9"}}
-        (pr-str (map inc numbers))])
-    (vec (range 40))])])
+
(kind/hiccup
+ [:div {:style {:background "#f5f3ff"
+                :border "solid"}}
+
+  [:hr]
+  [:pre [:code "kind/md"]]
+  (kind/md "*some text* **some more text**")
+
+  [:hr]
+  [:pre [:code "kind/code"]]
+  (kind/code "{:x (1 2 [3 4])}")
+
+  [:hr]
+  [:pre [:code "kind/dataset"]]
+  (tc/dataset {:x (range 33)
+               :y (map inc (range 33))})
+
+  [:hr]
+  [:pre [:code "kind/table"]]
+  (kind/table
+   (tc/dataset {:x (range 33)
+                :y (map inc (range 33))}))
+
+  [:hr]
+  [:pre [:code "kind/vega-lite"]]
+  (random-vega-lite-plot 9)
+
+  [:hr]
+  [:pre [:code "kind/vega-lite"]]
+  (-> {:data {:values "x,y
+1,1
+2,4
+3,9
+-1,1
+-2,4
+-3,9"
+              :format {:type :csv}},
+       :mark "point"
+       :encoding
+       {:x {:field "x", :type "quantitative"}
+        :y {:field "y", :type "quantitative"}}}
+      kind/vega-lite)
+
+  [:hr]
+  [:pre [:code "kind/reagent"]]
+  (kind/reagent
+   ['(fn [numbers]
+       [:p {:style {:background "#d4ebe9"}}
+        (pr-str (map inc numbers))])
+    (vec (range 40))])])
kind/md

some text some more text

kind/code
{:x (1 2 [3 4])}
kind/dataset

_unnamed [33 2]:

@@ -2776,25 +2797,25 @@

-
kind/vega-lite
kind/vega-lite
kind/reagent
+
kind/vega-lite
kind/vega-lite
kind/reagent

2.27 Nesting kinds in Tables

Kinds are treated recursively inside Tables:

-
(kind/table
-{:column-names [(kind/hiccup
-                 [:div {:style {:background-color "#ccaabb"}} [:big ":x"]])
-                (kind/hiccup
-                 [:div {:style {:background-color "#aabbcc"}} [:big ":y"]])]
- :row-vectors [[(kind/md "*some text* **some more text**")
-                (kind/code "{:x (1 2 [3 4])}")]
-               [(tc/dataset {:x (range 3)
-                             :y (map inc (range 3))})
-                (random-vega-lite-plot 9)]
-               [(kind/hiccup [:div.clay-limit-image-width
-                              clay-image])
-                (kind/md "$x^2$")]]})
+
(kind/table
+{:column-names [(kind/hiccup
+                 [:div {:style {:background-color "#ccaabb"}} [:big ":x"]])
+                (kind/hiccup
+                 [:div {:style {:background-color "#aabbcc"}} [:big ":y"]])]
+ :row-vectors [[(kind/md "*some text* **some more text**")
+                (kind/code "{:x (1 2 [3 4])}")]
+               [(tc/dataset {:x (range 3)
+                             :y (map inc (range 3))})
+                (random-vega-lite-plot 9)]
+               [(kind/hiccup [:div.clay-limit-image-width
+                              clay-image])
+                (kind/md "$x^2$")]]})
@@ -2827,7 +2848,7 @@

23
- +
@@ -2841,17 +2862,17 @@

-
(kind/table
-{:column-names ["size" "square"]
- :row-vectors (for [i (range 20)]
-                (let [size (* i 10)
-                      px (str size "px")]
-                  [size
-                   (kind/hiccup
-                    [:div {:style {:height px
-                                   :width px
-                                   :background-color "purple"}}])]))}
-{:use-datatables true})
+
(kind/table
+{:column-names ["size" "square"]
+ :row-vectors (for [i (range 20)]
+                (let [size (* i 10)
+                      px (str size "px")]
+                  [size
+                   (kind/hiccup
+                    [:div {:style {:height px
+                                   :width px
+                                   :background-color "purple"}}])]))}
+{:use-datatables true})
@@ -2862,9 +2883,9 @@

2.28 More nesting examples

-
{:plot (random-vega-lite-plot 9)
- :dataset (tc/dataset {:x (range 3)
-                       :y (repeatedly 3 rand)})}
+
{:plot (random-vega-lite-plot 9)
+ :dataset (tc/dataset {:x (range 3)
+                       :y (repeatedly 3 rand)})}

{

@@ -2879,7 +2900,7 @@

<

@@ -2908,15 +2929,15 @@

<

- + - + - +
- +
00.676613530.58619712
10.245769330.94540266
20.663128850.36689373
@@ -2927,11 +2948,11 @@

<

}

-
[(random-vega-lite-plot 9)
- (tc/dataset {:x (range 3)
-              :y (repeatedly 3 rand)})]
+
[(random-vega-lite-plot 9)
+ (tc/dataset {:x (range 3)
+              :y (repeatedly 3 rand)})]
-

[

_unnamed [3 2]:

+

[

_unnamed [3 2]:

@@ -2942,15 +2963,15 @@

<

- + - + - +
00.172760990.61242635
10.648099810.93839449
20.755694740.01643640
diff --git a/docs/index.html b/docs/index.html index c488fb1..acb0150 100644 --- a/docs/index.html +++ b/docs/index.html @@ -451,23 +451,23 @@

0 -0.87579648 +0.88284188 1 -0.81939044 +0.16306047 2 -0.02319983 +0.88411049 3 -0.52619909 +0.98136176 4 -0.33584677 +0.61092961 @@ -817,31 +817,48 @@

1.13 Functions

kind/fn is a special kind. It is displayed by first evaluating a given function and arguments, then proceeding recursively with the resulting value.

-

If the value is a vector, the function is the first element, and the arguments are the rest.

+

The function can be specified through the Kindly options.

-
(kind/fn
-  [+ 1 2])
+
(kind/fn {:x 1
+          :y 2}
+  {:kindly/f (fn [{:keys [x y]}]
+               (+ x y))})
3
+
+
(kind/fn {:my-video-src "https://file-examples.com/storage/fe58a1f07d66f447a9512f1/2017/04/file_example_MP4_480_1_5MG.mp4"}
+  {:kindly/f (fn [{:keys [my-video-src]}]
+               (kind/video
+                {:src my-video-src}))})
+
+ +

If the value is a vector, the function is the first element, and the arguments are the rest.

+
+
(kind/fn
+  [+ 1 2])
+
+
+
3
+

If the value is a map, the function is held at the key :kindly/f, and the argument is the map.

-
(kind/fn
-  {:kindly/f (fn [{:keys [x y]}]
-               (+ x y))
-   :x 1
-   :y 2})
+
(kind/fn
+  {:kindly/f (fn [{:keys [x y]}]
+               (+ x y))
+   :x 1
+   :y 2})
-
3
+
3

The kind of the value returned by the function is respected. For example, here are examples with a function returning kind/dataset.

-
(kind/fn
-  [tc/dataset
-   {:x (range 3)
-    :y (repeatedly 3 rand)}])
+
(kind/fn
+  {:x (range 3)
+   :y (repeatedly 3 rand)}
+  {:kindly/f tc/dataset})

_unnamed [3 2]:

@@ -855,24 +872,24 @@

0 -0.12278199 +0.54076751 1 -0.03617038 +0.28227287 2 -0.25674164 +0.91635242

-
(kind/fn
-  {:kindly/f tc/dataset
-   :x (range 3)
-   :y (repeatedly 3 rand)})
+
(kind/fn
+  [tc/dataset
+   {:x (range 3)
+    :y (repeatedly 3 rand)}])

_unnamed [3 2]:

@@ -886,15 +903,46 @@

0 -0.93449865 +0.34786948 1 -0.91302175 +0.69907537 2 -0.28373468 +0.49935959 + + + +

+
+
(kind/fn
+  {:kindly/f tc/dataset
+   :x (range 3)
+   :y (repeatedly 3 rand)})
+
+
+

_unnamed [3 2]:

+ + + + + + + + + + + + + + + + + + +
:x:y
00.21493011
10.18138184
20.40711846
@@ -906,12 +954,12 @@

-
3
+
3

@@ -919,22 +967,29 @@

In data visualizations, one can directly refrer to files places under "notebooks/" or "src/". By default, all files except of these directories, except for Clojure files, are copied alongside the HTML target.

This default can be overridden using the :subdirs-to-sync config option. E.g., :subdirs-to-sync ["notebooks" "data"] will copy files from the "notebooks" and "data" directories, but not from "src". Clojure source files (.clj, etc.) are not synched.

-
(kind/hiccup
- [:img {:src "notebooks/images/Clay.svg.png"}])
+
(kind/hiccup
+ [:img {:src "notebooks/images/Clay.svg.png"}])
-
(kind/vega-lite
- {:data {:url "notebooks/datasets/iris.csv"},
-  :mark "rule",
-  :encoding {:opacity {:value 0.2}
-             :size {:value 3}
-             :x {:field "sepal_width", :type "quantitative"},
-             :x2 {:field "sepal_length", :type "quantitative"},
-             :y {:field "petal_width", :type "quantitative"},
-             :y2 {:field "petal_length", :type "quantitative"},
-             :color {:field "species", :type "nominal"}}
-  :background "floralwhite"})
+
(kind/image
+ {:src "notebooks/images/Clay.svg.png"})
+
+
+ +
+
+
(kind/vega-lite
+ {:data {:url "notebooks/datasets/iris.csv"},
+  :mark "rule",
+  :encoding {:opacity {:value 0.2}
+             :size {:value 3}
+             :x {:field "sepal_width", :type "quantitative"},
+             :x2 {:field "sepal_length", :type "quantitative"},
+             :y {:field "petal_width", :type "quantitative"},
+             :y2 {:field "petal_length", :type "quantitative"},
+             :color {:field "species", :type "nominal"}}
+  :background "floralwhite"})

@@ -951,20 +1006,20 @@

1.17 Test generation

(experimental 🛠)

-
(+ 1 2)
+
(+ 1 2)
-
3
+
3

We generate tests checking whether this last value is greater than 2.9. We can do it in a few ways.

We include the test annotations in the markdown text, since the annotations themselves are invisible.

-
(kind/test-last [> 2.9])
-
-^kind/test-last
-[> 2.9]
-
-(kindly/check > 2.9)
+
(kind/test-last [> 2.9])
+
+^kind/test-last
+[> 2.9]
+
+(kindly/check > 2.9)

See the generated test/index_generated_test.clj.

For a detailed example using this mechanism, see the source of the ClojisR tutorial.

@@ -975,10 +1030,10 @@

1.18.1 Styling HTML visualizations

Clay will transfer CSS classes and styles present in :kindly/options metadata to the visualization. The recommended way to prepare :kindly/options metadata is through the kind api:

-
(kind/table {:column-names ["A" "B" "C"]
-             :row-vectors  [[1 2 3] [4 5 6]]}
-            {:class "table-responsive"
-             :style {:background "#f8fff8"}})
+
(kind/table {:column-names ["A" "B" "C"]
+             :row-vectors  [[1 2 3] [4 5 6]]}
+            {:class "table-responsive"
+             :style {:background "#f8fff8"}})
@@ -1048,67 +1103,67 @@

(experimental)

kindly/merge-options! varies the options to affect the notes coming below. Let us use it to present code and value horizontally. By default, calls to kindly/merge-options! are hidden. In this document, we use #(kindly/hide-code % false) to make them visible.`

-
(kindly/hide-code
- (kindly/merge-options! {:code-and-value :horizontal})
- false)
+
(kindly/hide-code
+ (kindly/merge-options! {:code-and-value :horizontal})
+ false)
-
(+ 1 2)
+
(+ 1 2)
-
3
+
3
-
(+ 3 4)
+
(+ 3 4)
-
7
+
7

Let us change it back.

-
(kindly/hide-code
- (kindly/merge-options! {:code-and-value :vertical})
- false)
+
(kindly/hide-code
+ (kindly/merge-options! {:code-and-value :vertical})
+ false)
-
(+ 1 2)
+
(+ 1 2)
-
3
+
3
-
(+ 3 4)
+
(+ 3 4)
-
7
+
7

Let us now change the background color.

-
(kindly/hide-code
- (kindly/merge-options! {:style {:background-color "#ccddee"}})
- false)
+
(kindly/hide-code
+ (kindly/merge-options! {:style {:background-color "#ccddee"}})
+ false)
-
(kind/hiccup
- [:div
-  [:p "hello"]])
+
(kind/hiccup
+ [:div
+  [:p "hello"]])

hello

In Quarto-based rendering, datasets are rendered as plain Markdown, and HTML options are not applied at the moment.

-
(tc/dataset {:x (range 3)})
+
(tc/dataset {:x (range 3)})

_unnamed [3 1]:

@@ -1133,9 +1188,9 @@

To make sure the background color is applied, we wrap it with Hiccup.

-
(kind/hiccup
- [:div
-  (tc/dataset {:x (range 3)})])
+
(kind/hiccup
+ [:div
+  (tc/dataset {:x (range 3)})])

_unnamed [3 1]:

@@ -1159,14 +1214,14 @@

Let us cancel the setting of the background color.

-
(kindly/hide-code
- (kindly/merge-options! {:style {:background-color nil}})
- false)
+
(kindly/hide-code
+ (kindly/merge-options! {:style {:background-color nil}})
+ false)
-
(kind/hiccup
- [:div
-  [:p "hello"]])
+
(kind/hiccup
+ [:div
+  [:p "hello"]])

hello

diff --git a/docs/search.json b/docs/search.json index 43e7dfd..6963724 100644 --- a/docs/search.json +++ b/docs/search.json @@ -74,7 +74,7 @@ "href": "index.html#example-notebook-namespace", "title": "Clay Documentation", "section": "1.7 Example notebook namespace", - "text": "1.7 Example notebook namespace\nThis notebook is created by a Clojure namespace. Here is the namespace definition and a few examples of what such a namespace may contain.\n\n(ns index\n (:require\n [scicloj.kindly.v4.api :as kindly]\n [scicloj.kindly.v4.kind :as kind]\n [scicloj.clay.v2.quarto.highlight-styles :as quarto.highlight-styles]\n [scicloj.clay.v2.quarto.themes :as quarto.themes]\n [scicloj.metamorph.ml.toydata :as toydata]\n [scicloj.hanamicloth.v1.api :as haclo]\n [tablecloth.api :as tc]\n [clojure.string :as str]))\n\nA Hiccup spec:\n\n(kind/hiccup\n [:div {:style {:background \"#efe9e6\"\n :border-style :solid}}\n [:ul\n [:li \"one\"]\n [:li \"two\"]\n [:li \"three\"]]])\n\nonetwothree\nA dataset using Tablecloth:\n\n(-> {:x (range 5)\n :y (repeatedly 5 rand)}\n tc/dataset\n (tc/set-dataset-name \"my dataset\"))\n\n\nmy dataset [5 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n0.87579648\n\n\n1\n0.81939044\n\n\n2\n0.02319983\n\n\n3\n0.52619909\n\n\n4\n0.33584677\n\n\n\n\nA plot using Hanamicloth:\n\n(-> (toydata/iris-ds)\n (haclo/plot haclo/rule-chart\n {:=x :sepal_width\n :=x2 :sepal_length\n :=y :petal_width\n :=y2 :petal_length\n :=color :species\n :=color-type :nominal\n :=mark-size 3\n :=mark-opacity 0.2}))", + "text": "1.7 Example notebook namespace\nThis notebook is created by a Clojure namespace. Here is the namespace definition and a few examples of what such a namespace may contain.\n\n(ns index\n (:require\n [scicloj.kindly.v4.api :as kindly]\n [scicloj.kindly.v4.kind :as kind]\n [scicloj.clay.v2.quarto.highlight-styles :as quarto.highlight-styles]\n [scicloj.clay.v2.quarto.themes :as quarto.themes]\n [scicloj.metamorph.ml.toydata :as toydata]\n [scicloj.hanamicloth.v1.api :as haclo]\n [tablecloth.api :as tc]\n [clojure.string :as str]))\n\nA Hiccup spec:\n\n(kind/hiccup\n [:div {:style {:background \"#efe9e6\"\n :border-style :solid}}\n [:ul\n [:li \"one\"]\n [:li \"two\"]\n [:li \"three\"]]])\n\nonetwothree\nA dataset using Tablecloth:\n\n(-> {:x (range 5)\n :y (repeatedly 5 rand)}\n tc/dataset\n (tc/set-dataset-name \"my dataset\"))\n\n\nmy dataset [5 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n0.88284188\n\n\n1\n0.16306047\n\n\n2\n0.88411049\n\n\n3\n0.98136176\n\n\n4\n0.61092961\n\n\n\n\nA plot using Hanamicloth:\n\n(-> (toydata/iris-ds)\n (haclo/plot haclo/rule-chart\n {:=x :sepal_width\n :=x2 :sepal_length\n :=y :petal_width\n :=y2 :petal_length\n :=color :species\n :=color-type :nominal\n :=mark-size 3\n :=mark-opacity 0.2}))", "crumbs": [ "1  Clay" ] @@ -134,7 +134,7 @@ "href": "index.html#functions", "title": "Clay Documentation", "section": "1.13 Functions", - "text": "1.13 Functions\nkind/fn is a special kind. It is displayed by first evaluating a given function and arguments, then proceeding recursively with the resulting value.\nIf the value is a vector, the function is the first element, and the arguments are the rest.\n\n(kind/fn\n [+ 1 2])\n\n\n3\n\nIf the value is a map, the function is held at the key :kindly/f, and the argument is the map.\n\n(kind/fn\n {:kindly/f (fn [{:keys [x y]}]\n (+ x y))\n :x 1\n :y 2})\n\n\n3\n\nThe kind of the value returned by the function is respected. For example, here are examples with a function returning kind/dataset.\n\n(kind/fn\n [tc/dataset\n {:x (range 3)\n :y (repeatedly 3 rand)}])\n\n\n_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n0.12278199\n\n\n1\n0.03617038\n\n\n2\n0.25674164\n\n\n\n\n\n(kind/fn\n {:kindly/f tc/dataset\n :x (range 3)\n :y (repeatedly 3 rand)})\n\n\n_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n0.93449865\n\n\n1\n0.91302175\n\n\n2\n0.28373468", + "text": "1.13 Functions\nkind/fn is a special kind. It is displayed by first evaluating a given function and arguments, then proceeding recursively with the resulting value.\nThe function can be specified through the Kindly options.\n\n(kind/fn {:x 1\n :y 2}\n {:kindly/f (fn [{:keys [x y]}]\n (+ x y))})\n\n\n3\n\n\n(kind/fn {:my-video-src \"https://file-examples.com/storage/fe58a1f07d66f447a9512f1/2017/04/file_example_MP4_480_1_5MG.mp4\"}\n {:kindly/f (fn [{:keys [my-video-src]}]\n (kind/video\n {:src my-video-src}))})\n\n\nIf the value is a vector, the function is the first element, and the arguments are the rest.\n\n(kind/fn\n [+ 1 2])\n\n\n3\n\nIf the value is a map, the function is held at the key :kindly/f, and the argument is the map.\n\n(kind/fn\n {:kindly/f (fn [{:keys [x y]}]\n (+ x y))\n :x 1\n :y 2})\n\n\n3\n\nThe kind of the value returned by the function is respected. For example, here are examples with a function returning kind/dataset.\n\n(kind/fn\n {:x (range 3)\n :y (repeatedly 3 rand)}\n {:kindly/f tc/dataset})\n\n\n_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n0.54076751\n\n\n1\n0.28227287\n\n\n2\n0.91635242\n\n\n\n\n\n(kind/fn\n [tc/dataset\n {:x (range 3)\n :y (repeatedly 3 rand)}])\n\n\n_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n0.34786948\n\n\n1\n0.69907537\n\n\n2\n0.49935959\n\n\n\n\n\n(kind/fn\n {:kindly/f tc/dataset\n :x (range 3)\n :y (repeatedly 3 rand)})\n\n\n_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n0.21493011\n\n\n1\n0.18138184\n\n\n2\n0.40711846", "crumbs": [ "1  Clay" ] @@ -154,7 +154,7 @@ "href": "index.html#referring-to-files", "title": "Clay Documentation", "section": "1.15 Referring to files", - "text": "1.15 Referring to files\nIn data visualizations, one can directly refrer to files places under \"notebooks/\" or \"src/\". By default, all files except of these directories, except for Clojure files, are copied alongside the HTML target.\nThis default can be overridden using the :subdirs-to-sync config option. E.g., :subdirs-to-sync [\"notebooks\" \"data\"] will copy files from the \"notebooks\" and \"data\" directories, but not from \"src\". Clojure source files (.clj, etc.) are not synched.\n\n(kind/hiccup\n [:img {:src \"notebooks/images/Clay.svg.png\"}])\n\n\n\n(kind/vega-lite\n {:data {:url \"notebooks/datasets/iris.csv\"},\n :mark \"rule\",\n :encoding {:opacity {:value 0.2}\n :size {:value 3}\n :x {:field \"sepal_width\", :type \"quantitative\"},\n :x2 {:field \"sepal_length\", :type \"quantitative\"},\n :y {:field \"petal_width\", :type \"quantitative\"},\n :y2 {:field \"petal_length\", :type \"quantitative\"},\n :color {:field \"species\", :type \"nominal\"}}\n :background \"floralwhite\"})", + "text": "1.15 Referring to files\nIn data visualizations, one can directly refrer to files places under \"notebooks/\" or \"src/\". By default, all files except of these directories, except for Clojure files, are copied alongside the HTML target.\nThis default can be overridden using the :subdirs-to-sync config option. E.g., :subdirs-to-sync [\"notebooks\" \"data\"] will copy files from the \"notebooks\" and \"data\" directories, but not from \"src\". Clojure source files (.clj, etc.) are not synched.\n\n(kind/hiccup\n [:img {:src \"notebooks/images/Clay.svg.png\"}])\n\n\n\n(kind/image\n {:src \"notebooks/images/Clay.svg.png\"})\n\n\n\n\n\n(kind/vega-lite\n {:data {:url \"notebooks/datasets/iris.csv\"},\n :mark \"rule\",\n :encoding {:opacity {:value 0.2}\n :size {:value 3}\n :x {:field \"sepal_width\", :type \"quantitative\"},\n :x2 {:field \"sepal_length\", :type \"quantitative\"},\n :y {:field \"petal_width\", :type \"quantitative\"},\n :y2 {:field \"petal_length\", :type \"quantitative\"},\n :color {:field \"species\", :type \"nominal\"}}\n :background \"floralwhite\"})", "crumbs": [ "1  Clay" ] @@ -294,7 +294,7 @@ "href": "clay_book.examples.html#images", "title": "2  Examples", "section": "2.9 Images", - "text": "2.9 Images\nJava BufferedImage objects are displayed as images.\n\n(import javax.imageio.ImageIO\n java.net.URL)\n\n\njava.net.URL\n\n\n(defonce clay-image\n (-> \"https://upload.wikimedia.org/wikipedia/commons/2/2c/Clay-ss-2005.jpg\"\n (URL.)\n (ImageIO/read)))\n\n\nclay-image", + "text": "2.9 Images\nJava BufferedImage objects are displayed as images.\n\n(import javax.imageio.ImageIO\n java.net.URL)\n\n\njava.net.URL\n\n\n(defonce clay-image\n (-> \"https://upload.wikimedia.org/wikipedia/commons/2/2c/Clay-ss-2005.jpg\"\n (URL.)\n (ImageIO/read)))\n\n\nclay-image\n\n\n\n\nUrls to images can be annotated as images as well.\n\n(kind/image\n {:src \"https://upload.wikimedia.org/wikipedia/commons/2/2c/Clay-ss-2005.jpg\"})\n\n\n\n\nOther image representations are currently not supported.\n\n(kind/image\n \"AN IMAGE\")\n\n\nunsupported image format", "crumbs": [ "2  Examples" ] @@ -304,7 +304,7 @@ "href": "clay_book.examples.html#plain-data-structures", "title": "2  Examples", "section": "2.10 Plain data structures", - "text": "2.10 Plain data structures\nPlain 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.\n\n(def people-as-maps\n (->> (range 29)\n (mapv (fn [i]\n {:preferred-language ([\"clojure\" \"clojurescript\" \"babashka\"]\n (rand-int 3))\n :age (rand-int 100)}))))\n\n\n(def people-as-vectors\n (->> people-as-maps\n (mapv (juxt :preferred-language :age))))\n\n\n(take 5 people-as-maps)\n\n\n({:preferred-language \"babashka\", :age 88}\n {:preferred-language \"clojurescript\", :age 75}\n {:preferred-language \"clojure\", :age 83}\n {:preferred-language \"clojure\", :age 66}\n {:preferred-language \"clojure\", :age 64})\n\n\n(take 5 people-as-vectors)\n\n\n([\"babashka\" 88]\n [\"clojurescript\" 75]\n [\"clojure\" 83]\n [\"clojure\" 66]\n [\"clojure\" 64])\n\n\n(->> people-as-vectors\n (take 5)\n set)\n\n\n#{[\"clojure\" 66]\n [\"clojure\" 64]\n [\"babashka\" 88]\n [\"clojure\" 83]\n [\"clojurescript\" 75]}\n\nWhen something inside needs to be displayed in a special kind of way, the data structures are printed in a way that makes that clear.\n\n(def nested-structure-1\n {:vector-of-numbers [2 9 -1]\n :vector-of-different-things [\"hi\"\n (kind/hiccup\n [:big [:big \"hello\"]])]\n :map-of-different-things {:markdown (kind/md [\"*hi*, **hi**\"])\n :number 9999}\n :hiccup (kind/hiccup\n [:big [:big \"bye\"]])\n :dataset (tc/dataset {:x (range 3)\n :y [:A :B :C]})})\n\n\nnested-structure-1\n\n{:vector-of-numbers [2 9 -1]\n\n\n\n\n\n\n\n\n:vector-of-different-things\n\n\n\n[\n\n\n\"hi\"\n\nhello\n\n]\n\n\n\n\n\n\n\n\n\n\n\n\n\n:map-of-different-things\n\n\n\n{\n\n\n\n\n\n\n\n\n\n:markdown\n\n\n\nhi, hi\n\n\n\n\n\n\n:number 9999\n\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n:hiccup\n\n\nbye\n\n\n\n\n\n\n\n\n\n\n\n\n:dataset\n\n\n\n_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n:A\n\n\n1\n:B\n\n\n2\n:C\n\n\n\n\n\n\n\n\n}", + "text": "2.10 Plain data structures\nPlain 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.\n\n(def people-as-maps\n (->> (range 29)\n (mapv (fn [i]\n {:preferred-language ([\"clojure\" \"clojurescript\" \"babashka\"]\n (rand-int 3))\n :age (rand-int 100)}))))\n\n\n(def people-as-vectors\n (->> people-as-maps\n (mapv (juxt :preferred-language :age))))\n\n\n(take 5 people-as-maps)\n\n\n({:preferred-language \"clojure\", :age 61}\n {:preferred-language \"clojure\", :age 91}\n {:preferred-language \"clojure\", :age 84}\n {:preferred-language \"babashka\", :age 74}\n {:preferred-language \"clojurescript\", :age 60})\n\n\n(take 5 people-as-vectors)\n\n\n([\"clojure\" 61]\n [\"clojure\" 91]\n [\"clojure\" 84]\n [\"babashka\" 74]\n [\"clojurescript\" 60])\n\n\n(->> people-as-vectors\n (take 5)\n set)\n\n\n#{[\"babashka\" 74]\n [\"clojure\" 61]\n [\"clojurescript\" 60]\n [\"clojure\" 84]\n [\"clojure\" 91]}\n\nWhen something inside needs to be displayed in a special kind of way, the data structures are printed in a way that makes that clear.\n\n(def nested-structure-1\n {:vector-of-numbers [2 9 -1]\n :vector-of-different-things [\"hi\"\n (kind/hiccup\n [:big [:big \"hello\"]])]\n :map-of-different-things {:markdown (kind/md [\"*hi*, **hi**\"])\n :number 9999}\n :hiccup (kind/hiccup\n [:big [:big \"bye\"]])\n :dataset (tc/dataset {:x (range 3)\n :y [:A :B :C]})})\n\n\nnested-structure-1\n\n{:vector-of-numbers [2 9 -1]\n\n\n\n\n\n\n\n\n:vector-of-different-things\n\n\n\n[\n\n\n\"hi\"\n\nhello\n\n]\n\n\n\n\n\n\n\n\n\n\n\n\n\n:map-of-different-things\n\n\n\n{\n\n\n\n\n\n\n\n\n\n:markdown\n\n\n\nhi, hi\n\n\n\n\n\n\n:number 9999\n\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n:hiccup\n\n\nbye\n\n\n\n\n\n\n\n\n\n\n\n\n:dataset\n\n\n\n_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n:A\n\n\n1\n:B\n\n\n2\n:C\n\n\n\n\n\n\n\n\n}", "crumbs": [ "2  Examples" ] @@ -324,7 +324,7 @@ "href": "clay_book.examples.html#datasets", "title": "2  Examples", "section": "2.12 Datasets", - "text": "2.12 Datasets\ntech.ml.dataset datasets currently use the default printing of the library,\nLet us create such a dataset using Tablecloth.\n\n(require '[tablecloth.api :as tc])\n\n\n(-> {:x (range 6)\n :y [:A :B :C :A :B :C]}\n tc/dataset)\n\n\n_unnamed [6 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n:A\n\n\n1\n:B\n\n\n2\n:C\n\n\n3\n:A\n\n\n4\n:B\n\n\n5\n:C\n\n\n\n\n\n(-> {:x [1 [2 3] 4]\n :y [:A :B :C]}\n tc/dataset)\n\n\n_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n1\n:A\n\n\n[2 3]\n:B\n\n\n4\n:C\n\n\n\n\n\n(-> [{:x 1 :y 2 :z 3}\n {:y 4 :z 5}]\n tc/dataset)\n\n\n_unnamed [2 3]:\n\n\n\n:x\n:y\n:z\n\n\n\n\n1\n2\n3\n\n\n\n4\n5\n\n\n\n\n\n(-> people-as-maps\n tc/dataset)\n\n\n_unnamed [29 2]:\n\n\n\n:preferred-language\n:age\n\n\n\n\nbabashka\n88\n\n\nclojurescript\n75\n\n\nclojure\n83\n\n\nclojure\n66\n\n\nclojure\n64\n\n\nclojure\n5\n\n\nclojurescript\n15\n\n\nbabashka\n94\n\n\nclojure\n6\n\n\nclojurescript\n62\n\n\n…\n…\n\n\nbabashka\n32\n\n\nclojure\n42\n\n\nclojure\n70\n\n\nclojurescript\n10\n\n\nclojurescript\n43\n\n\nclojure\n23\n\n\nbabashka\n60\n\n\nbabashka\n22\n\n\nclojure\n86\n\n\nclojure\n40\n\n\nbabashka\n89\n\n\n\n\nSome kind options of kind/dataset control the way a dataset is printed.\n\n(-> {:x (range 30)}\n tc/dataset\n (kind/dataset {:dataset/print-range 6}))\n\n\n_unnamed [30 1]:\n\n\n\n:x\n\n\n\n\n0\n\n\n1\n\n\n2\n\n\n…\n\n\n26\n\n\n27\n\n\n28\n\n\n29", + "text": "2.12 Datasets\ntech.ml.dataset datasets currently use the default printing of the library,\nLet us create such a dataset using Tablecloth.\n\n(require '[tablecloth.api :as tc])\n\n\n(-> {:x (range 6)\n :y [:A :B :C :A :B :C]}\n tc/dataset)\n\n\n_unnamed [6 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n:A\n\n\n1\n:B\n\n\n2\n:C\n\n\n3\n:A\n\n\n4\n:B\n\n\n5\n:C\n\n\n\n\n\n(-> {:x [1 [2 3] 4]\n :y [:A :B :C]}\n tc/dataset)\n\n\n_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n1\n:A\n\n\n[2 3]\n:B\n\n\n4\n:C\n\n\n\n\n\n(-> [{:x 1 :y 2 :z 3}\n {:y 4 :z 5}]\n tc/dataset)\n\n\n_unnamed [2 3]:\n\n\n\n:x\n:y\n:z\n\n\n\n\n1\n2\n3\n\n\n\n4\n5\n\n\n\n\n\n(-> people-as-maps\n tc/dataset)\n\n\n_unnamed [29 2]:\n\n\n\n:preferred-language\n:age\n\n\n\n\nclojure\n61\n\n\nclojure\n91\n\n\nclojure\n84\n\n\nbabashka\n74\n\n\nclojurescript\n60\n\n\nclojurescript\n11\n\n\nclojure\n53\n\n\nclojurescript\n44\n\n\nclojure\n40\n\n\nclojurescript\n40\n\n\n…\n…\n\n\nclojure\n92\n\n\nbabashka\n24\n\n\nbabashka\n27\n\n\nclojurescript\n84\n\n\nbabashka\n22\n\n\nclojure\n64\n\n\nbabashka\n51\n\n\nclojurescript\n26\n\n\nclojure\n67\n\n\nclojure\n42\n\n\nbabashka\n51\n\n\n\n\nSome kind options of kind/dataset control the way a dataset is printed.\n\n(-> {:x (range 30)}\n tc/dataset\n (kind/dataset {:dataset/print-range 6}))\n\n\n_unnamed [30 1]:\n\n\n\n:x\n\n\n\n\n0\n\n\n1\n\n\n2\n\n\n…\n\n\n26\n\n\n27\n\n\n28\n\n\n29", "crumbs": [ "2  Examples" ] @@ -334,7 +334,7 @@ "href": "clay_book.examples.html#tables", "title": "2  Examples", "section": "2.13 Tables", - "text": "2.13 Tables\nThe :kind/table kind can be handy for an interactive table view. :kind/table understands many structures which can be rendered as a table.\nA map containing either :row-vectors (sequence of sequences) or row-maps (sequence of maps) keys with optional :column-names.\n\n(kind/table\n {:column-names [:preferred-language :age]\n :row-vectors people-as-vectors})\n\n\n\n\n\n\npreferred-language\nage\n\n\n\n\nbabashka\n88\n\n\nclojurescript\n75\n\n\nclojure\n83\n\n\nclojure\n66\n\n\nclojure\n64\n\n\nclojure\n5\n\n\nclojurescript\n15\n\n\nbabashka\n94\n\n\nclojure\n6\n\n\nclojurescript\n62\n\n\nclojurescript\n29\n\n\nclojurescript\n16\n\n\nclojurescript\n0\n\n\nbabashka\n48\n\n\nbabashka\n57\n\n\nclojure\n55\n\n\nbabashka\n41\n\n\nclojurescript\n53\n\n\nbabashka\n32\n\n\nclojure\n42\n\n\nclojure\n70\n\n\nclojurescript\n10\n\n\nclojurescript\n43\n\n\nclojure\n23\n\n\nbabashka\n60\n\n\nbabashka\n22\n\n\nclojure\n86\n\n\nclojure\n40\n\n\nbabashka\n89\n\n\n\n\n\nLack of column names produces table without a header.\n\n(kind/table\n {:row-vectors (take 5 people-as-vectors)})\n\n\n\n\n\n\nbabashka\n88\n\n\nclojurescript\n75\n\n\nclojure\n83\n\n\nclojure\n66\n\n\nclojure\n64\n\n\n\n\n\nColumn names are inferred from a sequence of maps\n\n(kind/table\n {:row-maps (take 5 people-as-maps)})\n\n\n\n\n\n\npreferred-language\nage\n\n\n\n\nbabashka\n88\n\n\nclojurescript\n75\n\n\nclojure\n83\n\n\nclojure\n66\n\n\nclojure\n64\n\n\n\n\n\nWe can limit displayed columns for sequence of maps case.\n\n(kind/table\n {:column-names [:preferred-language]\n :row-maps (take 5 people-as-maps)})\n\n\n\n\n\n\npreferred-language\n\n\n\n\nbabashka\n\n\nclojurescript\n\n\nclojure\n\n\nclojure\n\n\nclojure\n\n\n\n\n\nSequence of sequences and sequence of maps also work\n\n(kind/table (take 5 people-as-vectors))\n\n\n\n\n\n\nbabashka\n88\n\n\nclojurescript\n75\n\n\nclojure\n83\n\n\nclojure\n66\n\n\nclojure\n64\n\n\n\n\n\n\n(kind/table (take 5 people-as-maps))\n\n\n\n\n\n\npreferred-language\nage\n\n\n\n\nbabashka\n88\n\n\nclojurescript\n75\n\n\nclojure\n83\n\n\nclojure\n66\n\n\nclojure\n64\n\n\n\n\n\nAdditionally map of sequences is supported (unless it contains :row-vectors or :row-maps key, see such case above).\n\n(kind/table {:x (range 6)\n :y [:A :B :C :A :B :C]})\n\n\n\n\n\n\nx\ny\n\n\n\n\n0\nA\n\n\n1\nB\n\n\n2\nC\n\n\n3\nA\n\n\n4\nB\n\n\n5\nC\n\n\n\n\n\nA dataset can be also treated as a table input.\n\n(def people-as-dataset\n (tc/dataset people-as-maps))\n\n\n(-> people-as-dataset\n kind/table)\n\n\n\n\n\n\npreferred-language\nage\n\n\n\n\nbabashka\n88\n\n\nclojurescript\n75\n\n\nclojure\n83\n\n\nclojure\n66\n\n\nclojure\n64\n\n\nclojure\n5\n\n\nclojurescript\n15\n\n\nbabashka\n94\n\n\nclojure\n6\n\n\nclojurescript\n62\n\n\nclojurescript\n29\n\n\nclojurescript\n16\n\n\nclojurescript\n0\n\n\nbabashka\n48\n\n\nbabashka\n57\n\n\nclojure\n55\n\n\nbabashka\n41\n\n\nclojurescript\n53\n\n\nbabashka\n32\n\n\nclojure\n42\n\n\nclojure\n70\n\n\nclojurescript\n10\n\n\nclojurescript\n43\n\n\nclojure\n23\n\n\nbabashka\n60\n\n\nbabashka\n22\n\n\nclojure\n86\n\n\nclojure\n40\n\n\nbabashka\n89\n\n\n\n\n\nAdditional options may hint at way the table should be rendered.\n\n(-> people-as-dataset\n (kind/table {:element/max-height \"300px\"}))\n\n\n\n\n\n\n\npreferred-language\nage\n\n\n\n\nbabashka\n88\n\n\nclojurescript\n75\n\n\nclojure\n83\n\n\nclojure\n66\n\n\nclojure\n64\n\n\nclojure\n5\n\n\nclojurescript\n15\n\n\nbabashka\n94\n\n\nclojure\n6\n\n\nclojurescript\n62\n\n\nclojurescript\n29\n\n\nclojurescript\n16\n\n\nclojurescript\n0\n\n\nbabashka\n48\n\n\nbabashka\n57\n\n\nclojure\n55\n\n\nbabashka\n41\n\n\nclojurescript\n53\n\n\nbabashka\n32\n\n\nclojure\n42\n\n\nclojure\n70\n\n\nclojurescript\n10\n\n\nclojurescript\n43\n\n\nclojure\n23\n\n\nbabashka\n60\n\n\nbabashka\n22\n\n\nclojure\n86\n\n\nclojure\n40\n\n\nbabashka\n89\n\n\n\n\n\n\nIt is possible to use datatables to reneder kind/table, and in this case the user may specify datatables options (see the full list).\n\n(-> people-as-maps\n tc/dataset\n (kind/table {:use-datatables true}))\n\n\n\npreferred-languageagebabashka88clojurescript75clojure83clojure66clojure64clojure5clojurescript15babashka94clojure6clojurescript62clojurescript29clojurescript16clojurescript0babashka48babashka57clojure55babashka41clojurescript53babashka32clojure42clojure70clojurescript10clojurescript43clojure23babashka60babashka22clojure86clojure40babashka89\n\n\n\n(-> people-as-dataset\n (kind/table {:use-datatables true\n :datatables {:scrollY 300}}))\n\n\n\npreferred-languageagebabashka88clojurescript75clojure83clojure66clojure64clojure5clojurescript15babashka94clojure6clojurescript62clojurescript29clojurescript16clojurescript0babashka48babashka57clojure55babashka41clojurescript53babashka32clojure42clojure70clojurescript10clojurescript43clojure23babashka60babashka22clojure86clojure40babashka89", + "text": "2.13 Tables\nThe :kind/table kind can be handy for an interactive table view. :kind/table understands many structures which can be rendered as a table.\nA map containing either :row-vectors (sequence of sequences) or row-maps (sequence of maps) keys with optional :column-names.\n\n(kind/table\n {:column-names [:preferred-language :age]\n :row-vectors people-as-vectors})\n\n\n\n\n\n\npreferred-language\nage\n\n\n\n\nclojure\n61\n\n\nclojure\n91\n\n\nclojure\n84\n\n\nbabashka\n74\n\n\nclojurescript\n60\n\n\nclojurescript\n11\n\n\nclojure\n53\n\n\nclojurescript\n44\n\n\nclojure\n40\n\n\nclojurescript\n40\n\n\nbabashka\n52\n\n\nbabashka\n56\n\n\nclojurescript\n23\n\n\nclojurescript\n18\n\n\nclojure\n60\n\n\nclojure\n84\n\n\nclojurescript\n87\n\n\nbabashka\n59\n\n\nclojure\n92\n\n\nbabashka\n24\n\n\nbabashka\n27\n\n\nclojurescript\n84\n\n\nbabashka\n22\n\n\nclojure\n64\n\n\nbabashka\n51\n\n\nclojurescript\n26\n\n\nclojure\n67\n\n\nclojure\n42\n\n\nbabashka\n51\n\n\n\n\n\nLack of column names produces table without a header.\n\n(kind/table\n {:row-vectors (take 5 people-as-vectors)})\n\n\n\n\n\n\nclojure\n61\n\n\nclojure\n91\n\n\nclojure\n84\n\n\nbabashka\n74\n\n\nclojurescript\n60\n\n\n\n\n\nColumn names are inferred from a sequence of maps\n\n(kind/table\n {:row-maps (take 5 people-as-maps)})\n\n\n\n\n\n\npreferred-language\nage\n\n\n\n\nclojure\n61\n\n\nclojure\n91\n\n\nclojure\n84\n\n\nbabashka\n74\n\n\nclojurescript\n60\n\n\n\n\n\nWe can limit displayed columns for sequence of maps case.\n\n(kind/table\n {:column-names [:preferred-language]\n :row-maps (take 5 people-as-maps)})\n\n\n\n\n\n\npreferred-language\n\n\n\n\nclojure\n\n\nclojure\n\n\nclojure\n\n\nbabashka\n\n\nclojurescript\n\n\n\n\n\nSequence of sequences and sequence of maps also work\n\n(kind/table (take 5 people-as-vectors))\n\n\n\n\n\n\nclojure\n61\n\n\nclojure\n91\n\n\nclojure\n84\n\n\nbabashka\n74\n\n\nclojurescript\n60\n\n\n\n\n\n\n(kind/table (take 5 people-as-maps))\n\n\n\n\n\n\npreferred-language\nage\n\n\n\n\nclojure\n61\n\n\nclojure\n91\n\n\nclojure\n84\n\n\nbabashka\n74\n\n\nclojurescript\n60\n\n\n\n\n\nAdditionally map of sequences is supported (unless it contains :row-vectors or :row-maps key, see such case above).\n\n(kind/table {:x (range 6)\n :y [:A :B :C :A :B :C]})\n\n\n\n\n\n\nx\ny\n\n\n\n\n0\nA\n\n\n1\nB\n\n\n2\nC\n\n\n3\nA\n\n\n4\nB\n\n\n5\nC\n\n\n\n\n\nA dataset can be also treated as a table input.\n\n(def people-as-dataset\n (tc/dataset people-as-maps))\n\n\n(-> people-as-dataset\n kind/table)\n\n\n\n\n\n\npreferred-language\nage\n\n\n\n\nclojure\n61\n\n\nclojure\n91\n\n\nclojure\n84\n\n\nbabashka\n74\n\n\nclojurescript\n60\n\n\nclojurescript\n11\n\n\nclojure\n53\n\n\nclojurescript\n44\n\n\nclojure\n40\n\n\nclojurescript\n40\n\n\nbabashka\n52\n\n\nbabashka\n56\n\n\nclojurescript\n23\n\n\nclojurescript\n18\n\n\nclojure\n60\n\n\nclojure\n84\n\n\nclojurescript\n87\n\n\nbabashka\n59\n\n\nclojure\n92\n\n\nbabashka\n24\n\n\nbabashka\n27\n\n\nclojurescript\n84\n\n\nbabashka\n22\n\n\nclojure\n64\n\n\nbabashka\n51\n\n\nclojurescript\n26\n\n\nclojure\n67\n\n\nclojure\n42\n\n\nbabashka\n51\n\n\n\n\n\nAdditional options may hint at way the table should be rendered.\n\n(-> people-as-dataset\n (kind/table {:element/max-height \"300px\"}))\n\n\n\n\n\n\n\npreferred-language\nage\n\n\n\n\nclojure\n61\n\n\nclojure\n91\n\n\nclojure\n84\n\n\nbabashka\n74\n\n\nclojurescript\n60\n\n\nclojurescript\n11\n\n\nclojure\n53\n\n\nclojurescript\n44\n\n\nclojure\n40\n\n\nclojurescript\n40\n\n\nbabashka\n52\n\n\nbabashka\n56\n\n\nclojurescript\n23\n\n\nclojurescript\n18\n\n\nclojure\n60\n\n\nclojure\n84\n\n\nclojurescript\n87\n\n\nbabashka\n59\n\n\nclojure\n92\n\n\nbabashka\n24\n\n\nbabashka\n27\n\n\nclojurescript\n84\n\n\nbabashka\n22\n\n\nclojure\n64\n\n\nbabashka\n51\n\n\nclojurescript\n26\n\n\nclojure\n67\n\n\nclojure\n42\n\n\nbabashka\n51\n\n\n\n\n\n\nIt is possible to use datatables to reneder kind/table, and in this case the user may specify datatables options (see the full list).\n\n(-> people-as-maps\n tc/dataset\n (kind/table {:use-datatables true}))\n\n\n\npreferred-languageageclojure61clojure91clojure84babashka74clojurescript60clojurescript11clojure53clojurescript44clojure40clojurescript40babashka52babashka56clojurescript23clojurescript18clojure60clojure84clojurescript87babashka59clojure92babashka24babashka27clojurescript84babashka22clojure64babashka51clojurescript26clojure67clojure42babashka51\n\n\n\n(-> people-as-dataset\n (kind/table {:use-datatables true\n :datatables {:scrollY 300}}))\n\n\n\npreferred-languageageclojure61clojure91clojure84babashka74clojurescript60clojurescript11clojure53clojurescript44clojure40clojurescript40babashka52babashka56clojurescript23clojurescript18clojure60clojure84clojurescript87babashka59clojure92babashka24babashka27clojurescript84babashka22clojure64babashka51clojurescript26clojure67clojure42babashka51", "crumbs": [ "2  Examples" ] @@ -434,7 +434,7 @@ "href": "clay_book.examples.html#dmol.js", "title": "2  Examples", "section": "2.23 3DMol.js", - "text": "2.23 3DMol.js\nEmbedding a 3Dmol Viewer (original example):\n\n(kind/reagent\n ['(fn [{:keys [data-pdb]}]\n [:div {:style {:height \"400px\"\n :width \"400px\"\n :position :relative}\n :class \"viewer_3Dmoljs\"\n :data-pdb data-pdb\n :data-backgroundcolor \"0xffffff\"\n :data-style \"stick\"\n :data-ui true}])\n {:data-pdb \"2POR\"}]\n ;; Note we need to mention the dependency:\n {:html/deps [:three-d-mol]})\n\n\nUsing 3Dmol within your code (inspired by these examples):\n\n(defonce pdb-2POR\n(slurp \"https://files.rcsb.org/download/2POR.pdb\"))\n\n\n(kind/reagent\n['(fn [{:keys [pdb-data]}]\n [:div\n {:style {:width \"100%\"\n :height \"500px\"\n :position \"relative\"}\n :ref (fn [el]\n (let [config (clj->js\n {:backgroundColor \"0xffffff\"})\n viewer (.createViewer js/$3Dmol el)]\n (.setViewStyle viewer (clj->js\n {:style \"outline\"}))\n (.addModelsAsFrames viewer pdb-data \"pdb\")\n (.addSphere viewer (clj->js\n {:center {:x 0\n :y 0\n :z 0}\n :radius 5\n :color \"green\"\n :alpha 0.2}))\n (.zoomTo viewer)\n (.render viewer)\n (.zoom viewer 0.8 2000)))}])\n {:pdb-data pdb-2POR}]\n;; Note we need to mention the dependency:\n{:html/deps [:three-d-mol]})", + "text": "2.23 3DMol.js\nEmbedding a 3Dmol Viewer (original example):\n\n(kind/reagent\n ['(fn [{:keys [data-pdb]}]\n [:div {:style {:height \"400px\"\n :width \"400px\"\n :position :relative}\n :class \"viewer_3Dmoljs\"\n :data-pdb data-pdb\n :data-backgroundcolor \"0xffffff\"\n :data-style \"stick\"\n :data-ui true}])\n {:data-pdb \"2POR\"}]\n ;; Note we need to mention the dependency:\n {:html/deps [:three-d-mol]})\n\n\nUsing 3Dmol within your code (inspired by these examples):\n\n(defonce pdb-2POR\n(slurp \"https://files.rcsb.org/download/2POR.pdb\"))\n\n\n(kind/reagent\n ['(fn [{:keys [pdb-data]}]\n [:div\n {:style {:width \"100%\"\n :height \"500px\"\n :position \"relative\"}\n :ref (fn [el]\n (let [config (clj->js\n {:backgroundColor \"0xffffff\"})\n viewer (.createViewer js/$3Dmol el)]\n (.setViewStyle viewer (clj->js\n {:style \"outline\"}))\n (.addModelsAsFrames viewer pdb-data \"pdb\")\n (.addSphere viewer (clj->js\n {:center {:x 0\n :y 0\n :z 0}\n :radius 5\n :color \"green\"\n :alpha 0.2}))\n (.zoomTo viewer)\n (.render viewer)\n (.zoom viewer 0.8 2000)))}])\n {:pdb-data pdb-2POR}]\n ;; Note we need to mention the dependency:\n {:html/deps [:three-d-mol]})", "crumbs": [ "2  Examples" ] @@ -444,7 +444,7 @@ "href": "clay_book.examples.html#video", "title": "2  Examples", "section": "2.24 Video", - "text": "2.24 Video\n\n(kind/video {:youtube-id \"DAQnvAgBma8\"})\n\n\n\n(kind/video {:youtube-id \"DAQnvAgBma8\"\n :allowfullscreen false})\n\n\n\n(kind/video {:youtube-id \"DAQnvAgBma8\"\n :iframe-width 480\n :iframe-height 270})\n\n\n\n(kind/video {:youtube-id \"DAQnvAgBma8\"\n :embed-options {:mute 1\n :controls 0}})\n\n\nSee, e.g., HTML Youtube Videos on w3schools.", + "text": "2.24 Video\nVideos can be specified as urls (possibly to local files):\n\n(kind/video {:src \"https://file-examples.com/storage/fe58a1f07d66f447a9512f1/2017/04/file_example_MP4_480_1_5MG.mp4\"})\n\n\nVideos can also be specified as youtube videos: See, e.g., HTML Youtube Videos on w3schools.\n\n(kind/video {:youtube-id \"DAQnvAgBma8\"})\n\n\n\n(kind/video {:youtube-id \"DAQnvAgBma8\"\n :allowfullscreen false})\n\n\n\n(kind/video {:youtube-id \"DAQnvAgBma8\"\n :iframe-width 480\n :iframe-height 270})\n\n\n\n(kind/video {:youtube-id \"DAQnvAgBma8\"\n :embed-options {:mute 1\n :controls 0}})", "crumbs": [ "2  Examples" ] @@ -484,7 +484,7 @@ "href": "clay_book.examples.html#more-nesting-examples", "title": "2  Examples", "section": "2.28 More nesting examples", - "text": "2.28 More nesting examples\n\n{:plot (random-vega-lite-plot 9)\n :dataset (tc/dataset {:x (range 3)\n :y (repeatedly 3 rand)})}\n\n{\n\n\n\n\n\n\n\n\n:plot\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n:dataset\n\n\n\n_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n0.67661353\n\n\n1\n0.24576933\n\n\n2\n0.66312885\n\n\n\n\n\n\n\n\n}\n\n[(random-vega-lite-plot 9)\n (tc/dataset {:x (range 3)\n :y (repeatedly 3 rand)})]\n\n[_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n0.17276099\n\n\n1\n0.64809981\n\n\n2\n0.75569474\n\n\n\n]\n\nsource: notebooks/clay_book/examples.clj", + "text": "2.28 More nesting examples\n\n{:plot (random-vega-lite-plot 9)\n :dataset (tc/dataset {:x (range 3)\n :y (repeatedly 3 rand)})}\n\n{\n\n\n\n\n\n\n\n\n:plot\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n:dataset\n\n\n\n_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n0.58619712\n\n\n1\n0.94540266\n\n\n2\n0.36689373\n\n\n\n\n\n\n\n\n}\n\n[(random-vega-lite-plot 9)\n (tc/dataset {:x (range 3)\n :y (repeatedly 3 rand)})]\n\n[_unnamed [3 2]:\n\n\n\n:x\n:y\n\n\n\n\n0\n0.61242635\n\n\n1\n0.93839449\n\n\n2\n0.01643640\n\n\n\n]\n\nsource: notebooks/clay_book/examples.clj", "crumbs": [ "2  Examples" ] diff --git a/test/index_generated_test.clj b/test/index_generated_test.clj index 6e87fb0..def3c03 100644 --- a/test/index_generated_test.clj +++ b/test/index_generated_test.clj @@ -1,8 +1,8 @@ -(def var0 nil) +(def var0_line1 nil) (def - var1 + var1_line5 [:img {:style {:width "100px"}, :src @@ -10,19 +10,19 @@ :alt "Clay logo"}]) -(def var2 nil) +(def var2_line10 nil) (def - var3 + var3_line42 ["(require '[scicloj.clay.v2.api :as clay])\n(clay/make! {:source-path \"notebooks/index.clj\"})"]) -(def var4 nil) +(def var4_line44 nil) (def - var5 + var5_line66 (->> [["June 10th 2023" "An early overview - babashka-conf" "HvhMsv3iVGM"] ["Dec. 1st 2023" @@ -46,23 +46,23 @@ (into [:table]))) -(def var6 nil) +(def var6_line94 nil) (def - var7 + var7_line138 ["(do (require '[scicloj.clay.v2.api :as clay])\n (clay/make! {:single-form '~form-before-caret\n :source-path [\"~file-path\"]}))"]) -(def var8 nil) +(def var8_line141 nil) (def - var9 + var9_line146 ["(do (require '[scicloj.clay.v2.api :as clay])\n (clay/make! {:source-path [\"~file-path\"]}))"]) -(def var10 nil) +(def var10_line148 nil) (ns @@ -79,33 +79,33 @@ [clojure.test :refer [deftest is]])) -(def var12 nil) +(def var12_line171 nil) (def - var13 + var13_line172 (kind/hiccup [:div {:style {:background "#efe9e6", :border-style :solid}} [:ul [:li "one"] [:li "two"] [:li "three"]]])) -(def var14 nil) +(def var14_line180 nil) (def - var15 + var15_line181 (-> {:x (range 5), :y (repeatedly 5 rand)} tc/dataset (tc/set-dataset-name "my dataset"))) -(def var16 nil) +(def var16_line186 nil) (def - var17 + var17_line187 (-> (toydata/iris-ds) (haclo/plot @@ -120,126 +120,128 @@ :=mark-opacity 0.2}))) -(def var18 nil) +(def var18_line198 nil) -(def var19 (require '[scicloj.clay.v2.api :as clay])) +(def var19_line200 (require '[scicloj.clay.v2.api :as clay])) -(def var20 nil) +(def var20_line202 nil) (def - var21 + var21_line209 (comment (clay/make! {:format [:html], :source-path "notebooks/index.clj"}))) -(def var22 nil) +(def var22_line213 nil) -(def var23 (comment (clay/make! {:source-path "notebooks/index.clj"}))) +(def + var23_line215 + (comment (clay/make! {:source-path "notebooks/index.clj"}))) -(def var24 nil) +(def var24_line218 nil) (def - var25 + var25_line222 (comment (clay/make! {:source-path "notebooks/index.clj", :show false}))) -(def var26 nil) +(def var26_line226 nil) (def - var27 + var27_line229 (comment (clay/make! {:source-path "notebooks/index.clj", :favicon "notebooks/favicon.ico"}))) -(def var28 nil) +(def var28_line233 nil) (def - var29 + var29_line237 (comment (clay/make! {:source-path ["notebooks/slides.clj" "notebooks/index.clj"], :show false}))) -(def var30 nil) +(def var30_line242 nil) (def - var31 + var31_line246 (comment (clay/make! {:source-path "notebooks/index.clj", :single-form '(+ 1 2)}))) -(def var32 nil) +(def var32_line250 nil) -(def var33 (comment (clay/make! {:single-form '(+ 1 2)}))) +(def var33_line254 (comment (clay/make! {:single-form '(+ 1 2)}))) -(def var34 nil) +(def var34_line257 nil) -(def var35 (comment (clay/make! {:single-value 3}))) +(def var35_line260 (comment (clay/make! {:single-value 3}))) -(def var36 nil) +(def var36_line263 nil) (def - var37 + var37_line267 (comment (clay/make! {:single-value 3333, :post-process (fn [html] (-> html (str/replace #"3333" "4444")))}))) -(def var38 nil) +(def var38_line273 nil) (def - var39 + var39_line276 (comment (clay/make! {:source-path "notebooks/index.clj", :hide-ui-header true}))) -(def var40 nil) +(def var40_line280 nil) (def - var41 + var41_line283 (comment (clay/make! {:source-path "notebooks/index.clj", :hide-info-line true}))) -(def var42 nil) +(def var42_line287 nil) (def - var43 + var43_line292 (comment (clay/make! {:format [:quarto :html], :source-path "notebooks/index.clj"}))) -(def var44 nil) +(def var44_line296 nil) (def - var45 + var45_line303 (comment (clay/make! {:format [:quarto :html], @@ -247,31 +249,31 @@ :run-quarto false}))) -(def var46 nil) +(def var46_line308 nil) (def - var47 + var47_line314 (comment (clay/make! {:format [:quarto :html], :source-path "notebooks/slides.clj"}))) -(def var48 nil) +(def var48_line318 nil) (def - var49 + var49_line324 (comment (clay/make! {:format [:quarto :revealjs], :source-path "notebooks/slides.clj"}))) -(def var50 nil) +(def var50_line328 nil) (def - var51 + var51_line334 (comment (clay/make! {:format [:quarto :html], @@ -280,11 +282,11 @@ {:highlight-style :nord, :format {:html {:theme :journal}}}}))) -(def var52 nil) +(def var52_line340 nil) (def - var53 + var53_line350 (comment (require '[scicloj.clay.v2.quarto.highlight-styles @@ -299,21 +301,21 @@ :format {:html {:theme quarto.themes/journal}}}}))) -(def var54 nil) +(def var54_line358 nil) (def - var55 + var55_line363 (comment (clay/make! {:base-source-path "notebooks/", :source-path "index.clj"}))) -(def var56 nil) +(def var56_line367 nil) (def - var57 + var57_line369 (comment (clay/make! {:format [:quarto :html], @@ -328,11 +330,11 @@ :clean-up-target-dir true}))) -(def var58 nil) +(def var58_line382 nil) (def - var59 + var59_line384 (comment (clay/make! {:format [:quarto :html], @@ -343,11 +345,11 @@ :clean-up-target-dir true}))) -(def var60 nil) +(def var60_line396 nil) (def - var61 + var61_line398 (comment (clay/make! {:format [:quarto :html], @@ -360,25 +362,25 @@ :clean-up-target-dir true}))) -(def var62 nil) +(def var62_line411 nil) -(def var63 (comment (clay/browse!))) +(def var63_line414 (comment (clay/browse!))) -(def var64 nil) +(def var64_line417 nil) (def - var65 + var65_line423 (comment (clay/make-hiccup {:source-path "notebooks/index.clj"}))) -(def var66 nil) +(def var66_line426 nil) (def - var67 + var67_line488 (->> ["purple" "darkgreen" "brown"] (mapcat @@ -392,50 +394,81 @@ kind/fragment)) -(def var68 (->> (range 3) kind/fragment)) +(def var68_line496 (->> (range 3) kind/fragment)) + + +(def var69_line499 nil) + +(def + var70_line508 + (kind/fn {:x 1, :y 2} #:kindly{:f (fn [{:keys [x y]}] (+ x y))})) + + +(def + var71_line513 + (kind/fn + {:my-video-src + "https://file-examples.com/storage/fe58a1f07d66f447a9512f1/2017/04/file_example_MP4_480_1_5MG.mp4"} + #:kindly{:f + (fn + [{:keys [my-video-src]}] + (kind/video {:src my-video-src}))})) -(def var69 nil) +(def var72_line518 nil) -(def var70 (kind/fn [+ 1 2])) +(def var73_line520 (kind/fn [+ 1 2])) -(def var71 nil) + +(def var74_line523 nil) (def - var72 + var75_line525 (kind/fn {:kindly/f (fn [{:keys [x y]}] (+ x y)), :x 1, :y 2})) -(def var73 nil) +(def var76_line531 nil) + + +(def + var77_line534 + (kind/fn + {:x (range 3), :y (repeatedly 3 rand)} + #:kindly{:f tc/dataset})) (def - var74 + var78_line539 (kind/fn [tc/dataset {:x (range 3), :y (repeatedly 3 rand)}])) (def - var75 + var79_line544 (kind/fn {:kindly/f tc/dataset, :x (range 3), :y (repeatedly 3 rand)})) -(def var76 nil) +(def var80_line549 nil) -(def var77 (delay (Thread/sleep 500) (+ 1 2))) +(def var81_line557 (delay (Thread/sleep 500) (+ 1 2))) -(def var78 nil) +(def var82_line561 nil) + + +(def + var83_line567 + (kind/hiccup [:img {:src "notebooks/images/Clay.svg.png"}])) -(def var79 (kind/hiccup [:img {:src "notebooks/images/Clay.svg.png"}])) +(def var84_line570 (kind/image {:src "notebooks/images/Clay.svg.png"})) (def - var80 + var85_line573 (kind/vega-lite {:data {:url "notebooks/datasets/iris.csv"}, :mark "rule", @@ -450,106 +483,106 @@ :background "floralwhite"})) -(def var81 nil) +(def var86_line585 nil) -(def var82 (+ 1 2)) +(def var87_line598 (+ 1 2)) -(deftest test83 (is (> var82 2.9))) +(deftest test88_line600 (is (> var87_line598 2.9))) -(deftest test84 (is (> var82 2.9))) +(deftest test89_line603 (is (> var87_line598 2.9))) -(deftest test85 (is (> var82 2.9))) +(deftest test90_line605 (is (> var87_line598 2.9))) -(def var86 nil) +(def var91_line607 nil) (def - var87 + var92_line614 (kindly/hide-code (kind/code "(kind/test-last [> 2.9])\n\n^kind/test-last\n[> 2.9]\n\n(kindly/check > 2.9)"))) -(def var88 nil) +(def var93_line623 nil) (def - var89 + var94_line633 (kind/table {:column-names ["A" "B" "C"], :row-vectors [[1 2 3] [4 5 6]]} {:class "table-responsive", :style {:background "#f8fff8"}})) -(def var90 nil) +(def var95_line638 nil) (def - var91 + var96_line669 (kindly/hide-code (kindly/merge-options! {:code-and-value :horizontal}) false)) -(def var92 (+ 1 2)) +(def var97_line673 (+ 1 2)) -(def var93 (+ 3 4)) +(def var98_line675 (+ 3 4)) -(def var94 nil) +(def var99_line677 nil) (def - var95 + var100_line679 (kindly/hide-code (kindly/merge-options! {:code-and-value :vertical}) false)) -(def var96 (+ 1 2)) +(def var101_line683 (+ 1 2)) -(def var97 (+ 3 4)) +(def var102_line685 (+ 3 4)) -(def var98 nil) +(def var103_line687 nil) (def - var99 + var104_line689 (kindly/hide-code (kindly/merge-options! {:style {:background-color "#ccddee"}}) false)) -(def var100 (kind/hiccup [:div [:p "hello"]])) +(def var105_line693 (kind/hiccup [:div [:p "hello"]])) -(def var101 nil) +(def var106_line697 nil) -(def var102 (tc/dataset {:x (range 3)})) +(def var107_line700 (tc/dataset {:x (range 3)})) -(def var103 nil) +(def var108_line702 nil) -(def var104 (kind/hiccup [:div (tc/dataset {:x (range 3)})])) +(def var109_line704 (kind/hiccup [:div (tc/dataset {:x (range 3)})])) -(def var105 nil) +(def var110_line708 nil) (def - var106 + var111_line710 (kindly/hide-code (kindly/merge-options! {:style {:background-color nil}}) false)) -(def var107 (kind/hiccup [:div [:p "hello"]])) +(def var112_line714 (kind/hiccup [:div [:p "hello"]]))